Dojo Toggle Ẩn và Hiện Divs

Question

Tôi đã thực hiện một số tìm kiếm và đưa ra nhiều kết quả hỗn hợp để sử dụng Dojo để chuyển đổi các div hiển thị so với ẩn.

• Một số sử dụng dojo.style mà có vẻ như có thể đã bị thay thế bởi dojo.fx
• Một số sử dụng dijit nhưng như vậy không thể truy cập vào một nút DOM.
• Một số làm cho sử dụng show() và hide()
• Một số thay đổi CSS

tôi dường như không thể nhận được bất kỳ trong số họ để làm việc.

Ai đó có thể vui lòng chỉ cho tôi hướng tới một walkthru cập nhật về điều này.

---

giải quyết

sử dụng một sự kết hợp các nội dung sau ...

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

và để chuyển đổi nó

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"); 
    } 
} 

Answer 1

Tại sao bạn không sử dụng 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"); 
}` 

Từ võ đường reference-guide:

Các chức năng Toggler.show() và Toggler.hide() cả hai trả lại đối tượng hoạt hình cho hình ảnh động trong vở kịch. Đối tượng này có thể được sử dụng để dừng, tạm dừng, đặt vị trí hoạt ảnh hiện tại là ‘phần trăm’ và nhận trạng thái của hoạt ảnh.

Answer 2

Để tham khảo, trong dojo 1.7 và lên định nghĩa hơi khác (do bộ tải AMD). Xem ví dụ thứ ba trong dojo reference guide.

Mã này về cơ bản là:

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(); 
    }); 
}); 

nơi showFunc và hideFunc là chức năng hoạt hình tùy chỉnh mà không chỉ hiển thị/ẩn các nút mà còn expand/collapse chiều cao của họ. Lưu ý, nếu hiển thị/ẩn một dijit phụ tùng id Toggle nên là mẹ của id phụ tùng, ví dụ:

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

nơi textarea-id là id truyền như srcNodeRef khi tạo một widget dijit, như ComboBox hoặc TextArea , với toán tử new (xem "toggle-id" trong ví dụ mã ở trên).