क्या कोई jquery टैब नियंत्रण है जो टैब की कई लाइनों को अच्छी तरह से संभालता है?

Question

मेरे पास 2 से 20

मैं वर्तमान में Jquery UI की टैब प्लगइन का उपयोग कर रहा हूं, लेकिन यह पता लग रहा है कि इसका व्यवहार कम है तो आदर्श (यानी लगभग 12 टैब, जब यह लपेटें, टैब की दूसरी पंक्ति टैब चयन के साथ आगे बढ़ती है और कभी-कभी दो की बजाय 3 लाइनों पर कूदती है।

यह दो गुना सवाल है, पहले किसी को यह पता है कि मैं टैब की दूसरी पंक्ति को कैसे रोक सकता हूं चयन में परिवर्तन करते समय चारों ओर कूदते हैं।

वैकल्पिक रूप से किसी को jQuery के लिए एक टैब प्लगइन के बारे में पता है जो टैब की कई लाइनों को अच्छी तरह से संभालता है (अगर मुझे कोई नहीं मिल रहा है संकल्प मैं ExtJS या कुछ समान का उपयोग कर समाप्त कर सकता हूं, लेकिन इस एप्लिकेशन को काफी हल्के वजन रखने की कोशिश कर रहा था)।

उत्तर

आगे की जांच पड़ताल करने के बाद यह पता चला है यह मैं उपयोग कर रहा था jQuery के यूआई विषय की वजह से किया जा रहा था, इस समस्याग्रस्त शैली थी:

.ui-tabs .ui-tabs-nav li.ui-tabs-selected { padding-bottom: .1em; border-bottom: 0; } 

मैं सिर्फ padding-bottom हटाया : .1em और यह समस्या को हल करता है (सुराग यह था कि तत्वों की दूसरी पंक्ति चयन बदलने के साथ आगे बढ़ रही थी)।

Answer 1

आपको वास्तव में एक एक्सटेंशन की आवश्यकता नहीं है। एक अस्थिर यूएल के साथ बस फ्लोटिंग एलआई का उपयोग करें। एलआई को ठीक से लपेटना चाहिए। आमतौर पर एक ही टैब में शब्दों को सुनिश्चित करने के लिए एक अच्छा विचार " " के साथ बदलकर लपेटता नहीं है।

मेरा कस्टम टैब नियंत्रण ASP.Net के साथ गतिशील रूप से बनाया गया है, लेकिन टैबबिंग और छुपा/शो कार्यक्षमता सभी jQuery है।

<div id="tabWrapper"> 
    <ul id="tabContainer"> 
     <li>Tab&nbsp;1</li> 
     <li>Tab&nbsp;2</li> 
     <li>Tab&nbsp;3</li> 
    </ul> 
</div> 

बेसिक सीएसएस

#tabWrapper 
{ 
    border-bottom: solid 1px #676767; 
} 

#tabContainer 
{ 
    padding:0; 
margin:0; 
    position:relative; 
    z-index: 1; 
    float:left; 
    list-style:none; 
} 

#tabContainer li 
{ 
    float:left; 
    margin:0; 
    cursor: pointer; 
    background: f1f1f1; 
    border-top: solid 1px #676767; 
    border-left: solid 1px #676767; 
    border-right: solid 1px #ababab; 
    margin-bottom: -1px; 
} 

#tabContainer .selected, #tabContainer .selected:hover 
{ 
    background: #fff; 
} 

Answer 2

नहीं एक तकनीकी समाधान है, लेकिन उस Nielsen दृढ़ता से टैब की अनेक पंक्तियां खिलाफ सिफारिश ध्यान रखें:

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

- Tabs, Used Right: The 13 Usability Guidelines

Answer 3

यह समस्या described in a bug report jQuery यूआई समस्या ट्रैकर पर है। उस बग रिपोर्ट पर, मैंने एक पैच संलग्न किया जो इस समस्या को हल करता है जबकि को गैर-चयनित टैब के नीचे .ui-tabs-nav सीमा को संरक्षित करता है। चीयर्स।

Answer 4

मैंने पाया कि निम्नलिखित कई लाइनों पर क्रमबद्ध टैब के लिए उपयोगी था। मेरे पास मौजूद मुद्दों में से एक यह था कि जब तक axis: 'x' निर्दिष्ट नहीं किया गया था तब तक टैब ठीक से क्लिक नहीं किए गए थे, लेकिन लाइनों के बीच खींचते समय यह बदसूरत लग रहा था।

मैं निम्नलिखित के साथ इस में सुधार करने में कामयाब रहे:

$('#tab-container') 
    .sortable({ 
     delay  : 200, 
     distance : 20, 
     axis  : 'x' 
    }) 
    .on('sort sortchange', function() { 
     $('.ui-sortable-helper').css('top', $('.ui-sortable-placeholder').position().top + 'px'); 
    }); 

Answer 5

मैं जब एक दूसरी पंक्ति को तोड़ने गाया रास्ता टैब पसंद नहीं आया, तो मैं बजाय एक "और अधिक देखने" टैब पेश करने का एक प्लगइन लिखा था दूसरी लाइन तोड़ने का।

https://github.com/jasonday/plusTabs

Answer 6

महान जवाब है जो पूरी तरह से समस्या का समाधान करने के लिए इस्तेमाल किया जा सकता का एक बहुत हैं, लेकिन यहाँ मेरे अपने ¢ 2 है।

बहुत मायने रखती है को आसान बनाने के लिए, आप बस के रूप में आप टैब की पंक्तियों को अलग करने की तरह जोड़ सकते हैं एक <hr> स्टाइल। मेरी राय में यह खुली पंक्तियों की तुलना में अच्छा दिखता है।