JQuery के साथ कार्यक्षेत्र टैब?

Question 1

मैं शीर्ष के बजाय पृष्ठ के बाईं ओर टैब चाहता हूं। मैं पहले से ही अन्य कारणों (प्रभावों) के लिए jQuery लोड कर रहा हूं, इसलिए मैं jQuery का उपयोग किसी अन्य UI ढांचे में करना पसंद करता हूं। "ऊर्ध्वाधर टैब jquery" पर खोज कार्य-प्रगति के लिए लिंक लिंक देती है।

क्या ब्राउज़रों के पार काम करने के लिए वर्टिकल टैब्स हो रहे हैं, या क्या यह इतना तुच्छ है, कि एक बार आपके पास एक समाधान होने के बाद, उदाहरण कोड पोस्ट करना उचित नहीं लगता है?

Question 2

JQuery के यूआई वर्टिकल टैब्स डॉक्यूमेंट पर एक नजर डालें । मैं इसे आज़माता हूं, इसने ठीक काम किया।

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

Question 3

यहाँ कोशिश करें:

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

फ्रीडम टैब पर एक नजर आपको पड़ सकती है।

मुझे पता है अगर तुम कुछ तुम जैसे मिल। मैंने कुछ महीने पहले उसी समस्या पर काम किया और खुद को लागू करने का फैसला किया। मुझे पसंद है कि मैंने क्या किया, लेकिन एक मानक पुस्तकालय का उपयोग करना अच्छा रहा।

Question 4

मैंने पृष्ठ के मध्य में एक ऊर्ध्वाधर मेनू और टैब बदल दिया है। मैंने कोड स्रोत पर दो शब्दों को बदल दिया और मैंने दो अलग-अलग divs सेट किए

मेन्यू:

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

सामग्री:

<div class="pages">
  <div id="first">
    CONTENT 1
  </div>
  <div id="secund">
    CONTENT 2
  </div>
</div>

कोड div के साथ काम करता है

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

Question 5

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

बस नीचे सीएसएस शैली जोड़ें

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

अद्यतन! http://jqueryui.com/tabs/#vertical

Question 6

मुझे ऊर्ध्वाधर टैब से क्षैतिज टैब से अलग जावास्क्रिप्ट की आवश्यकता की उम्मीद नहीं होगी। केवल एक चीज जो भिन्न होगी वह पृष्ठ पर टैब और सामग्री को प्रस्तुत करने के लिए सीएसएस है। टैब के लिए जेएस आम तौर पर सामग्री को दिखाने / छिपाने / छिपाने की तुलना में अधिक नहीं होता है।

Question 7

एक अन्य विकल्प है मैटेको बिस्कोची का jQuery mb.extruder टैब प्लग-इन: http://pupunzi.open-lab.com/mb-jquery-compenders/jquery-mb-extruder/

Question 8

Listamatic पर एक नज़र है । टैब्स शब्दार्थ केवल एक विशेष तरीके से स्टाइल की गई वस्तुओं की सूची है। सूचीबद्ध शो में विभिन्न उदाहरणों के रूप में कार्य करने के लिए आपको आवश्यक रूप से जावास्क्रिप्ट की आवश्यकता नहीं है।

Question 9

सुपर सिंपल फंक्शन जो आपको यहां अपना टैब / अकॉर्डियन स्ट्रक्चर बनाने की अनुमति देगा: 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');