यह लंबे समय से हो रहा है क्योंकि मैं jQuery UI टैब के साथ काम कर रहा हूं, जैसा कि देखा गया है http://eq4.net/hive/ - पहले पृष्ठ को लोड करने पर (या उस मामले के लिए टैब जोड़ने के बाद)
एक बार क्लिक करने के बाद, लोड और शो ईवेंट ट्रिगर हो जाते हैं, लेकिन कोई भी सामग्री पैनल में लोड नहीं होती है, और वर्तमान में चयनित टैब इंडेक्स -1 (कोई नहीं) पर सेट होता है और सभी चयनित राज्य से बाहर हो जाते हैं
फिर यदि आप फिर से क्लिक करते हैं, तो सब कुछ आप की अपेक्षा के अनुसार संचालित होता है, जब तक आप एक टैब नहीं जोड़ते।
क्या कोई मुझे सही दिशा में इशारा कर सकता है इसलिए मैंइस क्विक को डिबग करना शुरू कर सकते हैं? मेरे कोड में कुछ भी नहीं है जिसका टैब चयन पर कोई प्रभाव होना चाहिए, इसमें से अधिकांश यूआई के अन्य पहलुओं को अपडेट कर रहे हैं जो सही ढंग से होने लगते हैं।
मैं jQuery UI 1.8.20 और jQuery 1.7.2 का उपयोग कर रहा हूं - धन्यवाद
उत्तर:
जवाब के लिए 0 № 1आपके द्वारा रिपोर्ट किए गए व्यवहार की पुष्टि करें और केवल एक वर्कअराउंड का सुझाव दे सकते हैं जिसके द्वारा, एक टैब जोड़े जाने के बाद, पहले से चयनित टैब स्वचालित रूप से फिर से चयनित हो जाता है दो बार। पहला चयन बग्गी अप्रभावी होगा और दूसरा वास्तव में टैब (और इसके संबद्ध पैनल) को फिर से आकार देगा।
निम्नलिखित लाइनों के साथ कुछ हो सकता है:
$(function(){
...
var selectedTab = null;
$(selector).tabs({
...
select: function(event, ui) {
//Keep `selectedTab` up to date to remember the selected tab
selectedTab = ui.tab; //or ui.index?
}
add: function(event, ui) {
//Here re-select selectedTab twice (if not null).
//Probably easier to use selectedTab.trigger("click") than the tabs" .select() method, (which requires the selector to be known).
}
});
});
यह देखना मुश्किल है कि विशेष मामले को कैसे संभालना है जहां कोई टैब अभी तक चयनित नहीं हुआ है ( selectedTab === null)।
यह एक बुरा, अक्षम्य ठगना होगा (और अजाक्स मोड के साथ अनुशंसित नहीं है), लेकिन प्लगइन को हैक करने से बचाएगा (जो, यदि आसानी से तय किया जा सकता है, तो तय हो जाएगा)।
जवाब के लिए 0 № 2
इस व्यवहार के कारण यह fx विकल्प था, मैं इस घटना बब्बलर "टी बबल सही" का अनुमान लगाने के लिए उद्यम करूंगा।
हटाने पर:
fx: {
opacity: "toggle",
duration: 100
}
टैब अब लोड करना चाहिए जैसा कि उन्हें करना चाहिए। मैं ठीक-ठीक पता लगाऊंगा कि fx विकल्प का उपयोग करते समय क्या होता है (और क्या नहीं)।
जवाब के लिए 0 № 3
इसे डालने का प्रयास करें
$( "#pages" ).tabs().find( ".ui-tabs-nav" ).sortable({
axis: "x", sort: function(event, ui) {
},
दस्तावेज़ में
$(document).ready(function () {
$( "#pages" ).tabs().find( ".ui-tabs-nav" ).sortable({
axis: "x",
sort: function(event, ui) {
},
});
जवाब के लिए 0 № 4
Google को क्रेडिट के साथ, यह स्पष्ट है कि jQuery UI टैब के साथ कई मुद्दे हैं " .add() विधि, हालांकि निम्नलिखित प्रक्रिया लगता है (पूरी तरह से विश्वसनीय है?):
- कॉल
.tabs("destroy") - एक नया टैब जोड़ें (यानी एक नया
liनोड), "मैन्युअल रूप से" - पुनः आरंभ कर देगा
.tabs()
सतह पर, यह प्राप्त करने के लिए काफी सरल है, हालांकि व्यवहार में सामान्यीकृत काम कोड के विकास में कूदने के लिए कुछ हुप्स हैं - मुख्यतः:
- देशी को संरक्षित करने की आवश्यकता
.add()विधि "किसी भी इंडेक्स में टैब डालने की क्षमता है, न कि केवल अंत में - वर्तमान में चयनित टैब का ट्रैक बनाए रखने और पुन: आरंभीकरण के बाद इसे फिर से चुनने की आवश्यकता है
- यह सुनिश्चित करने की आवश्यकता है कि UI की पूरी श्रृंखला
.tabs()विकल्प उपलब्ध हैं।
बढ़िया, कुछ चुनौतीपूर्ण लिखने का मौका!
थोड़ी देर कोड के साथ खेलने के बाद, मैं आयाइस निष्कर्ष पर कि UI फीडर प्लगइन के लिए पैच या मंकी-पैच की तुलना में "फीडर" (पारंपरिक रूप से "एडेप्टर") पैटर्न अधिक उपयुक्त (और सरल) था और कई पुनरावृत्तियों के बाद मैं एक हल्के jQuery प्लगइन के साथ आया था काम करें :
$.fn["tabsFeeder"] = function(options) {
this.on("addTab", function(event, url, label, index) {
var $that = $(this),
s = $that.data("tabs").options;
$that.tabs("destroy");
try {
var $lis = $that.find("li"),
n = $lis.length;
index = Math.max((index === undefined) ? n : index, 0);
$lis.eq(Math.min(index, n - 1))[(index < n) ? "before" : "after"]("<li><a href="" + url + "">" + label + "</a></li>");
if (s.selected !== undefined && index <= s.selected) {
s.selected += 1;
}
throw ("");
}
catch (e) {
$that.tabs(s);
}
});
this.on("current", function(event, callback) {
$that = $(this);
if ($that.eq(0).length > 0 && typeof callback === "function") {
var ui = {
"tab": $that.find("li.ui-state-active a"),
"panel": $that.find(".ui-tabs-panel").not(".ui-tabs-hide"),
"index": $that.tabs("option", "selected")
};
callback(event, ui);
}
});
this.tabs(options);
};
मेरा विश्वास करो, यह हल्का है।
इस प्लगइन (और jQuery यूआई टैब) के साथ जगह में, लब्बोलुआब यह है कि हम अब कर सकते हैं:
- के साथ टैब आरंभ करें
$("selector").tabsFeeder(options), कहा पेoptionsमानक jQuery यूआई टैब विकल्प हैं - कोई जोड़ नहीं और कोई चूक नहीं - कॉल
$("selector").trigger("addTab", [url, label]);या$("selector").trigger("addTab", [url, label, index]);के बजाय.tabs("add", url, label)या.tabs("add", url, label, index).
और अच्छे उपाय के लिए, मैंने एक को शामिल किया current कस्टम इवेंट वर्तमान में चयनित टैब तक पहुंच प्रदान करने के लिए (टैब मूल घटनाओं के अनुसार "ui" ऑब्जेक्ट के रूप में कॉलबैक फ़ंक्शन पर वितरित किया गया)।
मुझे यकीन नहीं है कि मैं उचित विधि के बजाय एक कस्टम इवेंट हैंडलर के उपयोग को पूरी तरह से सही ठहरा सकता हूं, सिवाय इसके कि प्लग इन:
- लिखना आसान था
- अधिक संक्षिप्त है
- डोम को स्वयं के किसी भी डेटा को लिखने की आवश्यकता नहीं है।
- विधि जंजीर की गारंटी है
आप देख सकते हैं tabsFeeder कार्रवाई में यहाँ
कमियों
इसलिये tabsFeeder पुनर्निमाण पर निर्भर है .tabs(), यह अजाक्स मोड के साथ उपयोग करने के लिए अक्षम और संभवतः अनुपयुक्त है क्योंकि सामग्री को फिर से प्राप्त करने की आवश्यकता हो सकती है - लेकिन हर तरह से प्रयास - प्रदर्शन स्वीकार्य हो सकता है।
"AddTab" ईवेंट हैंडलर UI टैब प्लगइन का उपयोग करता है select वर्तमान टैब को ट्रैक करने के लिए घटना। अनुमति देने के लिए select कॉलबैक विकल्पों में निर्दिष्ट करने के लिए, मैंने एक कॉम्पैक्ट ऑब्जर्वर जैसे पैटर्न का चयन किया, जिसमें फायरिंग ऑर्डर मानक कॉलबैक के रूप में हार्ड कोडित होता है (यदि वर्तमान में) प्लगइन द्वारा पीछा defaultSelect() (एक जावास्क्रिप्ट स्टेटमेंट) जबकि यह तर्कसंगत लगता है और डेमो में ठीक काम करता है, यह पूरी तरह से पता नहीं लगाया गया है और मैं "टी गारंटी दे सकता हूं कि यह सभी अनुप्रयोगों में होगा। आदेश (एबी बनाम बीए) को प्रोग्रामेटिक रूप से स्थापित करने की अनुमति देना संभव होगा, लेकिन यह कोड के लिए थकाऊ होगा और शायद आवश्यक नहीं है।