2011-09-01 14 views
14

मैंने कुछ खोज की है और छिपे हुए दिखाए गए divs को टॉगल करने के लिए डोजो का उपयोग करने के लिए बहुत सारे मिश्रित परिणामों के साथ आना है।डोजो टॉगल छुपाएं और दिखाएं

  • कुछ उपयोग dojo.style जो ऐसा हो सकता है dojo.fx
  • कुछ उपयोग dijit ने ले ली है दिखता है, लेकिन इस तरह एक डोम नोड उपयोग नहीं कर सकते।
  • show() और hide()
  • में से कुछ कर उपयोग कुछ सीएसएस

मैं उनमें से किसी को काम करने के लिए प्राप्त करने के लिए नहीं कर पा रहे बदल जाते हैं।

क्या कोई मुझे इस पर एक अद्यतित walkthru की ओर इंगित कर सकता है।


हल

निम्नलिखित ...

dojo.addOnLoad(function() { 
     dojo.style(dojo.byId('myDiv'), "display", "none"); 
}); 

का एक संयोजन का इस्तेमाल किया और चालू करने के लिए यह

function toggleDivs(){ 
    if( dojo.style(dojo.byId('myDiv'), "display") == "none"){ 
     dojo.style(dojo.byId('myDiv'), "display", "block"); 
     dojo.style(dojo.byId('myDiv2'), "display", "none"); 
    } else { 
     dojo.style(dojo.byId('myDiv'), "display", "none"); 
     dojo.style(dojo.byId('myDiv2'), "display", "block"); 
    } 
} 
+2

इसे पूरा करने का कुछ आसान तरीका "प्रदर्शन: कोई नहीं" के साथ एक सीएसएस क्लास बनाना और स्वचालित toggling करने के लिए dojo.toggleClass को कॉल करना हो सकता है। –

उत्तर

6

आप dojo.fx.Toggler का उपयोग क्यों नहीं करते हैं?

var toggler = new dojo.fx.Toggler({ 

     node: "basicNode" 

    }); 

    dojo.connect(dijit.byId("showButton"), "onClick", toggler, "show"); 
    dojo.connect(dijit.byId("hideButton"), "onClick", toggler, "hide"); 
}` 

डोजो reference-guide से:

कार्यों Toggler.show() और Toggler.hide() दोनों खेलने में एनीमेशन के लिए लौट एनीमेशन वस्तु। इस ऑब्जेक्ट का उपयोग मौजूदा एनीमेशन स्थान 'प्रतिशत' को रोकने, रोकने, सेट करने और एनीमेशन की स्थिति प्राप्त करने के लिए किया जा सकता है।

4

संदर्भ के लिए, डोजो 1.7 में और परिभाषा थोड़ा अलग है (एएमडी लोडर की वजह से)। dojo reference guide में तीसरा उदाहरण देखें।

कोड मूल रूप से है:

require(["dojo/fx/Toggler", "dojo/fx", "dojo/dom", "dojo/on", "dojo/domReady!"], 
function(Toggler, coreFx, dom, on){ 
    var toggler = new Toggler({ 
    node: "toggle-id", 
    showFunc: coreFx.wipeIn, 
    hideFunc: coreFx.wipeOut 
    }); 
    on(dom.byId("hideButton"), "click", function(e){ 
    toggler.hide(); 
    }); 
    on(dom.byId("showButton"), "click", function(e){ 
    toggler.show(); 
    }); 
}); 

जहां showFunc और hideFunc जो न केवल शो/नोड को छिपाने लेकिन यह भी विस्तार/उनकी ऊंचाई पतन कस्टम एनिमेशन कार्य हैं। ध्यान दें, कि यदि दिखा/एक dijit छुपा विजेट टॉगल आईडी विजेट आईडी की मूल होना चाहिए, उदाहरण के लिए:

<div id="toggle-id"><div id="textarea-id"></div></div> 

जहां textarea-id आईडी srcNodeRef के रूप में पारित हो जाता है जब एक dijit विजेट बनाने ComboBox या TextArea की तरह, , ऑपरेटर new के साथ (उपरोक्त कोड उदाहरण में "टॉगल-आईडी" देखें)।