Korzystanie ze strzałek-klawiszy do nawigacji

Question

Korzystanie ze strzałek-klawiszy do nawigacji

Zastanawiam się, czy była możliwość poruszania się za pomocą klawiszy strzałek przez tabelę utworzoną za pomocą JS (za pomocą jQuery)? Chodzi mi o skakanie z celi do celi...Skrypt jest dla Greasemonkey.

Alert jednak działa. Nie mam pojęcia, jak to zrobić.

$(document).keydown(function(e){
    if (e.keyCode == 37) { 
       alert( "left pressed " );
       return false;
    }
    if (e.keyCode == 38) { 
       alert( "up pressed " );
       return false;
    }
    if (e.keyCode == 39) { 
       alert( "right pressed " );
       return false;
    }
    if (e.keyCode == 40) { 
       alert( "down pressed " );
       return false;
    }
});
;

Każda podpowiedź lub cokolwiek jest doceniane. Z góry dzięki, Faili

Update

Wygląda na to, że źle się tłumaczyłem. Daj mi jeszcze jedną. spróbuj: Demo Ten może dać ci wyobrażenie o tym, czego chciałem. Po wybraniu jednego pola wejściowego możliwa jest nawigacja za pomocą klawiszy strzałek. Mój problem polega na tym, że po prostu nie mogę tego zrealizować poprzez GM i jQuery. Jakiś pomysł?

Jeszcze raz dziękuję za twój czas i wysiłek.

W końcu to było jak:


function myTest_analysis1(e,leftkey,up,right,down){
    myTest(e,'','','field_analysis2','field_communication1')

Function myTest(e,leftkey,up,right,down)
{
  if (!e) e=window.event;
  var selectArrowKey;
  switch(e.keyCode)
  {
  case 37:
    // Key left.
    selectArrowKey = leftkey;
    break;
  case 38:
    // Key up.
    selectArrowKey = up;
    break;
  case 39:
    // Key right.
    selectArrowKey = right;
    break;
  case 40:
    // Key down.
    selectArrowKey = down;
    break;
  }
  if (!selectArrowKey) return;

  var controls = window.document.getElementById(selectArrowKey);
  if (!controls) return;
  controls.focus();
}
}
 $('#field_analysis1').keydown (myTest_analysis1);

Tak mi wyszło. Założę się, że jest mądrzejsze rozwiązanie, ale nie mogłem tego teraz rozgryźć.

Dziękuję bardzo za twój czas i wysiłek.

16

javascript jquery greasemonkey

Author: Faili, 2010-07-14

Source

3 answers

Oto wersja, która pozwala na następujące

ograniczenia na początku i końcu tabeli (pierwsza i ostatnia komórka tabeli)
owija się na końcu każdego wiersza i przechodzi do następnego
przewija bieżącą komórkę do widoku, jeśli wymagane jest przewijanie
obsługuje kliknięcie myszą, aby wybrać komórkę

Demo na : http://jsfiddle.net/BdVB9/

Ze strukturą html podobną do

<table id="navigate">
    <tbody>
        <tr>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
        </tr>
        <tr>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
        </tr>
    </tbody>
</table>

Oraz javascript

var active = 0;

$(document).keydown(function(e){
    reCalculate(e);
    rePosition();
    return false;
});

$('td').click(function(){
   active = $(this).closest('table').find('td').index(this);
   rePosition();
});


function reCalculate(e){
    var rows = $('#navigate tr').length;
    var columns = $('#navigate tr:eq(0) td').length;
    //alert(columns + 'x' + rows);

    if (e.keyCode == 37) { //move left or wrap
        active = (active>0)?active-1:active;
    }
    if (e.keyCode == 38) { // move up
        active = (active-columns>=0)?active-columns:active;
    }
    if (e.keyCode == 39) { // move right or wrap
       active = (active<(columns*rows)-1)?active+1:active;
    }
    if (e.keyCode == 40) { // move down
        active = (active+columns<=(rows*columns)-1)?active+columns:active;
    }
}

function rePosition(){
    $('.active').removeClass('active');
    $('#navigate tr td').eq(active).addClass('active');
    scrollInView();
}

function scrollInView(){
    var target = $('#navigate tr td:eq('+active+')');
    if (target.length)
    {
        var top = target.offset().top;

        $('html,body').stop().animate({scrollTop: top-100}, 400);
        return false;
    }
}

21

Author: Gabriele Petrioli,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-05-16 18:35:26

Oto moja wersja...

Demo

var active;
$(document).keydown(function(e){
    active = $('td.active').removeClass('active');
    var x = active.index();
    var y = active.closest('tr').index();
    if (e.keyCode == 37) { 
       x--;
    }
    if (e.keyCode == 38) {
        y--;
    }
    if (e.keyCode == 39) { 
        x++
    }
    if (e.keyCode == 40) {
        y++
    }
    active = $('tr').eq(y).find('td').eq(x).addClass('active');
});

10

Author: Reigel,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2010-07-14 11:09:11

score 11 · Accepted Answer

Powinieneś być w stanie skupić różne komórki, podam przykład używając .focus ()

Oto przykład.

Proszę o tym pamiętać...

A) w tym przykładzie nic nie powstrzyma cię przed przekroczeniem granic, musisz ograniczyć wartości currentRow i currentCell do liczby komórek i zapobiec ich przekroczeniu poniżej 0.

B) w tej chwili nie ma kodu do usunięcia Zielonego tekstu, którego użyłem do pokazania aktualna ostrość. Oznacza to, że pozostawiony jest zielony szlak.

Można by rozwiązać oba powyższe zagadnienia dość łatwo, ale spowodowałoby to, że przykład byłby bardziej skomplikowany...

    var currentRow = 0;
    var currentCell = 0;

    function ChangeCurrentCell() {
        var tableRow = document.getElementsByTagName("tr")[currentRow];
        var tableCell = tableRow.childNodes[currentCell];
        tableCell.focus();
        tableCell.style.color = "Green";
    }
    ChangeCurrentCell();

    $(document).keydown(function(e){
        if (e.keyCode == 37) { 
           currentCell--;
           ChangeCurrentCell();
           return false;
        }
        if (e.keyCode == 38) { 
           currentRow--;
           ChangeCurrentCell();
           return false;
        }
        if (e.keyCode == 39) { 
           currentCell++;
           ChangeCurrentCell();
           return false;
        }
        if (e.keyCode == 40) { 
           currentRow++;
           ChangeCurrentCell();
           return false;
        }
    });