Estoy tratando de agregar teclado de navegación de Menú(ul li basado
) , he enlazado el evento keydown de menú (o debería enlazar keydown para el documento ?)

la función de controlador utilizado es la siguiente

 KeyDown: function(e) {        

    var toFocus = false;


                  if (e.keyCode == 38) {
         toFocus = $((e.target/* li */).next()[0]);
      }
                          if (e.keyCode == 40) {
         toFocus = $((e.target).next()[1]);
      }
    if (toFocus) {
        $(e.target).attr('tabIndex', '-1');
        $(toFocus).attr('tabIndex', '0');
        toFocus.focus();
        return false;
        }
        }

aquí puedo obtener e.destino como html en lugar de li ?

u puede sugerir cualquier otra forma de agregar teclado de navegación ?

InformationsquelleAutor ravikiran | 2009-09-11

3 Comentarios

  1. 1

    Intente utilizar el atributo personalizado para sostener el tabid para arriba y para abajo.

    ...KeyDown: function(e) {
        var Direction;
        if (e.keyCode == 38)
             Direction = "toUp";
        else Direction = "toDown";
    
        var Focus = $("li[tabid=\""$(e.target.id).attr(Direction)"\"]");
        Focus.focus();
    }
    
    ---
    
    <li ... tabid="1" toUp="-1" toDown= "2" />
    <li ... tabid="2" toUp= "1" toDown= "3" />
    <li ... tabid="3" toUp= "2" toDown= "4" />
    <li ... tabid="4" toUp= "3" toDown="-1" />

    El código de arriba es sólo para mostrar la idea, es tarde y no tengo tiempo para probarlo. Así que por favor no votar por mí hacia abajo para no trabajar.

    Espero que ayude

  2. 1

    Me pregunto si, en lugar de hacerlo por su cuenta propia, ¿por qué no utilizar una ya existente plugin?

    jQuery Navegación del Teclado

    demo página aquí

    mi demo: para añadir un página de demostración de un ejemplo

    • Yo el plugin es complejo , todo lo que necesita es establecer el foco en mi menú , y obtener el correo.objetivo de devolver el elemento de menú actual
    • estás bromeando ¿cierto? complejo? mate… por favor, mira mi propio ejemplo y dime lo complejo que es todo esto! 🙂
    • Gracias por la demo , por cierto me dint significa que el uso del plugin fue complejo , ción el plugin cálculos complejos sobre x y posiciones n alimenticios , el código que he mencionado anteriormente estaba trabajando solo problema con él, se volvió html como evento.de destino , sólo tengo que encontrar la corriente de li que tiene el foco
    • todas las líneas de código en un limpiador manera y es mucho mejor para las futuras actualizaciones que buscar en el código 😉 – con una línea de código que hacer todo en la navegación (el inicio de la línea) el resto es sólo animaciones para mostrar algo de buen efecto.
    • la línea de fondo es, ¿por qué tratar de re-inventar la rueda? La Reutilización de código es lo que todos deberíamos hacer, en primer lugar, como a los desarrolladores.
  3. 0

    HTML

    <body>
        <input type="text" id="target-box" >
        <ul class="list">
            <li class="selected">Hello</li>
            <li>World</li>
        </ul>
    </body>

    jQuery

    $(document).on('focus','#target-box', function() {
        var target_box = $(this);
    
        $(document).on('keyup', function(e) {
    
            if(e.which == 38){ //up arrow
                var selected_item = $('.selected');
                if(typeof selected_item.prev()[0] !== 'undefined') {
                    selected_item.prev().addClass('selected');
                    selected_item.removeClass('selected');
                }
            } else if (e.which == 40) { //down arrow
                var selected_item = $('.selected');
                if (typeof selected_item.next()[0] !== 'undefined') {
                    selected_item.next().addClass('selected');
                    selected_item.removeClass('selected');
                }
            }
    
            if (e.keyCode == 13) { //enter
                target_box.val($('.selected').html());
            }
        });
    });

    CSS

    .selected {
        width : 50px;
        background-color: gray;
    }

Dejar respuesta

Please enter your comment!
Please enter your name here