jQuery를 사용하여 위/아래/왼쪽/오른쪽 키보드 탐색?

Question

div의 집합이 모두 같고 높이/너비가 float:left 인 목록이 있으므로 서로 옆에 앉아 그 부모가 항목과 결합 된 것보다 작 으면 아래로 접을 수 있습니다.

꽤 표준입니다. 그러나 당신이 위/아래 화살표 키는 것을 알 것이다, 나는 아래의 코드를 사용하여 이전/다음 키보드 탐색을 추가 한

: 이것은 이런 식으로 뭔가를 제공, 트위터 부트 스트랩 아이콘의 목록을 만드는 것입니다 왼쪽/오른쪽 함수를 호출하도록 매핑됩니다. 내가 어떻게 해야할지 모르겠지만 위/아래 탐색을 실제로하는 것입니다. 이 같은

JsFiddle

(function ($) { 
    $.widget("ui.iconSelect", { 

     // default options 
     options: { 

     }, 

     $select: null, 

     $wrapper: null, 

     $list: null, 

     $filter: null, 

     $active: null, 

     icons: {}, 

     keys: { 
      left: 37, 
      up: 38, 
      right: 39, 
      down: 40 

     }, 

     //initialization function 
     _create: function() { 

      var that = this; 
      that.$select = that.element; 

      that.$wrapper = $('<div class="select-icon" tabindex="0"></div>'); 
      that.$filter = $('<input class="span12" tabindex="-1" placeholder="Filter by class name..."/>').appendTo(that.$wrapper); 
      that.$list = $('<div class="select-icon-list"></div>').appendTo(that.$wrapper); 


      //build the list of icons 
      that.element.find('option').each(function() { 
       var $option = $(this); 
       var icon = $option.val(); 

       that.icons[icon] = $('<a data-class="' + icon + '"><i class="icon ' + icon + '"></i></a>'); 

       if ($option.is(':selected')) { 
        that.icons[icon].addClass('selected active'); 
       } 

       that.$list.append(that.icons[icon]); 
      }); 

      that.$wrapper.insertBefore(that.$select); 
      that.$select.addClass('hide'); 



      that._setupArrowKeysHandler(); 
      that._setupClickHandler(); 
      that._setupFilter(); 
      that.focus('selected'); 
     }, 

     focus: function (type) { 
      var that = this; 
      if (that.$active === null || that.$active.length == 0) { 
       if (type == 'first') { 
        that.$active = that.$list.find('a:visible:first'); 
       } else if (type == 'last') { 
        that.$active = that.$list.find('a:visible:last'); 
       } else if (type == 'selected') { 
        that.$active = that.$list.find('a.selected:visible:first'); 
        that.focus('first'); 
       } 
      } 
      that.$active.addClass('active'); 
      var toScroll = ((that.$list.scrollTop() + that.$active.position().top)-that.$list.height()/2)+that.$active.height()/2; 
      //that.$list.scrollTop((that.$list.scrollTop() + top)-that.$list.height()/2); 
      that.$list.stop(true).animate({ 
       scrollTop: toScroll, 
       queue: false, 
       easing: 'linear' 
      }, 200); 

      if (type === 'selected') { 
       return false; 
      } 

      that.$select.val(that.$active.data('class')); 
      that.$select.trigger('change'); 

     }, 

     _setupArrowKeysHandler: function() { 
      var that = this; 

      that.$wrapper.on('keydown', function (e) { 
       switch (e.which) { 
        case that.keys.left: 
         that.moveLeft(); 
         break; 
        case that.keys.up: 
         that.moveUp(); 
         break; 
        case that.keys.right: 
         that.moveRight(); 
         break; 
        case that.keys.down: 
         that.moveDown(); 
         break; 
        case 16: 
         return true; 
        case 9: 
         return true; 
        break; 
        default: 
         that.$filter.focus(); 
         return true; 
       } 
       return false; 
      }); 
     }, 

     _setupFilter: function(){ 
      var that = this; 

      that.$filter.on('keydown keyup keypress paste cut change', function(e){ 
       that.filter(that.$filter.val()); 
      }); 
     }, 

     _setupClickHandler: function() { 
      var that = this; 
      that.$list.on('click', 'a', function() { 
       that.$wrapper.focus(); 
       that.$active.removeClass('active'); 
       that.$active = $(this); 
       that.focus('first'); 
      }); 
     }, 

     moveUp: function() { 
      var that = this; 
      return that.moveLeft(); 
     }, 

     moveDown: function() { 
      var that = this; 
      return that.moveRight(); 
     }, 

     moveLeft: function() { 
      var that = this; 
      that.$active.removeClass('active'); 
      that.$active = that.$active.prevAll(':visible:first'); 
      that.focus('last'); 
      return false; 
     }, 

     moveRight: function() { 
      var that = this; 
      that.$active.removeClass('active'); 
      that.$active = that.$active.nextAll(':visible:first'); 
      that.focus('first'); 
      return false; 
     }, 

     filter: function(word){ 
      var that = this; 
      var regexp = new RegExp(word.toLowerCase()); 
      var found = false; 
      $.each(that.icons, function(i, $v){ 
       found = regexp.test(i); 
       if(found && !$v.is(':visible')){ 
        $v.show(); 
       } else if(!found && $v.is(':visible')){ 
        $v.hide(); 
       } 
      }); 
     } 

    }); 
})(jQuery); 

Answer 1

은 아마 뭔가 : 기본적으로 http://jsfiddle.net/QFzCY/

var blocksPerRow = 4; 

$("body").on("keydown", function(e){ 
    var thisIndex = $(".selected").index(); 
    var newIndex = null; 
    if(e.keyCode === 38) { 
     // up 
     newIndex = thisIndex - blocksPerRow; 
    } 
    else if(e.keyCode === 40) { 
     // down 
     newIndex = thisIndex + blocksPerRow;  
    } 
    if(newIndex !== null) { 
     $(".test").eq(newIndex).addClass("selected").siblings().removeClass("selected"); 
    }  
}); 

, 거기 행에 다음 현재 인덱스를 찾아 빼기 나에 그 금액을 추가 얼마나 많은 항목 설정 새 색인을 통해 다음 요소를 선택하십시오.

당신이 얼마나 많은 블록 행당 알고 싶다면, 당신이 할 수 있습니다 : 당신의 '엣지'의 경우에 대처하기 위해

var offset = null; 
var blocksPerRow = 0; 
$(".test").each(function(){ 
    if(offset === null) { 
     offset = $(this).offset().top; 
    } 
    else if($(this).offset().top !== offset) { 
     return false; 
    } 
    blocksPerRow++; 
}); 

을, 당신은 할 수 :

if(newIndex >= $(".test").length) { 
    newIndex = $(".test").length - newIndex; 
} 

Answer 2

moveUp: function() { 
     var that = this; 
     var index = $(this).index(); 
     var containerWidth = parseInt($('.select-icon-list').innerWidth(), 10); 
     var iconWidth = parseInt($('.select-icon-list > a').width(), 10); 
     var noOfCols = Math.floor(containerWidth/iconWidth); 
     var newIndex = ((index - noOfCols) < 0) ? index : (index - noOfCols); 
     var elem = $('.select-icon-list > a')[index]; 
    }, 

정적 인 캐시를 캐시합니다.