3

垂直スクロール バーの表示をトリガーするのに十分なコンテンツを含む jQuery UI ダイアログがあります。スクロールする唯一の方法は、スクロールバーをクリックしてドラッグするか、スクロールバー領域をクリックすることであることがわかりました-つまり、PgUpキーまたはPgDnキー、矢印キーまたはスペースバーを使用してスクロールすることはできませんでした、など。キーボードによるスクロールを有効にする最良の方法は何ですか?

[注: 私は実際に jQuery UI ダイアログの拡張バージョン ( http://www.fieryprophet.com/demo/jqui-dialog-minmax/ ) を使用していますが、通常のダイアログでも同じ問題を発見しました。]

4

2 に答える 2

2

これは、属性tabindexをダイアログ コンテナdivに追加して、キー イベントを受け入れるようにすることで実現できます。例えば：

<div id="dialog" tabindex="-1">
  very much content here ...
</div>

これをダイアログのopenメソッドに追加することもできます。

$('#dialog').dialog({
    open: function(e, ui) {
        var $dlg = $(e.target);
        if ($dlg.is(':visible')) {
            $dlg.focus();
        }
    }
});

実際の例については、このJSFiddleを参照してください。(もちろん、JSFIddle で foucs を設定しても、スタンドアロン ページと同じようには機能しません)。

.focus()のドキュメントを参照してください: "非表示の要素にフォーカスを設定しようとすると、Internet Explorer でエラーが発生します。 ".

tabindex="-1*が行うことの適切な説明については、「Tabindex を使用して要素をフォーカス可能にする」を参照してください。

于 2014-09-04T11:00:48.427 に答える
1

ウィンドウのイベントにイベント ハンドラーをバインドし、keyup押されたキーが PgUP または PgDown または決定したものであれば、ダイアログをスクロールできます。このようなもの：

$(window).keydown(event) {
    event.preventDefault();
}

$(window).keypress(event) {
    event.preventDefault();
}

$(window).keyup(function(event) {
    event.preventDefault();

    var curScroll = $("#content").scrollTop();

    switch(event.which) {
        case 32:
        case 34:
            curFocus.scrollTop(curScroll + 100);
            break;
        case 33:
            curFocus.scrollTop(curScroll - 100);
            break;
    }
});

ソリューションをよりよく説明するためにjsFiddleを作成しました。

編集:event.preventDefault()ページのスクロールを避けるために、キーボード イベント ハンドラーに を追加しました。

更新: どうやら、ダイアログはシンプルfocusまたはblurイベントを発生させず、本体も発生させません。フォーカスされた要素のみをスクロール可能にするか、ウィンドウがない場合はウィンドウをスクロール可能にするための指示を少し追加しました。

var curFocus = $(window);

$("#content").on("dialogfocus", function() {
    curFocus = $(this);
});

$("body").click(function(event) {
    if((event.target) != $("#content")[0])
        curFocus = $(window);
});
于 2013-02-23T23:03:57.280 に答える