0

単純なもののはずですが、私の検索では無関係の問題が発生しています。

基本的に、ASP.Net 用のカスタム DropDown CheckBoxList を作成しました。

この単純化された例のように、ネストされた Div を使用します (リスト/テーブル自体は ASP.Net CheckBoxList によって生成されます)。

<DIV class="dropDownComboxBoxList">
    <DIV class="dropDownControl">
        <DIV class="dropDownLeft">
            <INPUT class="dropDownEdit" type="text" > 
        </DIV>
        <DIV class="dropDownRight">
            <IMG class="img-swap" src="/Images/DropDown_off.gif"> 
        </DIV>
    </DIV>
    <DIV style="MIN-WIDTH: 300px; DISPLAY: none; MAX-HEIGHT: 150px" class="dropDownDiv">
        <TABLE style="WIDTH: 100%; HEIGHT: 40px" id="checkBoxList" class="dropDownTable">
            <TBODY>
                <TR>
                    <TD class="firstCheck">
                        <INPUT class="dropDownCheck" type="checkbox">
                        <LABEL class="dropDownLabel">All</LABEL>
                    </TD>
                </TR>
                <TR class="checkSel">
                    <TD>
                        <INPUT class="dropDownCheck" type="checkbox">
                        <LABEL class="dropDownLabel">Item 0</LABEL>
                    </TD>
                </TR>
            </TBODY>
        </TABLE>
    </DIV>
</DIV>

コントロールは次のように表示されます。

ここに画像の説明を入力

問題は、 Text コントロールが画面の中央より下にある場合、ポップアップ Div が Text コントロールの上に表示される必要があることです。たとえば、他の標準的なドロップダウンと同様です。

ここに画像の説明を入力

JQuery/CSS でこれを行う最も簡単な方法は何ですか?

更新 - 私の最初の不完全なテストの試みは次のようになります (ただし、ジャンプする視覚効果は悪いです):

function DropDown(id, idt) 
    $(id).toggle('fast', function () {
        if ($(id).css('display') != 'none') {
            var pos = $(id).height() + $(idt).height();
            $(id).css("margin-top", -pos+"px");
        }
    });
});
4

1 に答える 1

0

これは実際に機能しますが、可能であればベストプラクティスなどを使用して改善したいと思います:

function DropDown(id, idt) {
    var dd = $(id);
    var tb = $(idt);
    var pos = (tb.position().top > $(window).height() / 2 + $(document).scrollTop()) ? -(dd.height() + tb.height() + 9) : 0;
    dd.css("margin-top", pos + "px");
    dd.toggle(1, function () {
        ... Do more stuff in here
    });
}

残っている問題は次のとおりです。

  • トグルをアニメーション化することはできません (たとえば、「高速」でアニメーションが飛び出すため)。
  • 親divのパディングに対応するために、位置オフセットを修正する必要があります。
于 2012-07-16T15:26:13.230 に答える