ASP.NET MVC4 Web アプリケーションでFancybox 2.1.5を使用して、 <ul>
. ユーザーにとって物事を簡単にするために、キープレスイベントを有効にして、結果の を上下に移動できるようにしました<li>
。ユーザーは、マウスを使用してスクロールして選択するか、キーボードを使用してアイテムを選択して続行できます。
私が見つけたのは、表示されるデータが特定の量よりも大きく、垂直スクロールバーが作成された場合 (注: Fancybox には maxHeight プロパティが設定されています)、キーボードを使用してリストを下に移動すると、選択した項目が消えた場合です。ファンシーボックスウィンドウ/ダイアログは、マウスホイールでスクロールした場合のように、スクロールバーがそれに合わせて移動しません。
キーボードを使用するときに Fancybox を手動でスクロールする方法を知っている人はいますか?
オーバーフローCSS設定とファンシーボックススクロールプロパティをいじってみましたが、これは役に立ちません。手動でナビゲートしているときにイベントをトリガーする必要があると確信しています..
HTML
<div id='myDiv'>
<ul>
<li>Apple</li>
<li>Orange</li>
<li>Pear</li>
</ul>
</div>
Fancybox JS inc. キーボードのセットアップ
$.fancybox.open($("#myDiv"), {
minHeight: 0,
maxHeight: 300,
afterShow: function () {
$(document).on("keydown", function (e) {
setupKeyboardEvents(e);
})
},
afterClose: function () {
$(document).off("keydown");
}
});
function setupKeyboardEvents(e) {
var $selected = $("#myDiv ul li.highlight"),
$li = $("#myDiv ul li");
if (e.keyCode == 40) { /* Down */
if (!$selected.length) {
$li.eq(0).addClass('highlight')
}
else {
$selected.removeClass('highlight');
if (!$selected.next().length) {
$li.eq(0).addClass('highlight')
} else {
$selected.next().addClass('highlight');
}
}
} else if (e.keyCode === 38) { /* Up */
if (!$selected.length) {
$li.eq(-1).addClass('highlight')
}
else {
$selected.removeClass('highlight');
if (!$selected.prev().length) {
$li.eq(-1).addClass('highlight')
} else {
$selected.prev().addClass('highlight');
}
}
} else if (e.keyCode == 13) { /* Enter */
if ($selected.length) {
// CONTINUE..
}
return false;
}
}