Oben/Unten/Links/Rechts Tastatur-navigation mit jQuery?

Habe ich eine Liste von div ' s alle mit einem Satz und gleiche Höhe/Breite, die float:left so sitzen Sie nebeneinander, und Falten Sie unter, wenn dieser Elternteil ist kleiner als die Summe der Einzelteile.

Ziemlich standard.
Dies ist zum erstellen einer Liste der twitter bootstrap-icons, gibt es so etwas wie dieses:
Oben/Unten/Links/Rechts Tastatur-navigation mit jQuery?

Habe ich Hinzugefügt, next/previous navigation über die Tastatur mit dem code unten, wird man jedoch feststellen, dass die up/down-Pfeil-Tasten zugeordnet sind, rufen Sie die Links - /rechts-Funktionen. Was ich habe keine Ahnung, wie zu tun ist, um tatsächlich die up/down-navigation?

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);

man könnte die Links - /rechts-Funktion so oft, wie viele Gegenstände sind in jeder Reihe - wäre das einfachste, ohne auch einen Blick in deinen code 😉 ich werde das jetzt tun...
Mögliche Lösung ja, aber wie wollen Sie zählen, wie viele Elemente werden in der Zeile? Ich denke, ich könnte tun $wrapper.width() mod $element.width() aber der ganze Ansatz scheint eher hacky mir. Ich habe auf der Suche in zehnet.de/2010/11/19/..., aber ich kann nicht herausfinden, wie um den Punkt relativ zum wrapper...
was ist falsch mit der Verwendung nur der code, den Sie in den link. wenn Sie fügen Sie einfach den code und fügte hinzu, Ihre eigenen, sollte es funktionieren: Sie können das element über über $.elementFromPoint($(that.$active).offset().left, $(that.$active).offset().top-10); . Für die unten würden Sie hinzufügen, 10 + der Höhe von einem Element selbst, aber das ist behoben. Ich weiß nicht, wie man ändern Sie das active-Attribut im code, daher ich nicht beantworten, einfach einen Kommentar.

InformationsquelleAutor Hailwood | 2013-07-01

2

Vielleicht so etwas wie dieses: 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");   
    }    
 });
```
Grundsätzlich Sie festlegen, wie viele Elemente gibt es in einer Zeile und dann den aktuellen index und subtrahieren oder hinzufügen, die Menge zu wählen Sie das nächste element über den index.

Wenn Sie brauchen, um zu wissen, wie viele Blöcke pro Zeile vorhanden sind, Sie könnten dies tun:
```
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++;
});
```
Umgang mit Ihren "Rand" Fälle, die man tun könnte:
```
if(newIndex >= $(".test").length) {
    newIndex = $(".test").length - newIndex;
}
```
Dies scheint gut zu sein, Aber wie würden Sie umgehen mit dem "buchstäblich" Sonderfälle, aka, wenn der Benutzer auf die untere Zeile, und drückt, wir möchten, wählen Sie die Option relativ Element auf der obersten Zeile, und dasselbe gilt für nach oben?
Aktualisierte Antwort mit 'edge' Fall.
Eine weitere edge-Fall, wie Sie sehen können von der demo, haben wir auch ein filter-Feld, so dass, wenn der Benutzer gefiltert wurde, die Elemente, dann müssen wir irgendwie ausschließen, die...
Um nur die Anzahl der gefilterten Elemente, die Sie tun können, Ihre blocksPerRow zählen und andere arbeiten nur an diejenigen, die sichtbar sind, z.B. $(".select-icon-list").children(":visible").
also, ich könnte tun $icons = $(".select-icon-list").children(":visible") und dann statt mit .eq(newIndex) verwenden $icons[newIndex] aber wie würde ich ziehen Sie die derzeit aktiven Elemente, die index aus dem array? brauche ich eine Schleife über das array und vergleichen Sie jeden Wert, den Sie im es mit das ausgewählte Element?

InformationsquelleAutor mibbler

    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];
    },

Cache, was statisch bleibt.

Dies scheint gut zu sein, Aber wie würden Sie umgehen mit dem "buchstäblich" Sonderfälle, aka, wenn der Benutzer auf die untere Zeile, und drückt, wir möchten, wählen Sie die Option relativ Element auf der obersten Zeile, und dasselbe gilt für nach oben?
ich bin nur die Verhinderung solcher Grenzfälle Witz ( (index - noOfCols) < 0 ) ? index : (index - noOfCols) und bleiben auf der gleichen Position.

InformationsquelleAutor sabithpocker

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.