8

DOJO にはいくつかの癖があるようです。特に、ページの読み込み時に TabContainer を非表示にする必要がありますが、ユーザーがボタンをクリックすると表示されるようになります。私が最初に試したのは、style.display = "none" を設定して開始し、次にクリックイベントで style.display = "block" を設定することです。残念ながら、これは部分的にしか機能しません。ページは目に見えないボックスを適切な場所/寸法にレンダリングしますが、実際のコンテンツはレンダリングしません。ボックスの内容は、他の何かによってトリガーされた場合にのみレンダリングされます (たとえば、別の FF タブに移動するか、firebug を一時停止/再開すると、ボックスがレンダリングされます)。

style.display プロパティがページの読み込み時に表示されるように設定されている場合、すべてが正常に機能します。表示プロパティを切り替えると、タブコンテナを適切に表示または非表示にできます。しかし、ページの読み込み時に「なし」に設定されていると、うまくいきません。

HTML で style.display プロパティを "" に設定し、すぐに Javascript で "none" に設定するという回避策を試みましたが、それでも失敗します。これには 1 ～ 2 秒かかる場合があります)。

一部のサンプルコードを削除:

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

次に、ユーザーがクリックしたときにタブを表示するJavascript： 

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

表示された状態で開始せずに TabContainer を動的に表示/非表示にするにはどうすればよいですか?

4

9 に答える 9

9

これには解決策があります。TabContainer calll を表示する場合:

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

TabContainer を非表示にする場合は、「none」を使用します。

これは私にとってはうまくいきますが、それは真実です。明らかではありません:)

于 2009-09-02T07:11:59.150 に答える
6

古いスレッドですが、これと同じ問題が発生しました。これが解決方法です。まず、display:none は使用できません。DOJO の関係者によると、dijit で visibility:hidden を使用する必要があります。そうしないと機能しません。だから、あなたはこれが欲しい：

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

次に、これを表示するには、次のようにします。

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

さて、これがもたらす問題は、あなたがすでに発見したことです。これにより、500px 幅の非表示の div がビューポートに予約されます。したがって、bordercontainer を使用している場合は、ページに 500 ピクセルの空白のギャップが生じます。これを解決するには、自分が行ったことを宣言的に行うのではなく、プログラムで dijit を作成し、それらを空の div に挿入する必要がありました。これが誰かを助けることを願っています。

于 2011-06-21T19:28:22.537 に答える
1

まあ、私はこの問題を解決しませんでしたが、回避策を思いつきました...ページの読み込み時に非表示にしてからクリックイベントに表示するのではなく、クリックイベントでTabContainerを作成します。

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();
于 2009-08-11T20:04:04.713 に答える
1

display:block を設定したら、次のようにします。

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

dijit.layout ウィジェットは、display:none の場合 (visibility:hidden の場合も)、適切にレイアウトされないことがよくあります。何が機能するかを理解するまで、Firebug をいじる必要があります。

于 2009-08-11T21:39:29.123 に答える
0

最初のこと（設定style.display = "none"）は正しいです。代わりに

...次にstyle.display="block"を設定します

.set_visible「...ユーザーがボタンをクリックする」ときは、次のようにajaxTabContainerのJSメソッドを呼び出す必要があります。

$find('<%= Tabs.ClientID %>').set_visible(true);
于 2009-09-06T17:32:56.567 に答える
0

スタイルdisplay:blockを設定した後にこれを使用しましたが、うまく機能します! この方法では、サイズ変更するコンテナーの ID を知る必要はありません。

this.getParent().resize();

于 2012-06-28T21:32:11.757 に答える