DOJO का उपयोग करके मैं एक संपूर्ण टैबकंटनर को गतिशील रूप से कैसे दिखा और छुपा सकता हूं?

Question

DOJO यहां कुछ quirks लगता है। जब पेज लोड होता है तो मुझे विशेष रूप से टैबकॉन्टेनर छिपाने की आवश्यकता होती है, लेकिन फिर उपयोगकर्ता बटन पर क्लिक करने के बाद दिखाई देता है। पहली चीज मैंने कोशिश की है style.display = "none" को शुरू करने के लिए, और फिर क्लिक ईवेंट पर style.display = "block" सेट करना। दुर्भाग्यवश, यह केवल आंशिक रूप से काम करता है- पृष्ठ सही स्थान/आयामों में एक अदृश्य बॉक्स प्रस्तुत करेगा, लेकिन वास्तविक सामग्री प्रस्तुत नहीं करेगा। बॉक्स की सामग्री केवल कुछ और द्वारा ट्रिगर होने पर प्रदान की जाती है (उदाहरण के लिए, एक अलग एफएफ टैब पर जाकर या फायरबग को निलंबित/फिर से शुरू करने से बॉक्स रेंडर हो जाएगा)।

यदि style.display संपत्ति पृष्ठ लोड पर दिखाई देने वाली है, तो सब कुछ ठीक काम करता है। आप डिस्प्ले प्रॉपर्टी को टॉगल कर सकते हैं और यह टैब कंटेनर को ठीक से दिखाता है या छुपाता है। लेकिन अगर यह पृष्ठ लोड पर "कोई नहीं" पर सेट है, तो यह खराब हो जाता है।

मैंने HTML में style.display प्रॉपर्टी को "" सेट करने के कामकाज की कोशिश की लेकिन फिर इसे जावास्क्रिप्ट में "none" पर सेट कर दिया, लेकिन यह अभी भी विफल रहता है- परिवर्तन बहुत जल्द होता है और इसे होने की आवश्यकता होती है टैबकंटनर प्रस्तुत करता है (जो एक या दो ले सकता है)।

कुछ छीन लिया नमूना कोड:

HTML:
<div id="tabContainer" dojoType="dijit.layout.TabContainer" style="width:500px; height:100px;display:none;">
</div>

और फिर जावास्क्रिप्ट एक उपयोगकर्ता क्लिक पर टैब को दिखाने के लिए:

function initTabs() 
{ 
var tabContainer = dojo.byId('tabContainer'); 
tabContainer.style.display = 'block'; 
} 

मैं कैसे कर सकता है दिखाए गए राज्य में शुरू किए बिना टैबकॉन्टेनर को गतिशील रूप से दिखाएं/छुपाएं?

Answer 1

आप मैं इस समस्या का समाधान नहीं करना चाहिए

dijit.byId("tabContainer").domNode.style.display = 'block' 

या शायद

dijit.byId("tabContainer").domNode.style.visibility = 'hidden'; 

भी बेहतर है

Answer 2

ठीक है, है, लेकिन मैं एक समाधान के साथ आया था ... बनाना क्लिक ईवेंट पर टैबकॉन्टेनर, इसे पृष्ठ लोड पर छिपाने के बजाय और फिर इसे क्लिक ईवेंट पर दिखाए जाने के बजाय।

HTML:

<div id="tabContainer">  
</div> 

जे एस:

var tabContainer = new dijit.layout.TabContainer({id:"tabContainer", style:"width:500px;height:200px;"}, dojo.byId('tabContainer')); 
//add tabs 
tabContainer.startup(); 

Answer 3

आप प्रदर्शन सेट करने के बाद: ब्लॉक ऐसा करते हैं:

dijit.byId('tabContainer').resize(); 

dijit.layout विगेट्स अक्सर खुद बाहर ठीक से रखना नहीं है यदि वे प्रदर्शित होते हैं: कोई नहीं (और कभी-कभी जब दृश्यता: छुपा)। जब तक आप यह पता नहीं लगाते कि क्या काम करता है, आपको फायरबग में चारों ओर घूमना होगा!

Answer 4

इसके लिए समाधान है। आप TabContainer CALLL दिखाना चाहते हैं:

dijit.byId("tabContainer").domNode.style.display = 'block'; 
dijit.byId("tabContainer").resize(); 

और 'कोई नहीं' का उपयोग करता है, तो आप TabContainer छुपाना चाहते हैं।

यह मेरे लिए काम करता है, लेकिन यह सच है, यह स्पष्ट नहीं है :)

Answer 5

पहली बात (style.display = "none" की स्थापना) सही है।

के स्थान में ... तो style.display = "ब्लॉक"

तुम सिर्फ बुलाना चाहिए ajax TabContainer जब "... उपयोगकर्ता एक बटन क्लिक करता है" के .set_visible जे एस विधि की स्थापना, की तरह :

$find('<%= Tabs.ClientID %>').set_visible(true); 

Answer 6

पुराना धागा लेकिन मुझे इसी मुद्दे का अनुभव हुआ और इस तरह मैंने इसे हल किया। सबसे पहले, आप डिस्प्ले का उपयोग नहीं कर सकते: कोई नहीं। डीओजेओ में लोगों के अनुसार, आपको दृश्यता का उपयोग करना होगा: दिग्गजों से छिपा हुआ है या यह काम नहीं करेगा। तो, आप इस हैं:

<div id="tabContainer" dojoType="dijit.layout.TabContainer" style="width:500px; height:100px;visibility:hidden;"> 

फिर, इस दिखाने के लिए आप निम्न करें:

dojo.style("tabContainer", "visibility", "visible"); 

अब, समस्या यह बना हुआ है कि क्या आप पहले से ही पता चला है। यह आपके व्यूपोर्ट में एक अदृश्य div है जो 500px चौड़ा है। तो यदि आप सीमावर्ती का उपयोग कर रहे हैं, तो आपके पृष्ठ में यह खाली 500px अंतर होगा। इसे हल करने के लिए, मुझे अपने दिग्गज को प्रोग्रामिक रूप से बनाना था और उन्हें आपके द्वारा किए गए कार्यों के बजाए एक खाली div में इंजेक्ट करना था और इसे घोषणात्मक रूप से करना था। उम्मीद है कि इससे वहां किसी को मदद मिलेगी।

Answer 7

मैंने स्टाइल डिस्प्ले सेट करने के बाद इसका इस्तेमाल किया: ब्लॉक और यह बहुत अच्छा काम करता है! इस तरह आपको आकार बदलने के लिए कंटेनर की आईडी जानने की आवश्यकता नहीं है।

this.getParent().resize();

Answer 8

आप dijit.byId ("tabContainer")) का उपयोग करते हैं आकार बदलने (।; जब आप इसे ब्लॉक करने के लिए डिस्प्ले सेट करते हैं तो टैब हेडर वापस लाएगा।

यदि आप दृश्यता का उपयोग करते हैं तो आप थोड़ी-थोड़ी जावास्क्रिप्ट सहेज लेंगे: छुपा; (हालांकि टैबकंटनर अभी भी पृष्ठ पर स्थान लेगा)

एक और विकल्प जो मैं अक्सर उपयोग करता हूं डिस्प्ले: कोई भी/ब्लॉक नहीं है; मैं ऊंचाई का उपयोग करता हूं: 0px/auto;

आप स्थिति को पूर्ण रूप से भी स्विच कर सकते हैं और कहीं भी ऑफ स्क्रीन के लिए निर्देशांक सेट कर सकते हैं। यद्यपि ऊंचाई को करने के बजाय इसके लिए बहुत अधिक सीएसएस परिवर्तन की आवश्यकता है। यह मेरी पसंदीदा विधि है अगर यह मेरी स्थिति में काम करता है।

इन समाधानों के बीच उम्मीद है कि कोई आपके लिए काम करेगा।

Answer 9

Dojo 1.10 के साथ सफलतापूर्वक परीक्षण किया गया। "Dijit.byId()" के बजाय रजिस्ट्री का प्रयोग करें। विधि आकार बदलें() केवल dijit.layout.BorderContainer पर काम करता है।

define([ 
    "dijit/registry" // registry 
], function(registry) { 

    var show = true; 

    if (show) { 
     domStyle.set(registry.byId("dijitLayoutContentPane").domNode, {'display': 'block'}); 
     registry.byId("dijitLayoutBorderContainer").resize(); 
    } else { 
     domStyle.set(registry.byId("dijitLayoutContentPane").domNode, {'display': 'none'}); 
     registry.byId("dijitLayoutBorderContainer").resize(); 
    } 

}