キーボードで「ナビゲーション項目」をナビゲートしたい。私はこのコードから始めました。これは序章に過ぎない:
jQuery モバイル:
window.onload = function() {
document.onkeydown=function(e){
if (!e) e=window.event;
switch(e.keyCode) {
case 37:
$("a").blur();
$("a").prev(".nav-item").focus();
break;
case 38:
alert("Up arrow");
break;
case 39:
$("a").blur();
$("a").next(".nav-item").focus();
break;
case 40:
alert("Down arrow");
break;
case 13:
$("a:selected").click();
break;
}
}
}
ご覧のとおり、現時点では、right、prev、および enter のみを試しています。は 2 番目のenter(:13)
カテゴリをクリックし、 への移行をうまく行います#category
。問題は、複数のアイテムが選択されていることです。最初のカテゴリはフォーカスされることはありませんが、like.hover
変換が行われますが、複数のアイテムも含まれます。
グリッド内のアイテムがフォーカスされませんでした。
後で、下矢印と上矢印を使いたいと思います。私は非常に遠いですか?
html:
<body>
<div data-role="page" data-theme="b">
<div data-role="header" data-theme="b">
<div data-role="controlgroup" data-type="horizontal" data-iconpos="right" id="header_btn">
<a class="but nav-item" href="#" data-role="button" data-icon="arrow-l" data-rel="back" data-direction="reverse">Back</a>
<a class="but nav-item" href="" data-role="button" data-icon="home" data-rel="home" data-direction="reverse">Home</a>
</div>
</div>
<div data-role="content" class="ui-grid-a">
<div class="ui-block-a" style="width:30%">
<a class="but nav-item" data-transition="slide" href="#Categor" data-role="button">Categor</a>
<a class="but nav-item" data-transition="slide" href="#Otra" data-role="button">Otra</a>
<a class="but nav-item" data-transition="slide" href="#Otramas" data-role="button">Otramas</a>
</div>
<div class="ui-block-b" style="width:65%; float:right; overflow:auto" id="divi">
<h1>Categor </h1>
<div class="ui-grid-b">
<div class="ui-block-a">
<a href="http://vimeo.com" id="it1" data-role="button" data-theme="b" class="but nav-item"><img width="150" height="150" src="150.jpg" /><li style="list-style-type:none">Vimeo</li></a>
</div>
<div class="ui-block-b">
<a href="http://youtube" id="it2" data-role="button" data-theme="b" class="but nav-item"><img width="150" height="150" src="http://151.jpg" /><li style="list-style-type:none">Youtube</li></a>
</div>
<div class="ui-block-c">
<a href="http://alibaba.com" id="it3" data-role="button" data-theme="b" class="but nav-item"><img width="150" height="150" src="152.jpeg" /><li style="list-style-type:none">Ali Baba</li></a>
</div>
</div>
</div><p><p>
<div data-role="footer" data-id="foot" data-position="fixed">
<h4> Categor - Nuevo</h4>
</div>
</div>
<div data-role="page" class="pagen" id="Otra" data-theme="b">
<div data-role="header" data-theme="b">
<div data-role="controlgroup" data-type="horizontal" data-iconpos="right" id="header_btn">
<a class="but nav-item" href="#" data-role="button" data-icon="arrow-l" data-rel="back" data-direction="reverse">Back</a>
<a class="but nav-item" href="" data-role="button" data-icon="home" data-rel="home" data-direction="reverse">Home</a>
</div></div>
<div data-role="content" class="ui-grid-a">
<div class="ui-block-a" style="width:30%">
<a class="but nav-item" data-transition="slide" href="#Categor" data-role="button">Categor</a>
<a class="but nav-item" data-transition="slide" href="#Otra" data-role="button">Otra</a>
<a class="but nav-item" data-transition="slide" href="#Otramas" data-role="button">Otramas</a>
</div>
<div class="ui-block-b" style="width:65%; float:right; overflow:auto" id="divi">
<h1>Categor </h1>
<div class="ui-grid-b">
<div class="ui-block-a">
<a href="http://vimeo.com" id="it1" data-role="button" data-theme="b" class="but nav-item">
<img width="150" height="150" src="150.jpg" /><li style="list-style-type:none">Vimeo</li>
</a>
</div>
<div class="ui-block-b">
<a href="http://youtube" id="it2" data-role="button" data-theme="b" class="but nav-item">
<img width="150" height="150" src="http://151.jpg" /><li style="list-style-type:none">Youtube</li>
</a>
</div>
<div class="ui-block-c">
<a href="http://alibaba.com" id="it3" data-role="button" data-theme="b" class="but nav-item">
<img width="150" height="150" src="152.jpeg" /><li style="list-style-type:none">Ali Baba</li>
</a>
</div>
</div></div><p><p>
<div data-role="footer" data-id="foot" data-position="fixed">
<h4> Categor - Nuevo</h4>
</div>
</div>
<div data-role="page" class="pagen" id="Otramas" data-theme="b">
<div data-role="header" data-theme="b">
<div data-role="controlgroup" data-type="horizontal" data-iconpos="right" id="header_btn">
<a class="but nav-item" href="#" data-role="button" data-icon="arrow-l" data-rel="back" data-direction="reverse">Back</a>
<a class="but nav-item" href="" data-role="button" data-icon="home" data-rel="home" data-direction="reverse">Home</a>
</div></div>
<div data-role="content" class="ui-grid-a">
<div class="ui-block-a" style="width:30%">
<a class="but nav-item" data-transition="slide" href="#Categor" data-role="button">Categor</a>
<a class="but nav-item" data-transition="slide" href="#Otra" data-role="button">Otra</a>
<a class="but nav-item" data-transition="slide" href="#Otramas" data-role="button">Otramas</a>
</div>
<div class="ui-block-b" style="width:65%; float:right; overflow:auto" id="divi">
<h1>Categor </h1>
<div class="ui-grid-b">
<div class="ui-block-a">
<a href="http://vimeo.com" id="it1" data-role="button" data-theme="b" class="but nav-item">
<img width="150" height="150" src="150.jpg" /><li style="list-style-type:none">Vimeo</li>
</a>
</div>
<div class="ui-block-b">
<a href="http://youtube" id="it2" data-role="button" data-theme="b" class="but nav-item">
<img width="150" height="150" src="151.jpg" /><li style="list-style-type:none">Youtube</li>
</a>
</div>
<div class="ui-block-c">
<a href="http://alibaba.com" id="it3" data-role="button" data-theme="b" class="but nav-item">
<img width="150" height="150" src="152.jpeg" /><li style="list-style-type:none">Ali Baba</li>
</a>
</div>
</div></div><p><p>
<div data-role="footer" data-id="foot" data-position="fixed">
<h4> Categor - Nuevo</h4>
</div>
</div>
</body>