0

jQuery jCarousel スクリプトの 0.3 バージョンを使用して、作業中の Web ページに3 つのカルーセルを表示しています。これら 3 つのカルーセルは問題なく機能します。

問題は、キーボードを使用して適切に使用できないことです。

  1. ページをタブで移動すると、カルーセル内の最初のアイテムの最初のリンクにフォーカスが移動します。このアイテムが表示されていなくても! (例: カルーセルの 1 つの「次へ」リンクをクリックし、タブ キーを使用して参照します。フォーカスは、カルーセル内に表示されていないリンクに移動します)。
  2. 「タブ」キーを押し続けると、カルーセル内のすべてのアイテムのすべてのリンクにフォーカスが移動します。

その代わりに: フォーカスは、最初に表示される項目の最初のリンクに移動する必要があります。次に、最後の表示項目の最後のリンクに到達すると、フォーカスはカルーセルの外に出ます (実際には、カルーセルの外にある次のリンク)。

解決策は tabindex を使用することです...しかし、ページの一部はウェブサイトの他のページと共有されているため、すべてのページのすべてのリンクで tabindex を使用することはできません...

その代わりに、次のようなことを試しました：

$("#carousel-editos li a").focusin(function () { 
  $("#carousel-editos li.jcarousel-item-first .post-title a").focus(); 
  return false; 
});

しかし、その後、「タブ」キーをそれ以上使用できなくなります...

これが明確であることを願っています...助けてくれてありがとう！

4

2 に答える 2

0

私はあなたがすでに提供した答えの組み合わせが必要だと思います。Javascriptを使用して、タブ可能にする必要のあるHTMLのtabindex属性を動的に設定できるようになっているようです（新しい単語）。私はこのようなことを考えています：

  1. ページの読み込み時に、カルーセル内のすべての表示アイテムを検索します。jQueryを使用tabindexして、タブサイクルで必要な各アイテムのプロパティを設定します。
  2. 循環するページ上の他のすべてのリンクにプロパティを割り当てtabindexます。
  3. ユーザーがカルーセル内のアイテムを変更したときに属性を変更するjQueryを追加しtabindexます（[次へ] / [前へ]ボタンをクリックします）。

jsFiddleで簡単な例を作成すると、はるかに簡単に支援できます。

于 2012-05-22T17:01:33.410 に答える
0

カルーセル createEnd および scrollEnd 関数で、.jCarousel の内容をリセットして、表示されているカルーセル項目のみが「タブ可能」になるようにすることができます。私は次のように私のコードでそれを行いました:

var bannerSlider_scrollEnd = function(event, carousel) {
    var $carousel = carousel.element(),
        $items = carousel.items(),
        $bannerContent,
        $visibleItemsContent = carousel.visible().find('.bannerContent');
    $items.each(function (index) {
        $bannerContent = $(this).find('.bannerContent');
        disableTabbing($bannerContent);
    });
    reenableTabbing($visibleItemsContent);
    $visibleItemsContent.find(':focusable').eq(0).focus();
 };

disableTabbing($container)および行は、基本的に特定のコンテナー内のすべての要素を検索し、tabindex をそれぞれ「-1」、次に「0」に設定するreenableTabbing($container)、サイトにコーディングしたヘルパー関数を参照しています。:focusable

このプロセスの後、ユーザーは、すべてのカルーセル アイテムではなく、表示されているカルーセル アイテムのみをタブ移動したままになります。

于 2013-03-21T15:00:45.420 に答える