Dojo Скрыть и показать Divs

Я сделал несколько поисков и придумал много смешанных результатов для использования Dojo для переключения divs, показывающих vs hidden.

  • Некоторые используют dojo.style, который, по-видимому, был заменен на dojo.fx
  • Некоторые используют dijit, но не могут получить доступ к DOM node.
  • Некоторые используют show() и hide()
  • Некоторые изменения CSS

Кажется, я не могу заставить их работать.

Может кто-нибудь, пожалуйста, назовите меня в отношении современной walkthru на этом.

решаемые

Используется комбинация следующих...

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

ОТВЕТЫ

Ответ 1

Почему вы не используете 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 reference-guide:

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

Ответ 2

Для справки, в 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 - это пользовательские функции анимации, которые не только отображают/скрывают node, но также расширяют/сворачивают их высоту. Обратите внимание, что при отображении/скрытии виджета dijit идентификатор переключения должен быть родителем идентификатора виджета, например:

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

где textarea-id - это идентификатор, передаваемый как srcNodeRef при создании виджета dijit, такого как ComboBox или TextArea, с оператором new (см. "toggle-id" в примере кода выше).