web-dev-qa-db-ja.com

Dojo Toggle Hide and Show Divs

私はいくつかの検索を行い、Dojoを使用してdivの表示と非表示を切り替えるためのさまざまな結果を考え出しました。

  • _dojo.style_に置き換えられたように見える_dojo.fx_を使用するものもあります
  • dijitを使用するものもありますが、DOMノードにアクセスできません。
  • show()とhide()を利用するものもあります
  • CSSを変更するものもあります

私はそれらのどれも動作させることができないようです。

誰かが私にこれに関する最新のウォークスルーを教えてもらえますか？.

解決済み

以下の組み合わせを使用しました...

_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");
    }
}
_
togglevisibilitydojo
15
ZMorek

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

道場から リファレンスガイド ：

関数Toggler.show（）とToggler.hide（）はどちらも、再生中のアニメーションのアニメーションオブジェクトを返します。このオブジェクトを使用して、停止、一時停止、現在のアニメーションの場所の「パーセンテージ」の設定、およびアニメーションのステータスの取得を行うことができます。

6
sica07

参考までに、dojo 1.7以降では、定義が少し異なります（AMDローダーのため）。 dojoリファレンスガイド の3番目の例を参照してください。

コードは基本的に次のとおりです。

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ウィジェットを表示/非表示にする場合、トグルIDはウィジェットIDの親である必要があることに注意してください。次に例を示します。

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

どこ textarea-idは、ComboBoxやTextAreaなどのdijitウィジェットを演算子srcNodeRefで作成するときにnewとして渡されるIDです（上記のコード例の「toggle-id」を参照）。

4
Greg