Dojo Toggle Hide and Show Divs - PullRequest
Новая
       27

Dojo Toggle Hide and Show Divs

14 голосов
/ 01 сентября 2011

Я провел некоторый поиск и получил много смешанных результатов для использования 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");
    }
}

Ответы [ 2 ]

6 голосов
/ 02 сентября 2011

Почему бы вам не использовать 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");
}`

Из справочника dojo :

Функции Toggler.show ()и Toggler.hide () оба возвращают объект анимации для анимации в игре.Этот объект можно использовать для остановки, приостановки, установки текущего местоположения анимации в процентах и ​​получения статуса анимации.

4 голосов
/ 26 мая 2013

Для справки, в dojo 1.7 и выше определение немного отличается (из-за загрузчика AMD).См. Третий пример в справочном руководстве по dojo .

Код в основном: 

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 (см. «toggle-id» в приведенном выше примере кода).

...