0

そこで、<SELECT>要素を見つけて非表示にし、画像でいっぱいの<DIV>に置き換えるjQuery機能を開発しました。<DIV>を使用すると、ユーザーはタブで移動でき、左/右矢印のキー押下イベントをリッスンして、適切な画像を強調表示します（つまり、目的の画像を完全に不透明に設定し、他の画像をグレー表示します）。これを、SELECTにタブで移動し、上下のキーを使用して選択した項目を変更できる従来のHTMLと比較できます。

jQueryを介して追加された基本的なHTMLを使用して、新しいタブ可能なDIV要素を追加します。

jQuery（'＃desiredOuterDomObjectID'）。prepend（ "<div tabindex = '0' id ='mnu1'>"）;

これは、フォームの3つのSELECT要素のうち2つで正常に機能します。

したがって、3番目のSELECT要素の問題は次のとおりです。無数のjQuery関数をさらに一歩進めて、適切なプラグインにラップしました。私のコードのプラグインバージョンは、キースルー可能なIMGオブジェクトの内部配列を使用して、完全に機能するタブ可能な<DIV>も作成します。唯一の違いは、点線のハイライト境界ボックスがこの特定の<DIV>要素に表示されないことです。

もちろん、目標は、HTMLフォーム全体で「改善された」プラグインコードを使用し、以前の開発作業を破棄することです。ただし、プラグインに通常のタブ可能なDIVに表示可能な境界線を作成させることができないようです。

4

1 に答える 1

0

私はついに私のDIV要素の違いを理解しました。

追加したtabindexプロパティに加えて、最初の2つの要素（フォーカスを合わせたときに点線のアウトラインが正しく表示された）にも、ある種の高さプロパティが割り当てられているようです。

ルージュDIV要素（tabindexプロパティも含む）には高さが指定されていません（他のDIV要素と同様にIMG要素が含まれているため、自動的に高さが得られる可能性があると思いました）。

javascriptを使用してそのstyle.heightプロパティにピクセル値を割り当てると、タブのフォーカスを示す点線の境界線が正しく表示され始めました。

于 2013-01-02T21:16:38.017 に答える