Haut/Bas/Gauche/Droite du clavier de navigation avec jQuery?

J'ai une liste de div est tout un ensemble et de l'égalité hauteur/largeur qui sont float:left donc, ils sont assis les uns à côté des autres et plier sous si ce parent est plus petit que le combiné avec des éléments.

Assez standard.
C'est pour créer une liste de twitter bootstrap icônes, ça donne quelque chose comme ceci:
Haut/Bas/Gauche/Droite du clavier de navigation avec jQuery?

J'ai ajouté de la prochaine/précédente, la navigation au clavier à l'aide du code ci-dessous, cependant, vous remarquerez que les touches fléchées haut/bas sont mappés à l'appel de la gauche/droite fonctions. Ce que je n'ai aucune idée de comment faire c'est de le faire de la de navigation haut/bas?

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);
  • vous pourriez appeler la gauche/droit de la fonction aussi souvent que le nombre d'éléments dans chaque ligne serait la plus facile, sans même jeter un coup d'oeil à ton code 😉 je vais le faire maintenant...
  • Solution Possible oui, mais comment comptez-vous combien d'articles sont dans la ligne? Je suppose que je pourrais faire $wrapper.width() mod $element.width() mais l'ensemble de la démarche semble plutôt hacky pour moi. J'ai été regarder dans zehnet.de/2010/11/19/... mais je ne peux pas travailler sur la façon de faire le point par rapport à l'emballage...
  • quel est le problème avec l'aide de seulement le code fourni dans le lien. si vous venez de coller le code et de l'ajout de votre propre, il devrait fonctionner: vous pouvez obtenir de l'élément ci-dessus via $.elementFromPoint($(that.$active).offset().left, $(that.$active).offset().top-10); . Pour ci-dessous l'un de vous aurait à ajouter 10 + la hauteur d'un élément de lui-même, mais c'est corrigé. Je ne sais pas comment faire pour modifier l'attribut dans votre code, donc je n'ai pas de fournir une réponse, juste un commentaire.
InformationsquelleAutor Hailwood | 2013-07-01