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

Jetez un coup d'œil à le document sur les onglets verticaux de jQuery UI . Je l'ai essayé, ça a bien marché.

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

Answer 2

Essayez ici :

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

Un coup d'œil à l'onglet Liberté pourrait vous apporter ce dont vous avez besoin.

Faites-moi savoir si vous trouvez quelque chose qui vous plaît. J'ai travaillé sur le même problème il y a quelques mois et j'ai décidé de l'implémenter moi-même. J'aime ce que j'ai fait, mais il aurait été préférable d'utiliser une bibliothèque standard.

Answer 3

J'ai créé un menu vertical et des onglets qui changent au milieu de la page. J'ai changé deux mots dans le code source 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 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();
});

Answer 4

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

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

Answer 5

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