clavier sélection li imbriqué est avec jquery

Question

J'ai une charge de emboîtées <ul> « s et <li> » s et je voudrais être en mesure d'avoir une classe de vol stationnaire/sélectionné sur un <li>, et utiliser le clavier boutons haut et bas pour sélectionner vers le haut et vers le bas sur le <li> s .. mais ils sont imbriqués et doivent sauter <ul> s si nécessaire.

Par exemple:

<ul> 
    <li class='cat'> 
     cat 1 
     <ul> 
      <li class='hover'>item 1</li> 
      <li>item 2</li> 
      <li>item 3</li> 
      <li>item 4</li> 
     </ul> 
    </li> 
    <li class='cat'> 
     cat 2 
     <ul> 
      <li>item 5</li> 
      <li>item 6</li> 
      <li>item 7</li> 
      <li>item 8</li> 
     </ul> 
     <ul class='subcat'> 
      <li class='cat'> 
       Cat 3 
       <ul> 
        <li>item 9</li> 
        <li>item 10</li> 
        <li>item 11</li> 
        <li>item 12</li> 
       </ul> 
      </li> 
     </ul> 
    </li> 
    <li class='cat'> 
     cat 4 
     <ul> 
      <li>item 13</li> 
      <li>item 14</li> 
      <li>item 15</li> 
      <li>item 16</li> 
     </ul> 
    </li> 
</ul> 

Comme j'appuie sur la touche vers le bas, je souhaite que les éléments à sélectionner dans l'ordre numérique (ils ne sont pas d'ID d'ordre numérique et parfois certains d'entre eux sont cachés, ils devraient être ignorés . Mais il faut aller à la prochaine <li> ce n'est pas une catégorie et définir que comme vol stationnaire.

Answer 1

Avez-vous encore rien vous essayé?

Sans une solution spécifique, voici quelques choses à obtenir y ou aller.

1) Liez l'événement KeyPress (par exemple au document)

$(document).keydown(MyKeyupFunc); 

2) Capture du haut/bas keypress: Le code pour votre keyup/keydown

function MyKeyupFunc(event){ 

    switch (event.keyCode) { 
     case 38: //keyup 
      //key down code 
      break; 
     case 40: //keydown 
      //key up code 
      break; 
     default: 
      return; 
    } 

    //stop event 
    event.preventDefault(); 
    event.stopPropagation(); 
    if ($.browser.msie) { 
     event.originalEvent.keyCode = 0; 
     event.originalEvent.cancelBubble = true; 
     event.originalEvent.returnValue = false; 
    } 
} 

3), sera impliquer la recherche de ce qui est sélectionné, et quel est l'élément suivant/précédent. Vous devrez peut-être vérifier qu'un objet possède également la classe hover.

Vous aurez besoin de quoi choisir vos éléments navigables, par conséquent, vous aurez besoin de quelque chose pour que jQuery puisse sélectionner. Suggérer l'ajout d'un vide css class="navigable" à chacun, et de cette façon vous pouvez sélectionner tous les éléments soumis à la navigation du clavier:

var $navListitems = $("li.navigable"); 

Factoring votre exigence visible:

var $navListitems = $("li.navigable:visible"); 

4) pensez peut-être sur le tri ces vérifications sur le lien suivant

http://www.wrichards.com/blog/2009/02/jquery-sorting-elements/

Ceci est un démarreur, de toute façon. Je peux penser à beaucoup plus que vous aurez besoin de faire, mais je pense que ce sera une aventure pour vous d'essayer vous-même.

Lorsque vous avez des questions, je suis sûr que des gens seront heureux de vous aider si vous postez revenir sur le forum :-)

Answer 2

Vous pouvez le faire avec HTML pur si vous utilisez les boutons radio.

<ul> 
    <li class='cat'>cat 1 
     <ul> 
     <li><input type='radio' name='n' id='n1'><label for='n1'>item 1</label></input></li> 
     <li><input type='radio' name='n' id='n2'><label for='n2'>item 2</label></input></li> 
     <li><input type='radio' name='n' id='n3'><label for='n3'>item 3</label></input></li> 
     <li><input type='radio' name='n' id='n4'><label for='n4'>item 4</label></input></li> 
     </ul> 
    </li> 
    <li class='cat'>cat 2 
     <ul> 
     <ul> 
     <li><input type='radio' name='n' id='n5'><label for='n5'>item 5</label></input></li> 
     <li><input type='radio' name='n' id='n6'><label for='n6'>item 6</label></input></li> 
     <li><input type='radio' name='n' id='n7'><label for='n7'>item 7</label></input></li> 
     <li><input type='radio' name='n' id='n8'><label for='n8'>item 8</label></input></li> 
     </ul> 
     <ul class='subcat'> 
      <li class='cat'>Cat 3 
       <ul> 
       <li><input type='radio' name='n' id='n9'><label for='n9'>item 9</label></input></li> 
       <li><input type='radio' name='n' id='n10'><label for='n10'>item 10</label></input></li> 
       <li><input type='radio' name='n' id='n11'><label for='n11'>item 11</label></input></li> 
       <li><input type='radio' name='n' id='n12'><label for='n12'>item 12</label></input></li> 
       </ul> 
      </li> 
     </ul> 
    </li> 
    <li class='cat'> 
     cat 4 
     <ul> 
     <li><input type='radio' name='n' id='n13'><label for='n13'>item 13</label></input></li> 
     <li><input type='radio' name='n' id='n14'><label for='n14'>item 14</label></input></li> 
     <li><input type='radio' name='n' id='n15'><label for='n15'>item 15</label></input></li> 
     <li><input type='radio' name='n' id='n16'><label for='n16'>item 16</label></input></li> 
     </ul> 
    </li> 
</ul>