jQuery टैब - नए चयनित इंडेक्स

Question

प्राप्त करने से पहले मैंने jquery-ui tabs एक्सटेंशन को ajax के माध्यम से पृष्ठ खंड लोड करने के लिए उपयोग किया है, और एक पृष्ठ के भीतर छुपा div एस छुपाने या प्रकट करने के लिए। इन दोनों विधियों को अच्छी तरह से प्रलेखित किया गया है, और मुझे वहां कोई समस्या नहीं है।

अब, हालांकि, मैं टैब के साथ कुछ अलग करना चाहता हूं। जब उपयोगकर्ता एक टैब का चयन करता है, तो उसे पृष्ठ को पूरी तरह से लोड करना चाहिए - इसका कारण यह है कि प्रत्येक टैबबंद अनुभाग की सामग्री कुछ हद तक महंगी होती है, इसलिए मैं उन्हें केवल एक बार में नहीं भेजना चाहता हूं और सामान्य विधि का उपयोग करना चाहता हूं टॉगलिंग 'डिस्प्ले: कोई नहीं' उन्हें प्रकट करने के लिए।

मेरी योजना टैब 'select ईवेंट को रोकना है, और उस फ़ंक्शन को दस्तावेज़ को स्थानांतरित करके पृष्ठ को फिर से लोड करना है।

कैसे, select हैंडलर में, क्या मुझे नया चयनित टैब इंडेक्स और एचटीएमएल एलआई ऑब्जेक्ट मिल सकता है?

$('#edit_tabs').tabs( { 
     selected: 2,  // which tab to start on when page loads 
     select: function(e, ui) { 
      var t = $(e.target); 
      // alert("data is " + t.data('load.tabs')); // undef 
      // alert("data is " + ui.data('load.tabs')); // undef 

      // This gives a numeric index... 
      alert("selected is " + t.data('selected.tabs')) 
      // ... but it's the index of the PREVIOUSLY selected tab, not the 
      // one the user is now choosing. 
      return true; 

      // eventual goal is: 
      // ... document.location= extract-url-from(something); return false; 
     } 
}); 

वहाँ घटना या ui वस्तु की एक विशेषता यह है कि मैं पढ़ सकते हैं कि सूचकांक, आईडी, या नव चयनित टैब या उसके भीतर की एंकर टैग की वस्तु दे देंगे है?

या पूरे पृष्ठ को फिर से लोड करने के लिए टैब का उपयोग करने के लिए पूरी तरह से एक बेहतर तरीका है?

Answer 1

मैं टैब के लिए events पर एक नज़र डालेगा। निम्नलिखित jQuery दस्तावेज़ों से लिया गया है:

$('.ui-tabs-nav').bind('tabsselect', function(event, ui) { 
    ui.options // options used to intialize this widget 
    ui.tab // anchor element of the selected (clicked) tab 
    ui.panel // element, that contains the contents of the selected (clicked) tab 
    ui.index // zero-based index of the selected (clicked) tab 
}); 

ऐसा लगता है कि ui.tab जाने का तरीका है।

Answer 2

धन्यवाद, जॉब्स्री - 'ui.tab' आपने इंगित किया कि मुझे क्लिक किया हुआ एंकर टैग दिया गया है, जिससे मैं अपनी कक्षा, आईडी, href, आदि निकाल सकता हूं ... मैं अपने यूआरएल को एन्कोड करने के लिए आईडी का उपयोग करना चुनता हूं । मेरे अंतिम टैब() कॉल इस तरह दिखता है:

$(document).ready(function() { 
    $('#edit_tabs').tabs( { 
     selected: [% page.selected_tab ? page.selected_tab : 0 %], 
     select: function(e, ui) { 
      // ui.tab is an 'a' object 
      var url = ui.tab.href; 

      document.location = url; 
      return false; 
     } 
    }).show(); 
}); 

Answer 3

मेरी कार्यान्वयन में

ऐसा काम करता है। यह एक मूल यूएल/डिव टैब नेविगेशन सिस्टम है। एक हैश मार्क संलग्न के साथ किसी अन्य पृष्ठ पर किसी लिंक पर क्लिक करने पर सही टैब को फायर करने की कुंजी, केवल आपके यूएल के माध्यम से # एक्सप्लंप के लिए फ़िल्टर करके है जो ब्राउज़र के माध्यम से पारित होने से मेल खाती है। ऐसा ही है।

<div id="tabNav"> 

    <ul class="tabs"> 
    <li><a href="#message">Send a message</a></li> 
    <li><a href="#shareFile">Share a file</a></li> 
    <li><a href="#arrange">Arrange a meetup</a></li> 
    </ul> 
</div> 

<div id="tabCont"> 

    <div id="message"> 
    <p>Lorem ipsum dolor sit amet.</p> 
    </div> 
    <div id="shareFile"> 
    <p>Sed do eiusmod tempor incididunt.</p> 
    </div> 
    <div id="arrange"> 
    <p>Ut enim ad minim veniam</p> 
    </div> 

</div> 

और jQuery यह ऐसा करने के लिए:

$(document).ready(function() { 
$(function() { 
    var tabs = []; 
    var tabContainers = []; 

    $('ul.tabs a').each(function() { 
     // note that this only compares the pathname, not the entire url 
     // which actually may be required for a more terse solution. 
     if (this.pathname == window.location.pathname) { 
      tabs.push(this); 
      tabContainers.push($(this.hash).get(0)); 
     } 
    }); 

    $(tabs).click(function() { 
     // hide all tabs 
     $(tabContainers).hide().filter(this.hash).show(); 


     // set up the selected class 
     $(tabs).removeClass('active'); 
     $(this).addClass('active'); 

     return false; 

}); 




$(tabs).filter(window.location.hash ? '[hash=' + window.location.hash + ']' : ':first').click(); 

    }); 

}); 

है कि आप के लिए यह का ध्यान रखना चाहिए

यहाँ उदाहरण एचटीएमएल है। मैं knwo यह सबसे साफ कोड नहीं है, लेकिन यह वहाँ मिल जाएगा।

Answer 4

या किसी अन्य विकल्प मैं अपनी वेबसाइट के लिए इस्तेमाल किया है यह है:

$(document).ready(function() { 
    $('#edit_tabs').tabs( { 
     selected: [% page.selected_tab ? page.selected_tab : 0 %], 
     select: function(e, ui) { 
      // ui.tab is an 'a' object 
      // it has an id of "link_foo_bar" 
      // transform it into http://....something&cmd=foo-bar 
      var url = idToTabURL(ui.tab.id); 

      document.location = url; 
      return false; 
     } 
    }).show(); 
}); 

Answer 5

select: function(e, ui){var index=ui.index;} 

मेरे लिए अच्छा काम करता है। देखें: http://api.jqueryui.com/tabs/#events

Answer 6

मैं इस आवश्यकता को पूरा करने के लिए दो तरीके से पता चला है, यह कठिन है के रूप में मेरे कोड यहाँ डाल करने के लिए, आपको लगता है कि किसी को मदद करता है पर http://ektaraval.blogspot.com/2011/09/calling-javascript-when-jquery-ui-tab.html

आशा है कि यह पर एक नजर है सकते हैं ..

$('#edit_tabs').tabs({ selected: 2 }); 

ऊपर बयान तीसरे टैब सक्रिय कर देंगे:

Answer 7

प्रलेखन में एक त्वरित दृष्टि हमें समाधान देता है।

Answer 8

jQuery UI में

- v1.9.2

ui.newTab.index() 

सक्रिय टैब का आधार 0 सूचकांक पाने के लिए