Tab-Boxen sind heutzutage sehr beliebt. Schauen Sie sich den Bereich "Explore" auf MSNBC oder das Premium News Theme an, um zu sehen, wie sie in einem Blog-Umfeld eingesetzt werden können. Ich denke, das aus gutem Grund. Es ermöglicht Ihnen, mehr Inhalte auf einer Seite mit weniger Unordnung hinzuzufügen und gleichzeitig Besucher zu einer Interaktion mit der Website zu bewegen. Außerdem macht es einfach Spaß.
Beachten Sie, wie diese "Tab-Boxen" funktionieren. Sie ändern den Inhalt innerhalb der Box **sofort**, wenn Sie auf einen neuen Tab klicken – kein Nachladen vom Server erforderlich. Das liegt daran, dass der Inhalt für alle Tabs beim Laden der Seite geladen wird, aber versteckt bleibt, bis der entsprechende Tab angeklickt wird.
Mit der Yahoo! UI Tab View ist das Erstellen einer Tab-Box wirklich ziemlich einfach. Hier ist, wie es geht.
1. Fügen Sie die Javascript-Dateien auf Ihrer Seite ein.
...
<script type="text/javascript" src="//yui.yahooapis.com/2.5.0/build/yahoo-dom-event/yahoo-dom-event.js"></script>
<script type="text/javascript" src="//yui.yahooapis.com/2.5.0/build/element/element-beta-min.js"></script>
<script type="text/javascript" src="//yui.yahooapis.com/2.5.0/build/connection/connection-min.js"></script>
<script type="text/javascript" src="//yui.yahooapis.com/2.5.0/build/tabview/tabview-min.js"></script>
</head>
<body>
<script type="text/javascript">
var myTabs = new YAHOO.widget.TabView("content-explorer");
</script>
...2. Fügen Sie das Markup für die Box hinzu.
<div id="content-explorer">
<ul class="yui-nav">
<li class="selected"><a href="#">Articles</a></li>
<li><a href="#">Photos</a></li>
<li><a href="#">Video</a></li>
<li><a href="#">Leprechaun</a></li>
</ul>
<div class="yui-content">
<div>
...
</div>
<div>
...
</div>
<div>
...
</div>
<div>
...
</div>
<div>
...
</div>
</div>
</div>Alles in diesem Markup ist wichtig für die Funktion, einschließlich aller ID- und Klassennamen für alle Elemente. Beachten Sie, dass es vier Listenelemente im "yui-nav" und vier Divs im "yui-content" gibt, was ebenfalls wichtig ist. Diese sollten immer gleichmäßig übereinstimmen.
3. Stylen Sie mit CSS
#content-explorer {
padding-top: 20px;
width:100%;
line-height:normal;
}
#content-explorer ul {
padding: 10px 10px 0;
list-style: none;
max-width: 770px;
background: url(images/menu_bg.gif) bottom repeat-x;
height: 31px;
}
#content-explorer ul li {
float: left;
background: url(images/right.gif) right top no-repeat;
text-align: center;
overflow: hidden;
margin-left: 5px;
}
#content-explorer ul li a {
display: block;
background: url(images/left.gif) left top no-repeat;
padding: 10px 20px 6px 20px;
font-weight: bold;
color: #999;
}
#content-explorer ul li a:hover {
color: #990000;
}
#content-explorer ul li.selected {
background: url(images/right_cur.gif) right top no-repeat;
}
#content-explorer ul li.selected a {
background: url(images/left_cur.gif) left top no-repeat;
padding-bottom: 8px;
color: #990000;
}
div.yui-content {
overflow: auto;
border-bottom: 2px solid black;
border-right: 2px solid black;
border-left: 2px solid black;
padding: 20px;
}Das CSS ist Ihnen vollständig überlassen, es gibt keine Namensbeschränkungen wie im Markup. Machen Sie sich keine Sorgen um die Einstellung von Anzeigewerten, um den Inhalt der verschiedenen Tabs zu verbergen, das Javascript erledigt das automatisch für Sie.
Für mich ist das wirklich Coolste daran, wie flexibel das alles ist. Sie können alles tun, was Sie sich in diesen Divs im Inhaltsbereich vorstellen können.
Schön! Vielen Dank für Ihre Bemühungen. Die Möglichkeit, eine ZIP-Datei mit einem Beispiel herunterzuladen, ist einfach großartig! Weiter so!
Ich habe domtabs implementiert und sie auch widgetisiert. Es gibt großartige Anleitungen zur Verwendung hier. Es ist nur eine Frage, eine .js-Datei in Ihren Theme-Ordner zu kopieren und zu stylen. Ich habe auch ein WordPress-Plugin gesehen (es gibt immer noch ein paar Haken, glaube ich) für Tab-Menüs hier.
Mein einziger Kommentar – ich benutze NoScript mit Firefox, und daher funktioniert die YUI-Tab-Oberfläche nicht richtig. NoScript ist sehr misstrauisch... ; )
Das einzige Problem ist, dass jeder, der Javascript deaktiviert hat, kein Javascript installiert hat usw., nicht sieht, dass dies der Grund ist, warum die Tabs nicht funktionieren. Ich erkenne, dass die meisten Leute ein noscript-Tag oben haben werden, um die Leute darüber zu informieren – nur zur Info. Viele dieser Tricks scheinen diese Benachrichtigung vorinstalliert zu haben, oder es ist ein Fehler / eine Fehlermeldung leicht erkennbar. In diesem Fall war es das nicht.
Aber auf jeden Fall ein großartiger Trick!
Schöner Artikel – eine kleine Frage, Chris, warum verweist du auf #content-explorer ... und div.yui-content? Warum nicht beide vollständig referenzieren (div#content-explorer, div.yui-content), da dies das Zurücklesen des CSS erleichtern würde?
@Michael: Ich denke, wenn Sie einen Javascript-Blocker verwenden, sind Sie sich bereits bewusst, dass Sie potenziell alle möglichen Dinge auf Websites kaputt machen. Aber ja, ein noscript-Tag wäre wahrscheinlich eine wirklich gute Idee!
@Lazlow: Aus keinem besonderen Grund, nur geringe Nachlässigkeit.
Yahoo-Tabs sehen schön aus. Aber ich denke, es gibt ZU VIELE Dateien, um 1 einfaches Tab-Interface laufen zu lassen.
Zum Beispiel hat das Adobe Spry Framework [Link] die gleiche Art von Widget [Link], die gleiche Art der Einrichtung. Und es werden nur 1 Javascript-Datei und 1 CSS verwendet. Weniger Dateien, weniger HTTP-Anfragen == schnellere Ladezeiten
Aber dann wieder, verwenden Sie, was sich für Sie gut anfühlt.
@V1 (& Leanne): all diese Links sind sehr cool, danke für das Teilen. Ich sollte mir mehr von Adobes Spry-Sachen ansehen.
Ich weiß, es scheint, als ob VIER Javascript-Includes für diese einfache Tab-Box etwas zu viel sind... Ich denke, YUI versucht, modular zu arbeiten, so dass, wenn Sie andere Teile ihrer UI verwenden, Sie bereits weitgehend vorbereitet sind. Während, wenn es nur ein einzelnes für jedes UI-Widget gäbe, jede dieser Dateien eine Menge unnötigen wiederholten Code enthalten könnte.
Ah, danke für die Antwort, Chris. Ich habe nur angenommen, dass es dafür einen Grund geben könnte!
Diese Tab-Box ist sehr schön. Ich bin auf das YUI-Ding gestoßen, und das ist auch sehr schön!
Eine Sache, die Links funktionieren unter Netscape 7.1 auf meinem Windows-Rechner nicht. Gibt es eine Idee, wie man damit umgeht?
Noch etwas zum Netscape-Thema...
Ich habe Ihre beiden Beispielseiten "MSNBC" und "The Premium News Theme" getestet.
MSNBC ist kläglich gescheitert, nicht nur die Tab-Box, sondern auch andere Dinge gingen den Bach runter. Die Premium...-Seite funktionierte perfekt, keine Probleme, sah richtig aus, Links funktionierten.
Also gibt es einen Weg, es unter Netscape 7.1 zum Laufen zu bringen. Wissen Sie, was es sein könnte?
Oder bin ich einfach weit hinter der Zeit und wurde die Berücksichtigung dieses speziellen Browsers eingestellt?
Wenn ja, welche Legacy-Browser zielen Sie an? Ist es dasselbe wie die YUI A-Browser-Liste?
Danke für Ihre Antworten!
@James: Ich verstehe das Bedürfnis/den Wunsch, dass alles auf einer Webseite für alle möglichen Browser funktioniert, aber irgendwann muss eine Grenze gezogen werden, und ich denke, Netscape 7.1 liegt jenseits dieser Grenze. Netscape 7.1 ist jetzt zwei Versionen alt (9.0.0.6 ist die aktuellste Version) und **selbst diese** hat Netscape offiziell eingestellt. Wenn eine Seite mit einer so großen und vielfältigen Zielgruppe wie MSNBC beschlossen hat, sie nicht mehr zu unterstützen, ist das ein gutes Zeichen dafür, dass es kein großes Problem mehr ist =)
Ich bin mir ziemlich sicher, dass es keine Möglichkeit gibt, dieses spezielle Skript in einem so alten Browser zum Laufen zu bringen. Ich denke, die beste Idee wäre, eine Warnmeldung mit bedingten Stylesheets und einem <noscript>-Tag auszugeben.
Ist es möglich, eine feste Höhe anstelle einer automatischen Höhe zu haben? Genau wie die Breite?
Danke
CR
@CR: Sicher, im CSS für div.yui-content, setzen Sie einfach einen Höhenwert. Das wäre in Ordnung, wenn alles innerhalb der Box Bilder sind, aber seien Sie vorsichtig, wenn Sie Text darin verwenden. Statische Höhen für Elemente mit Text können zu Problemen führen, wenn Benutzer die Textgröße erhöhen.
Chris.. danke für die schnelle Antwort.
Entschuldigung, ich bin nicht sehr gut darin…. wo genau füge ich diesen Höhenwert in das CSS ein? Ist es irgendwo in der Nähe von....
#page-wrap {
width: 450px;
margin: 25px auto;
}
Bezüglich des Ratschlags zum Text, würde es nicht automatisch vertikale und horizontale Scrollbalken erzeugen?
Vielen Dank,
CR
Tatsächlich ist es in der Zeile, die hier beginnt
div.yui-content {
…
height: 200px;
…
}
Wenn Sie möchten, dass es Scrollbalken verwendet, tut es das nicht automatisch, aber Sie könnten den overflow-Wert auf "scroll" anstelle von "auto" setzen, wie er jetzt ist. Der Grund, warum er jetzt auf auto gesetzt ist, ist, die Float der Menüeinträge darüber zu "löschen".
Danke, Sir…. sehr viel!
Ich habe es auf auto gelassen und wenn der Text zu lang ist, erscheinen die Scrollbalken, also… das ist es, was ich brauche.
Nochmals vielen Dank.
CR
Ähm… vielleicht verstehe ich den Punkt nicht, aber warum ein großes Framework verwenden, wenn man das ganz einfach mit einem kleinen Javascript selbst machen kann? Sie können diese Buttons selbst erstellen und einige Divs darunter platzieren und sie alle unsichtbar machen mit display:none; und wenn Sie auf einen Button klicken, können Sie einen Javascript-Befehl geben, um die Anzeige einzuschalten. Ist das nicht viel einfacher und leichter, als ein ganzes Framework dafür zu verwenden?
Hallo, tolles Mod. Ich habe das auf meiner Website implementiert, aber es dauert manchmal lange, bis es geladen ist. Es sieht so aus, als ob es darauf wartet, dass die gesamte Seite geladen wird, bevor es implementiert wird. Wenn Sie also eine Anzeige oder ein Bild haben, das lange zum Laden braucht, dann auch dieses Mod.
Gibt es eine Möglichkeit, es zuerst laden zu lassen?
Auch wie füge ich das NoScript hinzu, das in anderen Beiträgen erwähnt wurde?
Danke, Steven
Ich bin neugierig auf die Demo, die heruntergeladen wird. Die Webseite hat einen Link zu zwei Stylesheets, style.css und tabs.css. Im Download ist nur eine Datei, style.css, enthalten. Die Demo funktioniert jedoch. Was ist in der fehlenden Datei?
Hallo
Ich benutze diese Tab-Boxen… habe ein paar Probleme…
Ich möchte diese Tab-Boxen an mehreren Stellen auf einer Webseite verwenden…
wie im oberen und unteren Bereich.
die obere Tab-Box funktioniert in IE7 gut, aber …….. die untere Tab-Box funktioniert nicht richtig… bitte helfen Sie……
also lautet die Frage: Können wir diese Tab-Box mehr als einmal auf einer einzigen Webseite verwenden?
Bitte helft
danke
Hallo zusammen
Ich habe Probleme mit YUI-Tabs, meine JSP-Seite enthält einige YUI-Tabs
Tabs, die PDF-Inhalte enthalten können...
–> der erste und zweite Tab enthalten PDF-Inhalte, wenn ich vom
ersten zum zweiten Tab navigiere, wird der Inhalt richtig angezeigt, wenn ich wieder
zum ersten Tab zurückkehre, hängt sich die JSP-Seite auf und sie zeigt
den PDF-Inhalt nicht an, kann mir bitte jemand sagen, welche
Möglichkeiten ich falsch mache..
Es funktioniert sehr gut mit IE 7.x, Chrome-Browsern, aber nicht mit Firefox.
Hier ist der Code
var tabView = new YAHOO.widget.TabView(‘demo’);
Beispiel 1
Browser News
Tab One Label
Tab Two Label
Tab Three Label
<div><iframe id='webtabsframe' src='http://files.voicecurve.com/arcadian/arkansas/fayetteville/fayetteville - fort smith auth form.pdf' height="100%" width="100%"></iframe></div>
<div><p>Tab Three Content</p></div>
</div>
</div>
Ist der Download anders als die Demo? Es scheint, dass man style.css .content-explorer height:31 zu height:39 ändern muss, damit es richtig funktioniert…
Gibt es eine einfache Möglichkeit, die Tabs rechtsbündig auszurichten? Das Hinzufügen von float:right zu #content-explorer ul li ändert die Tab-Reihenfolge, und #content-explorer ul float:right führt dazu, dass das wiederholte Hintergrundbild nicht mehr die gesamte Länge der Box ausfüllt.