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:
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?
(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
Vous devez vous connecter pour publier un commentaire.
Peut-être quelque chose comme ceci: http://jsfiddle.net/QFzCY/
Fondamentalement, vous définissez le nombre d'éléments dans une rangée, puis trouver l'indice actuel et de soustraire ou d'ajouter ce montant pour sélectionner l'élément suivant via le nouvel indice.
Si vous avez besoin de savoir combien de blocs par ligne, il y a, vous pourriez faire ceci:
Pour faire face à votre "bord" des cas, vous pourriez faire:
blocksPerRow
compter et les autres de ne travailler que sur ceux qui sont visibles, par exemple$(".select-icon-list").children(":visible")
.$icons = $(".select-icon-list").children(":visible")
et puis au lieu d'utiliser.eq(newIndex)
utilisation$icons[newIndex]
mais comment pourrais-je tirer sur des éléments actifs de l'indice de ce tableau? ai-je besoin d'une boucle sur le tableau et comparer chaque valeur dans l'élément sélectionné?$icons = $(".select-icon-list");
. Ensuite, vous utilisez$icons.eq(newIndex)
. Pour travailler uniquement avec les éléments actifs, vous ne$icons.filter(":visible")
, par exemple$icons.filter(":visible").eq(newIndex)
.$('a.selected.active').index()
Cache ce que jamais reste statique.
( (index - noOfCols) < 0 ) ? index : (index - noOfCols)
et de rester sur le même point.