
Tabbed Menu - Queness
Tab plugin
Verzió: | nincs adat |
Kiadás dátuma: | 2008/12/09 |
Fejlesztő: | Queness |
Liszensz: | Creative Commons Attribution 3 |
Bevezető
A navigáció egyik lehetséges megvalósítása az úgynevezett tab menü (vagy csúnyán, magyarul: füles menü). Praktikus, mivel értékes helyet takaríthatunk meg vele, s ha jól alkalmazzuk, növelhetjük vele honlapunk használhatóságát is.
Ez a plugin (hasonlóan a CSS Globe Tooltip-hez) nem egy teljes értékű plugin, a Queness egyik tutorial-ja. Ebből egyenesen következik, hogy már most, mielőtt belevágnánk az egészbe, kilátásba helyezhetünk némi js buherálást is (opcionális, lehet valakinek a "gyári" állapot is megteszi). A CSS buherát már nem is említem - mivel nem támogatja a ThemeRoller-t (ahogy sajnos a plugin-ok nagy része), így ez magától értetődő.
Jellemzők
- animált váltás a fülek közt (slideDown és slideUp effektek)
- nincs history bejegyzés (a böngésző vissza gombja inaktív a fülek közti váltásra)
- animált linkek
Implementálás
Az eredeti, a Queness honlapjáról letölthető verzió annyira kezdetleges és puritán, hogy ott a CSS illetve a js kód is a HTML oldalba van beágyazva. Ezt igyekeztem normális formára hozni és külön file-ba tettem őket, így a jQuery-plugins.hu-ról letölthető forráskód kicsit átláthatóbb.
Az alábbiakban ennek megfelelően ismertetem az implementálás menetét:
CSS
<link type="text/css" rel="stylesheet" href="style.css" media="screen" />
JavaScript
<script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/jquery.tabbed.menu-queness.js"></script>
Használat
A plugin használatához nincs szükség deklarációra, csupán a plugin által használt CSS osztályok és azonosítók használatára kell odafigyelni. Természetesen, ha valaki ezeket módosítani szeretné, akkor a CSS és a js kód is könnyedén átlátható (utóbbi agyon van kommentelve).
A menü egy .box div blokkba van becsomagolva. Ezen belül az első elem a füleket megvalósító lista, #tabMenu azonosítóval. Ezt követi a .boxTop és a .boxBottom blokkok által közre zárt tartalmi rész, a .boxBody. Ebbe kell egyenként, külön, mindenféle azonosító vagy osztály nélküli div-ekbe beledobálni az egyes fülekhez tartozó tartalmakat.
A jobb átláthatóság kedvéért a HTML kód struktúrája:
<div class="box"> <ul id="tabMenu"> <li class="selected">Fül 1</li> <li>Fül 2</li> <li>...</li> </ul> <div class="boxTop"></div> <div class="boxBody"> <div class="show">Első fül tartalma</div> <div>Második fül tartalma</div> <div>...</div> </div> <div class="boxBottom"></div> </div>
Mint az a kiemelt sorokból látható, CSS osztályok segítségével definiálható a kezdeti fül és tartalom. A fülek esetén az aktív fülnek a .selected osztályt, míg a tartalmi résznél a megfelelő div blokknak a .show osztályt kell megadnunk.
Tippek
- Némely CSS tulajdonság csak a js file-ban módosítható (pl. a li.mouseover osztály esetén a háttérszín módosítása)
-
Alapértelmezett esetben a plugin minden lista elemhez definiál click ()
eseményt, amely zavaró lehet. Ennek megszüntetéséhez a js kódban az alábbi blokkot
kell ki kommentelni, vagy törölni:
$('.boxBody li').click(function() { window.location = $(this).find("a").attr("href"); }).mouseover(function() { $(this).css('backgroundColor','#888'); }).mouseout(function() { $(this).css('backgroundColor',''); });
- A fülek közti váltás animációja, illetve a linkekre alkalmazott effekt szintén nem érhető el paramétereken keresztül, de a forráskódban ezek is módosíthatóak.