English

Mi ez?

Sokféle tab kezelő megoldás létezik más Javascript keretrendszerekhez, és most itt van egy a kedvencemhez, a Prototype-hoz

A csomag használata egyszerű és tetszőleges webalkalmazásba integrálható.

Használd a tabokat a lap tetején a további infókért.

HTML kód

A következő HTML felépítést kell használnod.


<div id="rTab">
	<ul id="rTabHead">
		<li><a href="#">1. Tab</a></li>
		<li><a href="#">2. Tab</a></li>
	</ul>
	<div id="rTabContent">
		<div>Az első tab tartalma</div>
		<div>a második tab tartalma</div>
	</div>
</div>
				

Tetszőleges számú új tabot addhatsz hpzzá. Ehhez adj hozzá új `li` elemeket az "rTabHead" `ul` listához, és ugyanennyi új `div`-et a "rTabContent" `div`-hez.

Magukban a tabokban bármilyen érvényes HTML kódot használhatsz.

Felcserélheted az "rTabHead" és az "rTabContent" részt a HTML kódodban ha az jobban megfelel az igényeidnek.

CSS

Semmiféle CSS nem szükséges a csomaghoz, működni fog mindenféle CSS szabály nélkül is.

Persze ha csinosítani akarsz a kinézeten akkor használnod kell valamiféle CSS formázást ahogyan azt itt is láthatod.


#rTabHead{
	list-style-type: none;
}

#rTabHead li{
	float: left;
	margin: 0 0.2em -2px 0.2em;
	padding: 0.2em 1em;
	background-color: #dfd8d1;
	border: thin solid gray;
	border-bottom: none;
}

#rTabHead li:hover{
	background-color: #eed;
}

#rTabHead li.rTabActiveHead{
	background-color: #ffefdf;
}

#rTabHead li a{
	text-decoration: none;
}

#rTabContent{
	clear: both;
	border: thin solid gray;
	padding: 1em;
	background-color: #ffefdf;
}
				

Hogyan használjam?

Linkeld be a prototype.js és a rTab.js fileokat a HTML dokumentumod header részében.


<script type="text/javascript" src="lib/prototype.js"></script>
<script type="text/javascript" src="rTab.js"></script>
				

Ezután hozd létre azt a HTML vázat amit a HTML tab mutat.

Alap beállítás szerint az első tab lesz az aktív. Ha másik tabot szeretnél megjeleníteni induláskor akkor keresd meg az `rTab.js` file utolsó sorait és a `rTab.init();` sort cseréld ki `rTab.init(2);`-re. Így induláskor a harmadik tab fog megjelenni. Ne felejts el, hogy az indexelés 0-tól indul nem 1-től, így ha a harmadik tabot akarod látni induláskor akkor 2-t kell megadnod indexnek.


document.observe('dom:loaded', function(){
	rTab.init(2);	//a 3. tabot mutassa induláskor
});
				

Példák

  1. Ez az oldal maga használható mint az 1. példa
  2. A tabokat áthelyeztük és a kereteket átalakítottuk a 2. példában
  3. A HTML dokumentiumban felcseréltük az rTabHead és az rTabContent elemeket a 3. példában
  4. A 3. tabot nyitjuk meg induláskor a 4. példában

Licensz

A csomag a MIT licensz szerint használható.

Projekt oldal

A projekt a GitHubon csücsül.