通過鍵盤導航無序列表 - JQuery

Question

我有一個無序列表，可以使用排序插件重新訂購。

由於它不提供鍵盤支持，我已經開始爲此添加一個自定義函數，首先可以通過上/下箭頭鍵瀏覽列表。

Tabbing through the items works with tabindex added，then using the up/down arrows results jump over across multiple items items。

我已經設置了一些測試邊框顏色&可以看到prev &未選擇正確的下一項。

可以按Tab鍵進入以下頁面&嘗試使用箭頭鍵在列表...

http://jsfiddle.net/qYvNq/

$(document).ready(function(){ 

    $("ul#sortable").sortable(); 

    $("ul#sortable li").focus(function() { 

     $(this).css("border-color","red"); 

     $previtem = $(this).prev('li'); 
     $previtem.css("border-color","aqua"); 

     $nextitem = $(this).next('li'); 
     $nextitem.css("border-color","lime"); 

     $(this).keydown(function(e){ 
      if (e.keyCode == 40) { /* Focus Down */ 
       $nextitem.focus(); 
       return false; 
      } else if (e.keyCode == 38) { /* Focus Up */ 
       $previtem.focus(); 
       return false; 
      } 
     }); 

    }); 

}); 

Answer 1

您將有該keydown塊搬出焦點塊類似的所以：

$(document).ready(function(){ 
    var $previtem, 
     $nextitem; 

    $("ul#sortable").sortable(); 

    $("ul#sortable li").focus(function() { 

     $(this).css("border-color","red"); 

     $previtem = $(this).prev('li'); 
     $previtem.css("border-color","aqua"); 

     $nextitem = $(this).next('li'); 
     $nextitem.css("border-color","lime"); 
    }); 

    $("ul#sortable").keydown(function(e){ 
     if (e.keyCode == 40) { /* Focus Down */ 
      $nextitem.focus(); 
      return false; 
     } else if (e.keyCode == 38) { /* Focus Up */ 
      $previtem.focus(); 
      return false; 
     } 
    });  
}); 

當然，拖動列表項後你必須確保重置上一個和下一個項目的順序th en將是一個不同的。

Answer 2

鍵盤導航此清潔工作代碼：如下

$(document).ready(function(e) { 
    $('.suggest_div').hide(); 
    $(document).keydown(function(e) { 
     if (e.keyCode == 38) { // up 
      var selected = $(".selected"); 
      $(".suggest_container li").removeClass("selected"); 
      if (selected.prev().length == 0) { 
       $(".suggest_container li").siblings().last().addClass("selected").children('a').focus(); 
      } else { 
       selected.prev().addClass("selected").children('a').focus(); 
      } 
     } 

     if (e.keyCode == 40) { // down 
      var selected = $(".selected"); 
      $(".suggest_container li").removeClass("selected"); 
      if (selected.next().length == 0) { 
       $(".suggest_container li").siblings().first().addClass("selected").children('a').focus(); 
      } else { 
       selected.next().addClass("selected").children('a').focus(); 
      } 
     } 

     if(e.keyCode == 13){ //Enter 
      $("#suggest_input").val($('.selected a').attr('username')); 
      $(".suggest_div").hide(); 
     } 
    }); 
}); 

以下建議容器在阿賈克斯完成了... 代碼如下：

function auto_suggest_trigger(){ 
    var suggest_input = $('#suggest_input').val(); 

    if(suggest_input != ""){ 
     $.ajax({ 
      url:'autosuggest_parser.php?query='+suggest_input, 
      cache:false, 
      success: function(result){ 
       $('.suggest_div').show(); 
       $('.suggest_div').html(result); 
      } 
     }); 
    }else{ 
     $('.suggest_div').hide(); 
    } 
} 

這是形式的方法..

<form method="post" name="autosuggest"> 
<label>Type Here :</label> <input type="text" name="suggest_input" class="text_input" id="suggest_input" onkeyup="auto_suggest_trigger()" onkeypress="auto_suggest_trigger()"placeholder="Type in here..."/> 
</form> 

現在你可以在郵編中編寫php或其他代碼該文件在ajax ..我已經在PHP中返回。

由Shaikh Arbaaz編碼。