Vertikale Registerkarten mit JQuery?

Ich möchte Registerkarten auf der linken Seite der Seite anstatt über der Oberseite. Ich lade jQuery bereits aus anderen Gründen (Effekten), daher bevorzuge ich die Verwendung von jQuery gegenüber einem anderen UI-Framework. Suchen in "Vertical Tabs JQuery" ergeben Links zu laufenden Arbeiten.

Ist es schwierig, vertikale Registerkarten für alle Browser zu verwenden, oder ist es so trivial, dass es sich nicht lohnt, Beispielcode zu veröffentlichen, wenn Sie eine Lösung gefunden haben?

Schauen Sie sich das Dokument mit den vertikalen Registerkarten der jQuery-Benutzeroberfläche an . Ich probiere es aus, es hat gut funktioniert.

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

Versuch es hier:

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

Ein Blick auf die Registerkarte Freiheit könnte das enthalten, was Sie brauchen.

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

Ich habe ein vertikales Menü und Registerkarten erstellt, die sich in der Mitte der Seite ändern. Ich habe zwei Wörter in der Codequelle geändert und zwei verschiedene Divs voneinander getrennt

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

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

Fügen Sie einfach den CSS-Stil 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>

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

Ich würde nicht erwarten, dass vertikale Registerkarten anderes Javascript benötigen als horizontale Registerkarten. Das einzige, was anders wäre, ist das CSS für die Darstellung der Registerkarten und Inhalte auf der Seite. JS für Registerkarten führt im Allgemeinen nur Inhalte ein / aus / aus / lädt sie möglicherweise.

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

Schauen Sie sich Listamatic an . Registerkarten sind semantisch nur eine Liste von Elementen, die auf eine bestimmte Weise gestaltet wurden. Sie benötigen nicht einmal unbedingt Javascript, damit vertikale Registerkarten funktionieren, wie die verschiedenen Beispiele bei Listamatic zeigen.

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');