Làm cách nào để tự động hiển thị và ẩn toàn bộ TabContainer bằng DOJO?

Question

DOJO dường như có một số quirks ở đây. Tôi đặc biệt cần phải có TabContainer ẩn khi tải trang, nhưng sau đó trở nên có thể nhìn thấy sau khi người dùng nhấp vào một nút. Điều đầu tiên tôi đã thử là thiết lập style.display = "none" để bắt đầu, và sau đó thiết lập style.display = "block" trên sự kiện click. Thật không may, điều này chỉ hoạt động một phần - trang sẽ hiển thị một hộp vô hình ở đúng vị trí/kích thước, nhưng không hiển thị nội dung thực tế. Nội dung của hộp chỉ được hiển thị khi được kích hoạt bởi một thứ khác (ví dụ: chuyển đến tab FF khác hoặc tạm dừng/tiếp tục lại firebug sẽ làm cho hộp hiển thị).

Nếu thuộc tính style.display được đặt thành hiển thị khi tải trang, mọi thứ đều hoạt động tốt. Bạn có thể chuyển đổi thuộc tính hiển thị và nó hiển thị hoặc ẩn tabcontainer đúng cách. Nhưng nếu nó được đặt thành "không" khi tải trang, nó sẽ bị hỏng.

Tôi đã thử giải pháp thiết lập thuộc tính style.display thành "" trong HTML nhưng sau đó ngay lập tức đặt nó thành "none" trong Javascript, nhưng vẫn không thành công - thay đổi xảy ra quá sớm và nó cần phải xảy ra sau tabcontainer hiển thị (có thể mất một hoặc hai giây).

Một số mẫu mã tước:

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

và sau đó Javascript để hiển thị các tab trên một người dùng nhấp:

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

Làm thế nào tôi có thể tự động hiển thị/ẩn một TabContainer mà không cần nó bắt đầu trong trạng thái hiển thị?

Answer 1

bạn nên làm

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

hoặc có lẽ

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

thậm chí còn tốt hơn

Answer 2

Vâng, tôi đã không giải quyết vấn đề này, nhưng tôi đã đưa ra một cách giải quyết ... Tạo TabContainer trên sự kiện nhấp chuột, thay vì tạo nó ẩn trên tải trang và sau đó hiển thị nó trên sự kiện nhấp chuột.

HTML:

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

JS:

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

Answer 3

Sau khi bạn đặt display: block làm điều này: widget

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

dijit.layout thường không lay mình ra đúng cách nếu chúng được hiển thị: không có (và đôi khi ngay cả khi hiển thị: ẩn). Bạn phải fiddle xung quanh trong Firebug cho đến khi bạn tìm ra những gì làm việc!

Answer 4

Có giải pháp cho việc này. Nếu bạn muốn hiển thị TabContainer calll:

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

và sử dụng 'không có' nếu bạn muốn ẩn TabContainer.

này làm việc cho tôi, nhưng đó là sự thật, nó không phải là rõ ràng :)

Answer 5

Điều đầu tiên (thiết style.display = "none") là đúng. Thay vì

... sau đó thiết lập style.display = "block"

bạn nên chỉ cần gọi .set_visible phương pháp JS của TabContainer ajax khi "... người dùng nhấp vào một nút", như :

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

Answer 6

Chủ đề cũ nhưng tôi gặp phải sự cố tương tự và đây là cách tôi giải quyết vấn đề này. Đầu tiên, bạn không thể sử dụng display: none. Mỗi người ở DOJO, bạn phải sử dụng khả năng hiển thị: ẩn với dijits hoặc điều này sẽ không hoạt động. Vì vậy, bạn muốn điều này:

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

Sau đó, để hiển thị này bạn làm như sau:

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

Bây giờ, vấn đề này đặt ra là những gì bạn đã phát hiện ra. Điều này dự trữ div ẩn mặt trong chế độ xem của bạn rộng 500px. Vì vậy, nếu bạn đang sử dụng một bordercontainer, sẽ có khoảng trống 500px trống trong trang của bạn. Để giải quyết vấn đề này, tôi phải tạo các dijits của mình một cách có lập trình và tiêm chúng vào một div trống, thay vì làm những gì bạn đã làm và làm theo cách khai báo. Hy vọng điều này sẽ giúp ai đó ra khỏi đó.

Answer 7

Tôi đã sử dụng tính năng này sau khi đặt hiển thị kiểu: chặn và nó hoạt động tuyệt vời! Bằng cách này, bạn không cần biết ID của vùng chứa để thay đổi kích thước.

this.getParent().resize();

Answer 8

Nếu bạn sử dụng dijit.byId ("TabContainer") thay đổi kích thước(). sau khi bạn đặt màn hình để chặn nó sẽ mang lại các tiêu đề tab.

Bạn sẽ lưu một chút javascript nếu bạn chỉ sử dụng khả năng hiển thị: bị ẩn; (mặc dù tabContainer sẽ vẫn chiếm dung lượng trên trang)

Một cách thay thế khác mà tôi sử dụng khá thường xuyên thay vì display: none/block; Tôi sử dụng chiều cao: 0px/tự động;

Bạn cũng có thể chuyển vị trí thành tuyệt đối và đặt tọa độ cho màn hình tắt ở đâu đó. Đó là đòi hỏi nhiều thay đổi css hơn chỉ đơn giản là làm chiều cao mặc dù. Đó là phương pháp ưa thích của tôi nếu nó hoạt động trong tình huống của tôi.

Giữa các giải pháp này hy vọng một người sẽ làm việc cho bạn.

Answer 9

Đã thử nghiệm thành công với Dojo 1.10. Sử dụng đăng ký thay vì "dijit.byId()". Phương pháp đổi kích thước() chỉ hoạt động trên 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(); 
    } 

}