0

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;
    }
}
4

2 に答える 2

0

入力要素に焦点を合わせていないため、メインの div は (明らかに) スクロールしません。本当に必要な場合は、強調表示された要素の位置を確認し、それが表示されているかどうかを計算し、必要に応じて親要素をスクロールする必要があります。

于 2013-08-19T09:18:07.553 に答える
0

矢印を使用して上下にスクロールするには、fancybox のスクロール可能なコンテナー (overflowプロパティが に設定されているコンテナーauto) を取得する必要があるようです。focus

回避策として、次のようにコールバックを使用して要素afterShowに設定します。focus.fancybox-inner

$(".fancybox").fancybox({
    afterShow: function(){
        $(".fancybox-inner").attr("tabindex",1).focus();
    }
});

重要tabindex:回避策をほとんどのブラウザーと一致させるために属性も追加したことに注意してください。これがないと Chrome は機能せず、コンテンツ内をクリックすると Firefox が失わfocusれます (たとえば、インタラクティブなコンテンツがある場合)。

このJSFIDDLEを確認すると、fancybox が表示された直後に矢印を使用してコンテンツを上下にスクロールできることがわかります。

于 2013-08-19T00:59:09.770 に答える