Les onglets verticaux avec JQuery?

Je veux des onglets le long du côté gauche de la page au lieu de sur le dessus. Je charge déjà jQuery pour d'autres raisons (effets), alors je préfère utiliser jQuery dans un autre cadre d'interface utilisateur. Les recherches sur les liens "jquery des onglets verticaux" correspondent aux travaux en cours.

Est-ce que les onglets verticaux fonctionnent à travers les navigateurs chargés, ou est-ce si trivial que, une fois que vous avez une solution, il ne semble pas utile de publier un code d'exemple?

Consultez jQuery UI vertical Tabs Docu . Je l'essaye, ça a bien fonctionné.

<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> <script> $(document).ready(function() { $("#tabs").tabs().addClass('ui-tabs-vertical ui-helper-clearfix'); $("#tabs li").removeClass('ui-corner-top').addClass('ui-corner-left'); }); </script>

Essayez ici:

http://www.sunsean.com/idTabs/

Un regard sur l'onglet Liberté peut avoir ce dont vous avez besoin.

Faites-moi savoir si vous trouvez quelque chose que vous aimez. J'ai travaillé sur le même problème il y a quelques mois et j'ai décidé de me mettre en œuvre. J'aime ce que j'ai fait, mais il aurait pu être agréable d'utiliser une bibliothèque standard.

J'ai créé un menu vertical et des onglets qui changent au milieu de la page. J'ai changé deux mots sur la source du code et j'ai séparé deux divs différents

menu:

 <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>

contenu:

 <div class="pages"> <div id="first"> CONTENT 1 </div> <div id="secund"> CONTENT 2 </div> </div>

Le code fonctionne avec la div séparée

 $(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(); });

 //o_O\\ (Poker Face) i know its late

Ajoutez simplement style underw css

 <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>

ACTUALISÉ ! http://jqueryui.com/tabs/#vertical

Je ne m'attends pas à ce que les onglets verticaux nécessitent un Javascript différent des onglets horizontaux. La seule chose qui serait différente est le CSS pour présenter les onglets et le contenu de la page. JS pour les onglets ne fait généralement plus que montrer / masquer / peut-être charger du contenu.

Une autre option est le plug-in jwuery mb.extrude de Matteo Bicocchi: http://pupunzi.open-lab.com/mb-jquery-components/jquery-mb-extruder/

Jetez un oeil à Listamatic . Les onglets sont sémantiquement uniquement une liste d'articles conçus d'une manière particulière. Vous n'avez même pas nécessairement besoin de javascript pour faire fonctionner les onglets verticaux en tant que divers exemples au salon Listamatic.

Fonction super simple qui vous permettra de créer votre propre structure de tabulation / accordéon ici: 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');