3 funkcje jQuery, które wykorzystuje w każdym projekcie

jquery-3-funkcje.png

JQuery stało się już dla mnie naturalnym elementem każdego serwisu. Nie pamiętam projektu w którym nie wykorzystywałbym tej genialnej biblioteki JavaScript. Poniżej chciałem pokazać kilka funkcji i elementów biblioteki, które znajdują się w każdym moim projekcie i jednocześnie zachęcam do dzielenia się swoimi kawałkami kodu, które najczęściej wspomagają wasz projekt.

Naprzemienne kolorowanie wierszy w tabelach

Zmienne kolory wierszy w tabeli znacząco wpływa na jej czytelność, a dzięki wykorzystaniu jQuery i CSS są one obecnie niezwykle łatwo osiągalne. Wystarczy w swoim projekcie zamieścić poniższą linijkę kodu:

$("tr:even").addClass("even");

Dodaje ona, do co drugiego wiersza tabeli, klase even. Wystarczy teraz w stylach CSS ustawić np:

table tr.even {background-color: #eee;}

i nasza tabela będzie prezentowała się znacznie lepiej i co najważniejsze o wiele łatwiejsza przy przeglądaniu ich wartości.

AJAX loader w jQuery

Często na stronach wykorzystujących AJAX, wyświetlany jest niewielka informacja o tym, iż dane są w tej chwili pobierane. Efekt ten można uzyskać pisząc zaledwie kilka linijek kodu jQuery:

$('<div id="loader">Loading...</div>').insertBefore('#container')
.ajaxStart(function() {
$(this).show();
})
.ajaxStop(function() {
$(this).hide();
});

Tworzy on wstępnie ukryty w CSS div o identyfikatorze loader, który następnie przy używaniu metod AJAX jest albo wyświetlany albo ukrywany.

Zaznaczanie aktywnych elementów formularza

Za pomocą kilku linijek jQuery możemy w prosty sposób poprawić czytelność i użyteczność formularzy, poprzez zaznaczenie aktualnie aktywnych elementów formularza jak pola input, textarea.

$('form input, form textarea').focus(function() {
$(this).addClass('focus');
}).blur(function() {
$(this).removeClass('focus');
});

Podobnie jak w przypadku tabel, wystarczy odpowiednio przygotować klasę focus np. poprzez zmianę koloru obramowania lub tła.

DyskusjaKomentarze: 2

  • Bigismall 10 styczeń 2011 22:18
    1 i 3 Efekt możesz wykonać w CSS, bez żadnego JavaScriptu :)
    • Krzysztof Bachula 11 styczeń 2011 09:22
      W sumie tak, jeżeli nie weźmiemy pod uwagę IE6 i IE7 i kilku starszych przeglądarek. O ile focus jeszcze jestem w stanie przeboleć bo służy bardziej do celów kosmetycznych, to :odd/:even lubię mieć nawet w starszych przeglądarkach, gdyż znaczenie zwiększają czytelność danych tabelarycznych. Zwłaszcza, że rozwiązanie to jedna linia kodu jQuery.

Dodaj komentarz Komentarze są moderowane, a przy linkach używane jest rel="nofollow". Prosimy o nie reklamowanie i nie spamowanie w komentarzach.
Linki tworzone za pomocą tagu [url] np: [url=www.xyz.pl]xyz[/url]
Źródła za pomoc tagu [code] z wskazaniem języka np. [code=php] echo [/code]

Copyright © 2021 Webnote

Projekt i wykonanie: Tworzenie stron internetowych

Dodaj link