Biblioteka jQuery ostatnimi laty stała się bardzo popularnym narzędziem. To, co dawniej można było osiągnąć w javascripcie przy pomocy kilkunastu czy kilkudziesięciu linijek kodu, obecnie po podpięciu jquery.js można zrobić przy pomocy kilku linii. Poniżej znajdziecie snippety, z których często korzystam.
1. Pierwszy i ostatni element z własną klasą
Kiedy chcesz dodać np. separator do menu na początku albo końcu nawigacji lub np. zwiększyć ostatni element menu:
[code type=”javascript”]
$(document).ready(function() {
$(’.menu ul li’).last().addClass(’last’);
$(’.menu ul li’).first().addClass(’first’);
});
[/code]
Jak działa?
Linia nr 2 odpowiada za wyszukiwanie ostatniego elementu .menu ul li, po czym nadaje mu klasę „last”.
Analogicznie w l linii wyszukiwany jest pierwszy element .menu ul li, po czym nadawana mu jest klasa „first”.
2. Podmiana tekstu na inny
[code type=”javascript”]
$(document).ready(function() {
$(".widget-event-month, .event-month").each(function () {
if (jQuery(this).children().length == 0) {
$(this).text(jQuery(this).text().replace(’Jan’,’Sty’));
}
});
});
[/code]
Naturalnie lepiej jest zmienić tekst bezpośrednio w skrypcie, bo powyższe rozwiązanie jest półśrodkiem i działa na zasadzie podmieniania odnalezionego ciągu znaków. Czasami jednak nie ma takiej możliwości i trzeba sobie radzić inaczej. W pozostałych przypadkach, polecam (jeśli pracujecie na WordPressie)
Jak działa?
W 2 linii określamy elementy, które mają być przeszukane. W linii 4 wpisujemy do funkcji .replace jako pierwszą pozycję, która ma być zmieniona, a drugą, po przecinku, pozycję zmienianą. W powyższym przykładzie zmieniany jest skrót angielskiej nazwy miesiąca 'Jan’ na 'Sty’.
3. Element nawigacji na krawędzi ekranu wysuwany po najechaniu.
[code type=”javascript”]
$(’.main-menu li.nav1′).mouseenter(function(){
$(this).stop(true, false).animate({"left": "0"}, 'fast’);
});
$(’.main-menu li.nav1′).mouseleave(function(){
$(this).stop(true, false).animate({"left": "-70px"}, 'fast’);
});
[/code]
Ten kod jest żywcem wzięty z pliku js bloga, który teraz czytacie. Nawigacja witryny z lewej strony jest schowana (widać tylko ikony) ale po najechaniu pojawia się pełna nazwa.
Jak działa?
Pierwsza część skryptu odpowiada za animację – wysuwanie zakładki po najechaniu na li.nav1. Kiedy kursor myszy znajdzie się na elemencie <li> wtedy w CSS cecha left zmienia się z -70px na 0px. Druga część odpowiada za chowanie wtedy, kiedy kursor myszy znajdzie się poza elementem <li>.
4. Użycie elementu „rel” zamiast target
[code type=”javascript”]
$(’a[rel=external]’).attr(’target’,’_blank’);
[/code]
Każdy kto jest wielkim fanem walidacji strony w XHTML 1.0 Strict spotkał się niejednokrotnie z problemem niewalidujących się elementów target=”_blank” w linkach zewnętrznych. Ta prosta linijka kodu rozwiąże ten problem.
Jak działa?
Każdy element a, który posiada cechę rel=”external” będzie miał dołączaną linijkę target=”_blank” a problem błędów przy walidacji zniknie.
5. Dodanie kilku pustych linków do strony
[code type=”javascript”]
$("li.oferta a, li.dla-klienta a, li.promocje a, li.realizacje a, li.zarabiaj-w-sieci a, li.szablony a, li.artykuly a, li.kontakt a").attr({ href: "javascript:void(0);" });
[/code]
Czasami menu generuje się w CMS-ie automatycznie i nie ma co przerabiać pętli generującej poszczególne linki. Wygodniej jest w tym wypadku dopisać linijkę kodu odpowiadającą za umieszczenie do wybranych linków javascriptowego polecenia, które nic nie robi. Cóż, myślę że wiecie o tym że tak czasami trzeba :)
Jak działa?
Do każdego elementu a zawartego w <li> o podanych wyżej klasach dodawana jest magiczna formuła „javascript:void(0);”. Jest to zdecydowanie lepsze rozwiązanie aniżeli href=”#” ponieważ nie zostawia śladu w adresie URL.
6. Umieszczenie na stronie wyjeżdżającego „znikąd” obrazka
[code type=”javascript”]
$(’.ganesh’).animate({
opacity: 100,
top: "10px",
right: "-250px"
}, 2500 );
[/code]
Aby zobaczyć efekt zajrzyj na przygotowaną przeze mnie jakiś czas temu stronę http://dancingganesh.eu/. Jeśli widzisz fioletowego słonia który nagle wyjeżdża z prawej strony ekranu to znaczy że wszystko funkcjonuje jak należy.
Jak działa?
Wcześniej musiałem przygotować obrazek któremu nadałem w CSS atrybuty position: absolute i right: -9999px. Po ich dodaniu umieściłem kod javascript, który zmusza słonia do przyjechanie do prawego elementu witryny (-9999px z prawej zmniejsza się do -250px). Całość odbywa się w czasie 2500 milisekund czyli nie mniej, nie więcej jak w 2,5 sekundy. Wygląda ciekawie i dodaje stronie charakteru. Właścicielowi witryny się podobało.
7. Powrót na górę strony
[code type=”javascript”]
$("a[href=’#top’]").click(function() {
$("html, body").animate({ scrollTop: 0 }, "slow");
return false;
});
[/code]
Coraz modniejszym elementem jest odnośnik pozwalający wrócić na górę strony. Co z tego, że klawisz Home robi to samo. Korzystająca z myszki osoba wędrująca od strony do strony nie będzie przecież sięgała do skrótów klawiszowych. One są dla specjalistów. A tak na serio klienci sobie życzą więc czasami taki element trzeba umieścić, a jest on bardzo prosty.
Jak działa?
Kliknięcie na odnośnik <a href=”#top”>Tekst odnośnika albo jakiś obrazek</a> sprawia że wywoływana jest linijka z funkcją .animate. Jako szczegółowa cecha tej funkcji podane jest „scrollTop: 0” co znaczy mniej więcej tyle co: przejdź do zerowej pikseli od góry na stronie. Dodatkowy atrybut „slow” pozwala sądzić, że programista chce doprowadzić odwiedzającego stronę do pełni zachwytu, bowiem witryna będzie przewijać się wolniej i efekt animacji do góry będzie bardziej uwypuklony.
