JavaScript Tabifier automatisch eine HTML-CSS-Tabs Schnittstelle erstellen
Wenn Sie mit einigen einfachen HTML wie folgt beginnen:
Fügen Sie einige strukturelle DIV-Elemente. Fügen Sie einen div mit class = tabber um die ganze Sache:
Dann fügen Sie ein div mit class = tabbertab um jeden Abschnitt. Standardmäßig tabber wird die Registerkarte Titel aus einer Überschrift Element innerhalb des Abschnitts, oder Sie können den Titel-Attribut der Tabulatornavigation Text sein:
Hinweis: Um die tabbertab DIVs müssen untergeordnete Knoten des tabber DIV sein. Dies wurde erforderlich, um verschachtelte Registerkarten zu ermöglichen.
Nach Ihrer Seite fertig geladen, wird das Skript Ihre einfache HTML in dynamischem HTML zu konvertieren.
Hinweis: Wenn Sie es nicht wollen, automatisch Beiladen ausführen können, beziehen sich auf die weiterführenden Themen.
Schritt drei
Fügen Sie einige Arten. Siehe Beispiel CSS-Dateien zur Verfügung gestellt, oder ändern Sie einen des Styles von Listamatic.
ANMERKUNG: Die Original-HTML hat sich zu so etwas wie dies gewandelt:
Beachten Sie Folgendes:- Der Haupt-div (class = tabber) wurde (class = tabberlive) geändert. Auf diese Weise können Sie einen Stil für die untabbed HTML anzuwenden und einen anderen Stil für die Registerkarten HTML.
- Eine ul-Liste hinzugefügt wird. Jedes Element in der Liste ist ein Link, der die dynamische Navigation auslöst. Der Text des Links ist der Titel-Attribut des tabbertab div.
Weitere Themen
Festlegen der Standard-Registerkarte
Standardmäßig wird der erste Registerkarte ausgewählt. Um eine andere Anfangs Registerkarte auszuwählen, verwenden Sie die tabbertabdefault Klasse (neben der tabbertab Klasse):
Siehe example2.html es in Aktion zu sehen.
Ändern dynamisch die Tab
Zunächst müssen Sie eine ID zu Ihrem Haupt-tabber div geben. Ein tabber Objekt wird dem div befestigt und man kann die tabShow () Methode ändern verwenden, die Register angezeigt wird: Die Laschen sind nummeriert, beginnend bei Null, so 0 für das erste Register verwenden, 1 für die zweite Lasche, usw.
deaktivieren Beiladen
Wenn Sie tabber.js laden setzt es ein Ereignis bis zu laufen, wenn die Seite fertig geladen. Um zu verhindern, tabber vom Laufen, bevor Sie tabber.js umfassen. stellen Sie die tabberOptions Variable wie folgt aus:
onLoad und onClick Funktionen Ereignisrückruf
Sie können eine onLoad-Funktion eingestellt, nachdem die Registerkarte Schnittstelle Initialisierung beendet aufgerufen werden, oder eine onClick Funktion (aufgerufen werden, wenn ein Benutzer eine Registerkarte klickt).
Siehe für ein vollständigeres Beispiel example2.html.