Oficjalne forum pomocy serwisu PUN.pl

QxV

Użytkownik

Dołączył: 2013-02-21

Liczba postów: 10

[jQuery] Przełączanie między kategoriami

Witam.

Wpadłem na pomysł napisania prostej modyfikacji, która ukrywa wszystkie kategorie prócz pierwszej i daje możliwość przełączania pomiędzy takowymi. Na początek przedstawię Demo. Jak widać wygląda to całkiem nieźle i co najważniejsze działa. Skrypt jest jednak przystosowany do czterech kategorii, a o tym jak go zmodyfikować, za chwilę.

Na początek zamieszczamy na forum bibliotekę jQuery i do stopki/ogłoszenia wstawiamy ten kod:

<script>
jQuery(function(){

jQuery("#idx1").before("<h2 style='width: 360px'>Kategorie</h2><div class='box' style='width: 370px; margin-bottom: 10px'><div class='inbox'><div class='zmiana' name='1' style='display: inline; font-weight: bold; cursor: pointer;'>Nazwa kategorii pierwszej</div> | <div class='zmiana' name='2' style='display: inline; font-weight: bold; cursor: pointer;'>Nazwa kategorii drugiej</div> | <div class='zmiana' name='3' style='display: inline; font-weight: bold; cursor: pointer;'>Nazwa kategorii trzeciej</div> | <div class='zmiana' name='4' style='display: inline; font-weight: bold; cursor: pointer;'>Nazwa kategorii czwartej</div></div></div>");

jQuery(".zmiana").click(function(){

var numerek = jQuery(this).attr("name");

jQuery("#idx1").css('display', 'none');
jQuery("#idx2").css('display', 'none');
jQuery("#idx3").css('display', 'none');
jQuery("#idx4").css('display', 'none');

jQuery("#idx" + numerek).fadeIn();

});

})
</script>

A do Modyfikacji CSS ten:

#idx2, #idx3, #idx4 {display: none;}

I gotowe, nic więcej nie trzeba robić. Rzecz jasna można zmodyfikować skrypt zamieniając nazwy kategorii na obrazki. Ale co zrobić jeżeli na forum jest więcej/mniej niż cztery kategorie? W takim wypadku do kodu jQuery - jeżeli mamy więcej niż cztery - a dokładniej w tym miejscu:

jQuery("#idx1").css('display', 'none');
jQuery("#idx2").css('display', 'none');
jQuery("#idx3").css('display', 'none');
jQuery("#idx4").css('display', 'none');

Dodajemy linijkę:

jQuery("#idxZ").css('display', 'none');

Gdzie Z wstawiamy kolejny numer kategorii, w tym wypadku będzie to 5

Następnie tutaj:

jQuery("#idx1").before("<h2 style='width: 360px'>Kategorie</h2><div class='box' style='width: 370px; margin-bottom: 10px'><div class='inbox'><div class='zmiana' name='1' style='display: inline; font-weight: bold; cursor: pointer;'>Nazwa kategorii pierwszej</div> | <div class='zmiana' name='2' style='display: inline; font-weight: bold; cursor: pointer;'>Nazwa kategorii drugiej</div> | <div class='zmiana' name='3' style='display: inline; font-weight: bold; cursor: pointer;'>Nazwa kategorii trzeciej</div> | <div class='zmiana' name='4' style='display: inline; font-weight: bold; cursor: pointer;'>Nazwa kategorii czwartej</div></div></div>");

po:

Nazwa kategorii czwartej</div>

Dodajemy:

<div class='zmiana' name='Z' style='display: inline; font-weight: bold; cursor: pointer;'>Nazwa kategorii piątej</div>

Gdzie Z znów podajemy kolejny numer kategorii. I na koniec do kodu css dodajemy:

#idxZ {display: none}

W miejscu Z wstawiamy - jak już zapewne wiecie - kolejny numer kategorii.

A co zrobić, jeżeli naszych kategorii jest mniej?

Tutaj:

jQuery("#idx1").css('display', 'none');
jQuery("#idx2").css('display', 'none');
jQuery("#idx3").css('display', 'none');
jQuery("#idx4").css('display', 'none');

Kasujemy ostatnią, bądź dwie/trzy ostatnie linijki (w zależności od tego, ile mamy działów).

Następnie przechodzimy do tego momentu:

jQuery("#idx1").before("<h2 style='width: 360px'>Kategorie</h2><div class='box' style='width: 370px; margin-bottom: 10px'><div class='inbox'><div class='zmiana' name='1' style='display: inline; font-weight: bold; cursor: pointer;'>Nazwa kategorii pierwszej</div> | <div class='zmiana' name='2' style='display: inline; font-weight: bold; cursor: pointer;'>Nazwa kategorii drugiej</div> | <div class='zmiana' name='3' style='display: inline; font-weight: bold; cursor: pointer;'>Nazwa kategorii trzeciej</div> | <div class='zmiana' name='4' style='display: inline; font-weight: bold; cursor: pointer;'>Nazwa kategorii czwartej</div></div></div>");

I kasujemy tyle takich linijek:

<div class='zmiana' name='4' style='display: inline; font-weight: bold; cursor: pointer;'>Nazwa kategorii czwartej</div>

Żeby ich liczba w kodzie była równa liczbie działów.

Ostatnią rzeczą, jaką musimy zrobić, jest skasowanie z kodu css, linijki wyłączającej widoczność danej kategorii.

Gotowe

Ostatnio edytowany przez QxV (2013-02-22 21:41:21)