0

以前、HighSlide のドラッグ可能なヘッダーについて関連する質問をしたところ、RoadRash から回答がありました。（どうもありがとう！）

ただし、ソリューションでは contentId の使用が許可されていないようです。これは、複数のエキスパンダーに必要になると思います。

以下のコードには 2 つのリンクがあります。どちらも「働く」。最初のものは、私の元の問題に対する大まかな解決策ですが、新しい問題を提示します。2 つ目は、私が最初に使用していたアプローチに似ており、ほぼ同じです。

私が必要としているのは、両方のアプローチの利点があるはずです。テキスト以外をドラッグできるヘッダーが必要です。サイズ変更のつまみは必要ありません。また、同じページのさまざまな html エキスパンダーの複数の div を参照する機能が必要です。これには contentId が必要だと思いますが、間違っている可能性があります。

(意味を理解するには、HighSlide を実装している任意のページにコードを貼り付けて、各 Click me をクリックしてください。)

どんな助けでも大歓迎です。回答が機能する場合は常に緑色のチェックをオンにし、知識のある支援の試みに常に賛成票を投じます.

<!-- THIS WORKS, BUT DOES NOT ALLOW ME TO SPECIFY CONTENT FOR EACH LINK.  -->

<a href="javascript:;" onclick="
    hs.headingText = 'First header - entire top is draggable!';
    return hs.htmlExpand(this, {wrapperClassName: 'draggable-header', width: 550})" 
        title="Popup Title" 
        class="highslide">
    Click Me First!
</a>
<div class="highslide-maincontent">
    <h3>First Example</h3>
    This one can be dragged by the entire header area. (Good for me.)<br>
    However, it supplies a resizing thumb in the lower-right corner. (Bad for me.)<br>
    It does NOT use contentId. (Which is necessary for me because I have
    many expanders on the page.)                
</div>

<br>
<br>

<!-- THIS WORKS ALSO, BUT ONLY THE TEXT IS DRAGGABLE.  -->

<a href="javascript:;" onclick="
    hs.headingText = 'Second header - only text is draggable!';
    return hs.htmlExpand(this, {wrapperClassName: 'draggable-header', contentId: 'myContent', width: 550})" 
        title="Popup Title" 
        class="highslide">
    Click Me Second!
</a>
<div class="highslide-html-content" id="myContent">
        <div class="highslide-header">
        <ul>
            <li class="highslide-close">
                <a href="#" onclick="return hs.close(this)"></a>
            </li>
        </ul>
    </div>
    <div class="highslide-body">
    <h3>Second Example</h3>
    This one can ONLY be dragged by the text in the header area. (Bad for me.)<br>
    It does not supply a resizing thumb in the lower-right corner. (Good for me.)<br>
    It DOES use contentId.  (Necessary for me because I have
    many expanders on the page.)            
    </div>
</div>
4

1 に答える 1

1

ここで提供したソリューション( highslide-maincontentdiv を使用)を使用して、目的を達成できます。

wrapperClassName次のように、既存のコードに追加できるサイズ変更アイコンを使用して、フッターを削除するための事前作成済みのアイコンがあります。wrapperClassName: 'draggable-header no-footer'

同じページで必要な数の highslide-maincontent ポップアップを使用できます。highslide-maincontent終了アンカータグの直後にdivが配置されていることを確認してください</a>

ライブデモ: http://jsfiddle.net/roadrash/mXmLN/1/

于 2013-03-22T22:38:13.403 に答える