Proste zakładki w jQuery
by frycu on Nov.29, 2008, under jQuery
Piękno jQuery polega na tym, że możemy tworzyć kompleksowe rzeczy przy użyciu minimum kodu. Nie musimy być ekspertem JavaScript, aby tworzyć skomplikowane widgety. Poniżej przedstawiam jak w prosty sposób stworzyć stronę z dynamicznie rozwijanymi zakładkami, bez potrzeby jej przeładowywania. Można w dowolny sposób stylizować ten widget (ja tylko podaje przykład jak może on wyglądać).
Podgląd tutaj!
Dodaj jQuery do header-a (linkuje do pliku z jQuery.com)
<script type=”text/javascript” src=”http://code.jquery.com/jquery.js”></script>
Teraz stwórz reguły CSS dla zakładek, ich tytułów, zawartości i wszelkich elementów które chcemy wystylizować. (dodaj je do pliku .html lub do swojego arkusza stylów .css)
<style type=”text/css”>
/* Główny kontener */
.accordion {
width:500px;
}
/* zawartość zakładek, oraz style dla div-a */
.accContent {
display: none;
border: 1px solid #CCCCCC;
padding: 10px;
text-align: justify;
}
/* Tytuły zakładek (jeśli na nie klikniejsz pokazują swoją zawartość, a inne zakładki się chowają) */
.acctitle {
display: block;
width: 100%;
padding: 3px 3px 3px 10px;
background-color: #000;
color: #FFFFFF;
cursor: pointer;
border-bottom: 1px solid white;
font-family: Helvetica, Arial, sans-serif;
}
/* Podstawowy styl zakładki (przeważnie jest to pierwsza widoczna) */
.defaultAccordion {
display: block;
}
</style>
Następnie definiujemy elementy HTML-a, tam gdzie chcemy żeby wyświetlały się zakładki
<div class=”accordion”>
<a class=”acctitle” ref=”first_section”>Pierwsza zakładka</a>
<div class=”accContent defaultAccordion” id=”first_section”>
<p>Przykłądowy text 1.</p>
</div>
<a class=”acctitle” ref=”second_section”>Druga zakładka (ukryta)</a>
<div class=”accContent” id=”second_section”>
<p>Przykłądowy text 2.</p>
</div>
<a class=”acctitle” ref=”third_section”>Trzecia zakładka (ukryta)</a>
<div class=”accContent” id=”third_section”>
<p>Przykłądowy text 3.</p>
</div>
</div>
Musisz pamiętać, że ref każdego anchor-a musi pasować do id contentu, w przeciwnym wypadku skrypt nie będzie działał.
Na koniec dodaj następujący kod między znaczniku <head> na swojej stronie.
<script type=”text/javascript”>
$(function(){
// zapętla każdy link
$(“a.acctitle”).each(function(){
// dodaje event przy kliknięciu
$(this).click(function(){
// chowa wszystkie div-y z klasą accContent
$(“.accContent”).each(function(){
$(this).hide(“slow”);
});
// główny punkt skryptu – Pobiera atrybut ref z
// linkowanego tytułu i wyświetla ukrytego div-a z tym id
$(“#”+$(this).attr(“ref”)).show(“slow”);
return;
});
});
});
</script>
February 14th, 2009 on 7:35 pm
Dzięki, pozdrawiam :)
October 13th, 2009 on 7:46 pm
Extra efekt ! Wielkie dzięki ;DD
February 3rd, 2010 on 2:25 pm
Można utworzyć zakładki w pionowej hierarchii?
March 5th, 2010 on 1:51 pm
Oczywiście, wystarczy drobna zmiana w CSS-ie