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"
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ć:
-
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. -
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 -
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:
- Nie podano parametru url
- Strona jest otwierana w przeglądarce jako plik. W tym przypadku parametr url nie ma znaczenia.
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