Gewusst wie: Erstellen einer Tabbable Vorlage

Tabs sind eine effektive Möglichkeit der Schaffung von Inhalten Folien, dynamische Navigation oder platzsparende Widgets für Ihre Webseiten. Tabbable-Vorlagen sind eine effiziente Lösung für Entwickler, die ihren Prozess oder Designern, die schauen, um ein Blog oder e-Commerce Design erstellen optimieren möchten. Während Registerkarten erstellt werden können, ausschließlich unter Verwendung von CSS und HTML verwendet die effektivste Umsetzung die jQuery UI Tabs Funktion für glatte Leistung, die in allen Browsern konsistent bleibt. In Kombination mit der verbesserten Eigenschaften von HTML5 ist das Ergebnis einer modernen und eleganten Lösung für Inhalte Organisation.

Anweisungen

1 Die HTML5 Boilerplate herunterladen (siehe Link im Abschnitt Ressourcen), die als Grundlage für Ihre Vorlage und sparen Sie viel Arbeit dienen. Entpacken Sie die Datei an einem Ort Ihrer Wahl und öffnen Sie die Datei "index.html" in Ihrem bevorzugten HTML oder Text-Editor. Platzieren Sie den Cursor auf die Leerzeile nach "< Div Id =" Hauptrolle "="main">" und einmal "Enter" drücken.

2 Erstellen Sie eine ungeordnete Liste mit dem "Ul"-Tag, um jeder Name der Registerkarte zu halten, und geben sie eine Klasse von "Tabs." Diese Klasse definiert wie jede Registerkarte erscheint und hilft bauen die Struktur der Navigationsleiste.

< Ul-Klasse "Tabs" = >

<li>Home</li>

<li>Portfolio</li>

<li>Bio</li>

<li>Contact</li>

</ul >

3 Verknüpfen Sie jeder Registerkartenname in Ihrer Liste mit dem "a"-Tag, und verwenden Sie den Registerkartennamen für den Wert "Href", mit vorangestelltem Nummernzeichen (#). Die "#"-Zeichen dient als Anker, welche jQuery verwendet wird, um jede Registerkarte Inhalt anzuzeigen, klickt ein Benutzer auf die Registerkarte. Zum Beispiel:

< Ul-Klasse "Tabs" = >

<li><a href="#home">Home</a></li>

<li><a href="#portfolio">Portfolio</a></li>

<li><a href="#bio">Bio</a></li>

<li><a href="#contact">Contact</a></li>

</ul >

4 Geben Sie ein DIV mit der Klasse "Tab_wrapper" unterhalb der Liste. Dieser Container wird jede Registerkarte Inhaltsseite halten.

< Div Class = "Tab_wrapper" >

< / Div >

Fügen Sie DIVs für jede Inhaltsseite innerhalb der Registerkarte Wrapper geben jeweils die "Inhalte"-Klasse. Diese Klasse definieren allgemeine Layout der Seite Inhalte, wie z.B. Padding, Seitenränder und speziellen Formatvorlagen, die Sie nur auf den Registerkarten anwenden möchten. Verwenden Sie den "Href"-Wert aus jeder Registerkarte Link in Ihrer Liste als DIV "Id"-Wert:

< Div Class = "Tab_wrapper" >

<div id="home" class="content">

<!--Content-->

</div>

<div id="portfolio" class="content">

<!--Content-->

</div>

<div id="bio" class="content">

<!--Content-->

</div>

<div id="contact" class="content">

<!--Content-->

</div>

< / Div >

5 Ersetzen Sie "<!--Inhalt-->" mit dem Markup für jede Registerkarte. Da es sich um eine Vorlage, nur fügen Sie ein Organisationssysteme anstatt auf bestimmte Inhalte ein. Wenn Sie eine Vorlage für eine Blogging-Plattform wie WordPress oder Tumblr erstellen, wäre dies ein geeigneter Ort für Ihre Inhaltsvorlage-Tags. Ein Beispiel wie Sie einen Inhaltsabschnitt einrichten könnte wäre:

< Div Id = "Heimat" Class = "Content" >

< h2 > Titel < / h2 >

< Artikel >

< Abschnitt >

Lorem Ipsum Dolor sit Amet, Consectetuer Adipiscing Elit, Sed Diam Nonummy Nibh Euismod Tincidunt Ut Laoreet Dolore Magna Aliquam Erat Volutpat.

< / Abschnitt >

< / Artikel >

< / Div >

6 Öffnen Sie die Vorlage "Css" im Ordner "style.css"-Dokument. Führen Sie einen Bildlauf nach unten zum Abschnitt "Primäre Styles", und fügen eine Formatdefinition für Ihre "Tabs"-Klasse. Die primäre Parameter, die Sie definieren müssen sind eine Liste-Stil, Höhe und Breite. Eine Listenformatvorlage "None" kann Ihre Tabs zu Zeile oben horizontal am oberen Rand der Registerkarte Inhalt:

{UL.Tabs}

margin: 0;

padding: 0;

float: left;

list-style: none;

height: 32px;

border-bottom: 1px solid #999;

border-left: 1px solid #999;

width: 100%;

}

Hinzufügen einer Formatvorlage unter diese Definition für die Registerkarte Links. Um die Darstellung von "Registerkarten" zu erstellen, müssen Sie verwenden eine Darstellungsart der "Block" und geben jedem Link einige Padding. Andere Parameter, die Sie hinzufügen, möglicherweise gehören Farbe, Schriftart und einen Rahmen. Auch erstellen Sie Formatvorlagen für die "Hover" und "aktiven" Zustand der einzelnen Links Farbe oder Verhalten Variation hinzu.

UL.Tabs li a {}

display: block;

padding: 0 20px;

}

7 Formatvorlagen für Ihre "Tab_container" und "Content" Klassen zu erstellen. Definieren Sie einen Überlauf des "versteckten", und geben Sie Ihre Container die gleiche Breite wie die Registerkarten. Fügen Sie auch eine "klar: beide" Parameter um den Inhalt davon abhalten, sich neben der Tab-Navigations springen:

{.tab_container}

overflow: hidden;

clear: both;

width: 100%;

}

8 Öffnen Sie das Dokument "script.js", die Vorlage im Ordner "Js". Fügen Sie folgenden Code direkt unter der "* /" Linie:

$(document).ready(function() {}

$(".tab_content").hide(); //Hide all content

$("ul.tabs li:first").addClass("active").show(); //Activate first tab

$(".tab_content:first").show(); //Show first tab content

//On Click Event

$("ul.tabs li").click(function() {

$("ul.tabs li").removeClass("active"); //Remove any "active" class

$(this).addClass("active"); //Add "active" class to selected tab

$(".tab_content").hide(); //Hide all tab content

var activeTab = $(this).find("a").attr("href"); //Find the href attribute value to identify the active tab + content

$(activeTab).fadeIn(); //Fade in the active ID content

return false;

});

});

Speichern Sie alle drei Dateien. Sie haben nun eine tabbable Vorlage, die Sie verwenden können, um eine beliebige Anzahl von Website-Layouts und Designs zu erstellen.