web-dev-qa-db-fra.com

Onglets verticaux avec JQuery?

Je veux des onglets sur le côté gauche de la page plutôt qu'en haut. Je suis déjà en train de charger jQuery pour d'autres raisons (effets), je préfère donc utiliser jQuery dans un autre cadre d'interface utilisateur. Les recherches sur les "onglets verticaux jquery" donnent des liens vers les travaux en cours. 

Faire en sorte que les onglets verticaux fonctionne sur tous les navigateurs est complexe ou est-ce si trivial qu'une fois que vous avez une solution, il ne semble plus utile de poster un exemple de code?

javascriptjqueryjquery-ui
80
Thomas L Holaday

Regardez les onglets verticaux DocU de jQuery UI .

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

Essayez ici:

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

Un coup d'oeil à l'onglet Liberté pourrait vous donner 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 le mettre en œuvre moi-même. J'aime ce que j'ai fait, mais il aurait peut-être été agréable d'utiliser une bibliothèque standard.

7
David Berger

J'ai créé un menu vertical et des onglets changeant au milieu de la page. J'ai changé deux mots sur le code source et j'ai mis à part 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 le div part 

$(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();
});
6
Ricardo Lima
//o_O\\  (Poker Face) i know its late

ajoutez simplement le style CSS ci-dessous

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

MIS À JOUR ! http://jqueryui.com/tabs/#vertical

4
Code Spy

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

2
mdja

Le plug-in jQuery mb.extruder tabs de Matteo Bicocchi: http://pupunzi.open-lab.com/mb-jquery-components/jquery-mb-extruder/

1
Gavin

fonction super simple qui vous permettra de créer votre propre structure en onglet/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');
0
Joe Nabeezy

Regardez Listamatic . Sémantiquement, les onglets ne sont qu'une liste d'éléments stylisés d'une manière particulière. Vous n'avez même pas forcément besoin de javascript pour que les onglets verticaux fonctionnent comme dans les différents exemples de Listamatic.

0
Ryan Bolger