it-swarm.com.de

Vertikale Registerkarten mit JQuery?

Ich möchte Registerkarten auf der linken Seite der Seite anstatt auf der Oberseite. Ich lade bereits jQuery aus anderen Gründen (Effekte), daher ziehe ich die Verwendung von jQuery einem anderen UI-Framework vor. Suchvorgänge in "vertikalen Tabs jquery" führen zu Links zu laufenden Arbeiten. 

Ist es ziemlich schwierig, Vertical Tabs für verschiedene Browser zu verwenden, oder ist es so trivial, dass es nicht lohnenswert ist, Beispielcode zu posten, wenn Sie einmal eine Lösung haben?

80

Werfen Sie einen Blick auf die jQuery UI Vertical Tabs Docu .

<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

Versuch es hier:

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

Ein Blick auf die Registerkarte "Freiheit" hat möglicherweise das, was Sie brauchen.

Lassen Sie mich wissen, wenn Sie etwas finden, das Ihnen gefällt. Ich habe vor ein paar Monaten an demselben Problem gearbeitet und beschlossen, mich selbst umzusetzen. Ich mag das, was ich getan habe, aber es wäre schön gewesen, eine Standardbibliothek zu verwenden.

7
David Berger

Ich habe ein vertikales Menü erstellt und Registerkarten in der Mitte der Seite geändert. Ich habe zwei Wörter im Quellcode geändert und zwei verschiedene divs gesetzt

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

Füge einfach unterw css style 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>

AKTUALISIERTE ! http://jqueryui.com/tabs/#vertical

4
Code Spy

Ich würde nicht erwarten, dass vertikale Registerkarten ein anderes Javascript als horizontale Registerkarten benötigen. Das einzige, was anders wäre, ist das CSS zur Darstellung der Registerkarten und des Inhalts auf der Seite. JS für Registerkarten führt im Allgemeinen nur zum Anzeigen/Ausblenden/möglicherweise Laden von Inhalten.

2
mdja

Eine weitere Option ist das Plug-in für jQuery mb.extruder-Tabs von Matteo Bicocchi: http://pupunzi.open-lab.com/mb-jquery-components/jquery-mb-extruder/

1
Gavin

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');
0
Joe Nabeezy

Schauen Sie sich Listamatic an. Registerkarten sind semantisch nur eine Liste von Elementen, die in einem bestimmten Stil gestaltet sind. Sie benötigen nicht einmal Javascript, damit vertikale Registerkarten funktionieren, wie die verschiedenen Beispiele in Listamatic zeigen.

0
Ryan Bolger