3 funkcje jQuery, które wykorzystuje w każdym projekcie
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
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]