Onglets verticaux avec JQuery ?

Question

Je veux des onglets sur le côté gauche de la page plutôt qu'en haut. Je charge déjà jQuery pour d'autres raisons (effets), je préfère donc utiliser jQuery à un autre framework UI. Les recherches sur "vertical tabs jquery" donnent des liens vers des travaux en cours.

Est-il difficile de faire fonctionner les onglets verticaux sur tous les navigateurs, ou est-ce si trivial qu'une fois la solution trouvée, il ne semble pas utile de publier un exemple de code ?

Answer 1

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

Answer 2

Jetez un coup d'œil à Listamatic . Les onglets sont sémantiquement juste une liste d'éléments stylisés d'une manière particulière. Vous n'avez même pas nécessairement besoin de javascript pour faire fonctionner des onglets verticaux, comme le montrent les différents exemples de Listamatic.

Answer 3

Fonction super simple qui vous permettra de créer votre propre structure d'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');