0

この画像ギャラリーに矢印キー ナビゲーションを追加しようとしています。

これと同じように動作するはずです

var chosen = "";
$(document).keydown(function (e) { // 38-up, 40-down
    if (e.keyCode == 40) {
        if (chosen === "") {
            chosen = 0;
        } else if ((chosen + 1) < $('li.t').length) {
            chosen++;
        }
        $('li.t').removeClass('selected');
        $('li.t:eq(' + chosen + ')').addClass('selected');
        $('li.t').click(this);
        return false;
    }
    if (e.keyCode == 38) {
        if (chosen === "") {
            chosen = 0;
        } else if (chosen > 0) {
            chosen--;
        }
        $('li.t').removeClass('selected');
        $('li.t:eq(' + chosen + ')').addClass('selected');
        $('li.t').click(this);
        return false;
    }
});

…しかし、iframe にページをロードし、同時に別のクリック アクション (黄色のフレームを新しく選択したサムネイルに移動する) を実行する必要があるため、矢印キーを押すたびにクリックのように動作するようにしたいと考えています。

また、矢印キーで下に移動すると、選択したサムネイルが表示されたままになるように強制的にスクロールできると便利です。

…これが機能した場合、次に遭遇する問題は、iframe 内で何かがクリックされるたびに、メイン ページと矢印キー ナビゲーションにフォーカスを失うことになると思います。これは無視できる問題ですが、簡単な解決策があればそれを使用したいと思います。

ありがとう。

4

1 に答える 1

0

あなたが提供したjsfiddleを使用すると、jqueryのtrigger()メソッドでユーザーのクリックをシミュレートできます。

$('li:eq('+whichIndex+') a').trigger("click");

これにより、クリック イベントの現在のコードが実行されます。これにより、クリックやキーの押下を追跡するためのロジックについて心配する必要がなくなります。

Javascript

var chosen = "";
$(document).keydown(function(e){ // 38-up, 40-down
    chosen = $('li.selected').index(); //grab the current selection
    if (e.keyCode == 40) { 
        if(chosen === "") {
            chosen = 0;
        } else if((chosen+1) < $('li').length) {
            chosen++; 
        }
        selectImage(chosen);
        return false;
    }
    if (e.keyCode == 38) { 
        if(chosen === "") {
            chosen = 0;
        } else if(chosen > 0) {
            chosen--;            
        }
        selectImage(chosen);
        return false;
    }
});

function selectImage(whichIndex) {
    $('li:eq('+whichIndex+') a').trigger("click");
}
$("#selection a").click(function() {
    $('li').removeClass('selected'); 
    $(this).parent().addClass('selected');
});

このサンプルでは、​​keydown イベントは、次に「選択」する必要がある要素を単純に判断します。見つかったら、 selectImage() 関数が呼び出されます。これは基本的に、選択した要素でのマウス クリックをシミュレートします。

要素をクリックすると (ユーザー クリックか、jquery を介して呼び出されるクリックかに関係なく)、古い要素の選択を解除し、新しい要素を選択する実際のロジックが実行されます。

この作業サンプルのフィドルは、ここにありますhttp://jsfiddle.net/DPHWZ/

于 2013-03-10T03:30:33.393 に答える