1

Textbox、Image (矢印)、およびドロップダウン DIV の非表示の ASP.Net CheckBoxList コントロールを使用してゼロから作成した "DropDownCheckBoxList" ユーザー コントロールがあります。

多くの JQuery と組み合わせると、最後の 1 つの機能を除いてうまく機能します...ドロップダウン リスト項目のキーボード アップ/ダウン ナビゲーション。

次のようになります。

ここに画像の説明を入力

生成された HTML のサンプルを以下に示します。

<div style="width: 170px;" class="dropDownComboxBoxList">
    <div onclick="DropDown('#MainContent_DropDownCheckBoxList1_dropDownDiv', '#MainContent_DropDownCheckBoxList1_dropDownTextBox')" class="dropDownControl" id="MainContent_DropDownCheckBoxList1_dropDownControl">
        <div style="width: 150px;" class="dropDownLeft">
            <input type="text" class="dropDownEdit" id="MainContent_DropDownCheckBoxList1_dropDownTextBox" readonly="readonly" value="Item 0, Item 1" name="ctl00$MainContent$DropDownCheckBoxList1$dropDownTextBox">
        </div>
        <div class="dropDownRight">
            <img src="http://localhost:28071/Images/DropDown_off.gif" class="dropDownImg img-swap" id="MainContent_DropDownCheckBoxList1_dropDownImage">
        </div>
    </div>
    <div style="width: 300px; max-height: 300px; margin-top: 0px; display: none;" class="dropDownDiv" id="MainContent_DropDownCheckBoxList1_dropDownDiv">
        <table style="height: 40px; width: 290px;" class="checkBoxList dropDownTable" id="MainContent_DropDownCheckBoxList1_checkBoxList">
            <tbody>
                <tr class="checkSel">
                    <td><input type="checkbox" value="0" checked="checked" id="MainContent_DropDownCheckBoxList1_checkBoxList_0" class="dropDownCheck"><label for="MainContent_DropDownCheckBoxList1_checkBoxList_0" class="dropDownLabel">Item 0</label></td>
                </tr>
                <tr class="checkSel">
                    <td><input type="checkbox" value="1" checked="checked" id="MainContent_DropDownCheckBoxList1_checkBoxList_1" class="dropDownCheck"><label for="MainContent_DropDownCheckBoxList1_checkBoxList_1" class="dropDownLabel">Item 1</label></td>
                </tr>
                <tr>
                    <td><input type="checkbox" value="2" id="MainContent_DropDownCheckBoxList1_checkBoxList_2" class="dropDownCheck"><label for="MainContent_DropDownCheckBoxList1_checkBoxList_2" class="dropDownLabel">Item 2</label></td>
                </tr>
                <tr>
                    <td><input type="checkbox" value="3" id="MainContent_DropDownCheckBoxList1_checkBoxList_3" class="dropDownCheck"><label for="MainContent_DropDownCheckBoxList1_checkBoxList_3" class="dropDownLabel">Item 3</label></td>
                </tr>
            </tbody>
        </table>
    </div>
</div>

jQuery.keynav に接続してからjQuery.navigateに接続しようとしましたが、どちらもキーの押下をキャプチャしますが、選択には影響せず、キーアップ/ダウンはドロップダウンリストをスクロールするだけです (さらに項目がある場合)もちろん、このサンプルとは異なります)。

jQuery.navigate の現在の接続は、表示されている HTML では次のようになります。

$('#MainContent_DropDownCheckBoxList1_checkBoxList').filter('td').navigate({ mouse: true, activeClass: 'checkHover' });

ナビゲートするためにさらに何をする必要があるか考えていますか? ドロップダウンで CheckBoxList を使用するだけの問題ですか? ナビゲーション アドインを誤用していませんか?

4

0 に答える 0