Kontrolka mztab

Wymagania: Mootools 1.4.4

Wersja: mztab 1.1

Kod powstał w oparciu o opis zakładek w książce Richarda Yorka: "Gotowe rozwiązania CSS"

Pobierz

Przykład działania

Aktywuj zakładkę numer (0-2):

Sposób użycia

Kod html:
 <head>
	...
	<script type="text/javascript" src="/js/mootools-1.4.4.js"></script>

	<link type="text/css" href="/js/mztab/mztab.css" rel="stylesheet" media="screen" />
	<script type="text/javascript" src="/js/mztab/mztab.js"></script>
	...
</head>
<body>
	...
	<div id="tabs"></div>
	...
</body>
Kod javascript:
 var form_example_html = '\
	<h3>Sample contact form:</h3>\
	<table class="form-table">\
		<tr>\
			<th class="width150">Imię i nazwisko:</th>
			<td><input type="text" value="" class="width200" /></td>\
		</tr>\
		<tr>\
			<th class="width150">E-mail:</th>
			<td><input type="text" value=""  class="width200" /></td>\
		</tr>\
		<tr>\
			<th class="width150">Rodzaj kontaktu:</th>
			<td>\
				<select name="building_id" class="width200">\
					<option value="0">[Wybierz]</option>\
					<option value="1">Typ #1</option>\
					<option value="2">Typ #2</option>\
					<option value="2">Typ #3</option>\
					<option value="2">Typ #4</option>\
				</select>\
			</td>\
		</tr>\
		<tr>\
			<td colspan="2"><input type="button" value="Wyślij"  class="width75"/></td>\
		</tr>\
	</table>\
';

window.addEvent("domready", function() {
	var tab = new MzTab('tabs', {
		tabs: [
		  {caption: 'Homepage', url: '/'},
		  {caption: 'Lorem Ipsum', url: '/lorem-ipsum.php'},
		  {caption: 'Form', data: form_example_html},
		],
		width:400,
		height: 400,
		tabWidth:120,
		tabImage:'/js/mztab/img/tab120.png'
	});
});

Opis parametrów

Parametr url zakładki może mieć następującą postać:

  1. Pełny adres url, np. http://domena.pl.
    Musi to być adres w obrębie domeny w której kontrolka mztab się znajduje. W przeciwnym razie zawartość się nie załaduje.
  2. Skrócony adres url zaczynający się od slasha /, np. /zakladka.html.
    Adres url jest wtedy prefiksowany domeną na której kontrolka się znajduje, np. http://domena.pl/zakladka.html
  3. Skrócony adres url nie zaczynający się od slasha /, np. zakladka.html.
    Adres url jest wtedy prefiksowany domeną oraz katalogiem w którym znajduje się strona zawierająca kontrolkę, np. Jeśli strona zawierająca kontrolkę ma adres http://domena.pl/przyklady/przyklad.html, to url jest rozwijany do http://domena.pl/przyklady/zakladka.html.

Parametr tabImage jest opcjonalny. Wskazuje on plik, który zostanie użyty do wyświetlenia zakładki. Plik ten powinien mieć szerokość dwa razy większą niż zakładka. W lewej połowie pliku znajduje się zakładka w stanie nie podświetlonym a w prawej połowie - zakładka w stanie podświetlonym, np zakładka 120x25:

Parametr data jest alternatywny dla parametru url. Zawiera kod html który zostanie załadowany do okna pod zakładką. Jest on wykorzystywany, gdy:

 

Wersja 1.1: zmiany w stosunku do wersji 1.0:

  • Dodana opcja zastosowania graficznych zakładek
  • Dodany paramter data który zawiera explicite kod html