jQueryMObiile中的D-pad导航焦点（）next（）

时间：2012-11-26 18:45:06

标签： jquery mobile navigation d-pad

我想用键盘浏览“nav-items”。 我开始使用这段代码。这只是一个开始：

jQuery mobile：

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;
  }
 }
}

正如你所看到的，到目前为止我只是尝试正确，上一步，并进入。 enter(:13)点击了第二个类别，并很好地过渡到#category。 问题是我看到选择了多个项目。第一个类别从未集中，但类似.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>

0 个答案:

没有答案
相关问题
最新问题