Sktóry klawiaturowe w aplikacji internetowej

Skróty klawiaturowe są często przez nas wykorzystywane. Chyba każdy z programistów wie jak to przyspiesza pracę i zwiększa produktywność. Dlaczego więc nie dać użytkownikom możliwości korzystania ze skrótów w aplikacjach internetowych.

Jak sam zauważyłem dość rzadko zdarza się, w jakimś systemie internetowym można było korzystać tylko i wyłącznie z klawiatury, albo te możliwości nie są wystarczająco wyeksponowane. W projekcie, który obecnie realizuje jednym z założeń było właśnie to, żeby całą aplikację można było obsłużyć tylko i wyłącznie klawiaturą. Z pomocą przyszły nam dwie biblioteki: shortcut.js oraz keynavigator.js

Pierwsza z podanych bibliotek odpowiada za to aby aplikacja wykryła wciśniętą przez nas kombinację klawiszy, a następnie zrealizowała to czego oczekujemy. Może to być przeniesienie do innej podstrony, kliknięcie w jakiś element czy ustawienie focusa – co tylko dusza zapragnie. A i samo wykorzystanie jest banalnie proste:

shortcut.add("Alt+N", function() {
//code
});

Pełna lista obsługiwanych klawiszy jest dostępna pod pierwszym z podanych linków.

Na tym jednak nie zakończyła się przygoda z obsługą systemu tylko klawiaturą. Kolejną rzeczą, którą postanowiliśmy zrealizować jest nawigacja strzałkami po tabelach. Najlepszym naszym zdaniem rozwiązaniem było dodanie do każdego wierszu rowlinka. Dzięki temu między wierszami można przemieszczać się strzałkami w górę i w dół, a enterem zatwierdzać „kliknięcie” w wiersz tabeli. I w tym momencie wykorzystaliśmy keynavigator.js, którego wykorzystanie jest równie proste:

$(document).ready(function () {
    $('table#table > tbody tr.rowlink').keynavigator({
        activeClass: 'active',
        keys: {
            enter: function ($el) {
                var link = $el.closest('tr').find('td a').attr('href');
                window.location = link;
            }
        }
    });
});

Generalnie chodzi o to, że skrypt szuka po kolei wierszy, które mają nadaną klasę ‚rowlink’, a następnie nadają temu wierszowi klasę ‚active’, co pozwala np. zmienić kolor tła. Dalej po wciśnięciu entera wyszukiwany jest odpowiedni link i przeniesienie do pożądanego widoku.

Tyle na dziś. Jak Wam się takie podejście podoba? Korzystacie z jakiś innych metod?

Czekam na komentarze i do zobaczenia!

Reklamy

One comment

  1. Pingback: dotnetomaniak.pl

Skomentuj

Wprowadź swoje dane lub kliknij jedną z tych ikon, aby się zalogować:

Logo WordPress.com

Komentujesz korzystając z konta WordPress.com. Wyloguj / Zmień )

Zdjęcie z Twittera

Komentujesz korzystając z konta Twitter. Wyloguj / Zmień )

Facebook photo

Komentujesz korzystając z konta Facebook. Wyloguj / Zmień )

Google+ photo

Komentujesz korzystając z konta Google+. Wyloguj / Zmień )

Connecting to %s