jQuery के UI टैब के लिए ईवेंट श्रोताओं?

Question

क्या jQuery UI के टैब विजेट के लिए ईवेंट श्रोताओं उपलब्ध हैं?

मैं वर्तमान में कौन सा टैब इंडेक्स सक्रिय है, इस पर निर्भर करता है कि मैं वेब पेज पर पृष्ठभूमि रंग बदलना चाहता हूं। तो इस तरह कुछ (छद्म कोड):

$('.tabs').addEventListener(index, changeBackgroundImage); 

function changeBackgroundImage(index) { 
    switch (index) { 
     case 1: 
      $('body').css('background-image', '/images/backgrounds/1.jpg'); 
     break; 
     case 2: 
      $('body').css('background-image', '/images/backgrounds/2.jpg'); 
     break; 
     case 3: 
      $('body').css('background-image', '/images/backgrounds/3.jpg'); 
     break; 
     default: 
      $('body').css('background-image', '/images/backgrounds/default.jpg'); 
     break; 
    } 
}; 

अग्रिम धन्यवाद।

Answer 1

उपयोग tabsshow घटना, सूचकांक शुरू किया जाएगा 0.

$('#tabs').bind('tabsshow', function(event, ui) { 
    switch (ui.index){ 
    case 0: 
     $('body').css('background-image', '/images/backgrounds/1.jpg'); 
     break; 
    } 
}); 

Answer 2

टैब्स प्लगइन एक 'शो' घटना है जो जब भी एक टैब दिखाई देता है निकाल दिया जाता है से।

जांच दस्तावेज़ में घटनाओं>http://jqueryui.com/demos/tabs/

Answer 3

हाँ: के तहत "ईवेंट"

कार्य उदाहरण

http://jqueryui.com/demos/tabs/: http://jsfiddle.net/g7Q2L/ (मैं मार्कअप कम कोड के साथ मिलकर बनाने के लिए एम्बेडेड मूल्यों का इस्तेमाल किया और नहीं इंडेक्स)

दस्तावेज़ों की जांच करें, आप .bind("tabsselect", function(){})या कर सकते हैं जब आप टैब शुरू करते हैं तो select संपत्ति को मेरे jsfiddle उदाहरण में initiliasing ऑब्जेक्ट में जोड़ें।

Answer 4

tabsactivate उपयोग घटना

$('#tabs').on('tabsactivate', function(event, ui) { 
    var newIndex = ui.newTab.index(); 
    console.log('Switched to tab '+newIndex); 
}); 

Answer 5

यह पुराने संस्करण के jQuery ui की अब और चयन घटना का समर्थन नहीं करते है।

इस कोड को नए संस्करणों के साथ काम करेंगे:

$('.selector').tabs({ 
        activate: function(event ,ui){ 
         //console.log(event); 
         console.log(ui.newTab.index()); 
        } 
});