Ich möchte Registerkarten auf der linken Seite der Seite anstatt über der Oberseite. Ich lade jQuery bereits aus anderen Gründen (Effekten), daher bevorzuge ich die Verwendung von jQuery gegenüber einem anderen UI-Framework. Suchen in "Vertical Tabs JQuery" ergeben Links zu laufenden Arbeiten.
Ist es schwierig, vertikale Registerkarten für alle Browser zu verwenden, oder ist es so trivial, dass es sich nicht lohnt, Beispielcode zu veröffentlichen, wenn Sie eine Lösung gefunden haben?
quelle
Ich habe ein vertikales Menü und Registerkarten erstellt, die sich in der Mitte der Seite ändern. Ich habe zwei Wörter in der Codequelle geändert und zwei verschiedene Divs voneinander getrennt
Speisekarte:
<div class="arrowgreen"> <ul class="tabNavigation"> <li> <a href="#first" title="Home">Tab 1</a></li> <li> <a href="#secund" title="Home">Tab 2</a></li> </ul> </div>
Inhalt:
<div class="pages"> <div id="first"> CONTENT 1 </div> <div id="secund"> CONTENT 2 </div> </div>
Der Code funktioniert mit dem Div auseinander
$(function () { var tabContainers = $('div.pages > div'); $('div.arrowgreen ul.tabNavigation a').click(function () { tabContainers.hide().filter(this.hash).show(); $('div.arrowgreen ul.tabNavigation a').removeClass('selected'); $(this).addClass('selected'); return false; }).filter(':first').click(); });
quelle
//o_O\\ (Poker Face) i know its late
Fügen Sie einfach den CSS-Stil hinzu
<style type="text/css"> /* Vertical Tabs ----------------------------------*/ .ui-tabs-vertical { width: 55em; } .ui-tabs-vertical .ui-tabs-nav { padding: .2em .1em .2em .2em; float: left; width: 12em; } .ui-tabs-vertical .ui-tabs-nav li { clear: left; width: 100%; border-bottom-width: 1px !important; border-right-width: 0 !important; margin: 0 -1px .2em 0; } .ui-tabs-vertical .ui-tabs-nav li a { display:block; } .ui-tabs-vertical .ui-tabs-nav li.ui-tabs-selected { padding-bottom: 0; padding-right: .1em; border-right-width: 1px; border-right-width: 1px; } .ui-tabs-vertical .ui-tabs-panel { padding: 1em; float: right; width: 40em;} </style>
AKTUALISIERT ! http://jqueryui.com/tabs/#vertical
quelle
Ich würde nicht erwarten, dass vertikale Registerkarten anderes Javascript benötigen als horizontale Registerkarten. Das einzige, was anders wäre, ist das CSS für die Darstellung der Registerkarten und Inhalte auf der Seite. JS für Registerkarten führt im Allgemeinen nur Inhalte ein / aus / aus / lädt sie möglicherweise.
quelle
Eine weitere Option ist das Plug-In für die Registerkarten jQuery mb.extruder von Matteo Bicocchi: http://pupunzi.open-lab.com/mb-jquery-components/jquery-mb-extruder/
quelle
Schauen Sie sich Listamatic an . Registerkarten sind semantisch nur eine Liste von Elementen, die auf eine bestimmte Weise gestaltet wurden. Sie benötigen nicht einmal unbedingt Javascript, damit vertikale Registerkarten funktionieren, wie die verschiedenen Beispiele bei Listamatic zeigen.
quelle
Super einfache Funktion, mit der Sie hier Ihre eigene Tab / Akkordeon-Struktur erstellen können: http://jsfiddle.net/nabeezy/v36DF/
bindSets = function (tabClass, tabClassActive, contentClass, contentClassHidden) { //Dependent on jQuery //PARAMETERS //tabClass: 'the class name of the DOM elements that will be clicked', //tabClassActive: 'the class name that will be applied to the active tabClass element when clicked (must write your own css)', //contentClass: 'the class name of the DOM elements that will be modified when the corresponding tab is clicked', //contentClassHidden: 'the class name that will be applied to all contentClass elements except the active one (must write your own css)', //MUST call bindSets() after dom has rendered var tabs = $('.' + tabClass); var tabContent = $('.' + contentClass); if(tabs.length !== tabContent.length){console.log('JS bindSets: sets contain a different number of elements')}; tabs.each(function (index) { this.matchedElement = tabContent[index]; $(this).click(function () { tabs.each(function () { this.classList.remove(tabClassActive); }); tabContent.each(function () { this.classList.add(contentClassHidden); }); this.classList.add(tabClassActive); this.matchedElement.classList.remove(contentClassHidden); }); }) tabContent.each(function () { this.classList.add(contentClassHidden); }); //tabs[0].click(); } bindSets('tabs','active','content','hidden');
quelle