dojo TabContainer有一个在切换标签时触发的事件吗？

Question

DOJO TabContainer是否有在切换选项卡时触发的事件？

我想它应该有，但是我在文档中找不到相关内容。 :(

解决方案：看起来我在这里找到了一个解决方案：

Dijit TabContainer Events - onFocus

不是最容易搜索的主题标题 :/

- Greg

Answer 1

将aspect.after连接到TabContainer的selectChild方法:

var tabContainer1 = registry.byId("tabContainer1");

aspect.after(tabContainer1, "selectChild", function() {
    console.log("tab changed");        
});

如果你对特定的选项卡感兴趣，可以连接到其ContentPane的_onShow事件：

var contentPane1 = registry.byId("contentPane1");

aspect.after(contentPane1, "_onShow", function() {
    console.log("[first] tab selected");        
});

在jsFiddle上查看实现效果：http://jsfiddle.net/phusick/Mdh4w/

- phusick

---

啊，实际上我使用的是dojo 1.61版本，但aspect直到1.7版本才被引入。不过我已经找到了一个使用_transition事件的解决方案。8小时后我会发布它。 - Greg

自从Dojo诞生以来，Aspect就一直存在，只需使用dojo.connect而不是aspect.after即可。它们是相同的。 - phusick

啊，dojo.connect可用了。dojo.require("dojo.aspect")直到1.7版本才被支持。 - Greg

Answer 2

来自于文档：

var tabs = registry.byId('someTabs');
tabs.watch("selectedChildWidget", function(name, oval, nval){
    console.log("selected child changed from ", oval, " to ", nval);
});

- denov

Answer 3

除了 @phusick 的答案，所有的 StackContainer，包括 TabContainer 都发布主题，您可以订阅。

http://dojotoolkit.org/reference-guide/1.7/dijit/layout/StackContainer.html#published-topics

[widgetId]-addChild,
[widgetId]-removeChild
[widgetId]-selectChild

http://dojotoolkit.org/reference-guide/1.7/dojo/subscribe.html#dojo-subscribe

- Craig Swing

---

是的，我刚刚在查看StackContainer::selectChild方法的源代码时感到非常惊讶，因为看到了topic.publish(this.id+"-selectChild", page)。 - phusick

Answer 4

这是一个完整的代码示例，适用于Dojo 1.8，我已经测试过了。它不是在切换选项卡时触发的事件，我无法让他们API中的任何事件触发，但至少它可以在单击事件上工作。

require(["dijit/registry",  "dojo/on", "dojo/ready", "dojo/domReady!"], function (registry, on, ready) {
    ready(function () { //wait till dom is parsed into dijits
        var panel = registry.byId('mainTab');   //get dijit from its source dom element
        on(panel, "Click", function (event) {   //for some reason onClick event doesn't work 
            $('.hidden_field_id').val(panel.selectedChildWidget.id);  //on click, save the selected child to a hidden field somewhere. this $ is jquery, just change it to 'dojo.query()'
        });
    });
});

//include this function if you want to reselect the tab on page load after a postback
require(["dijit/registry", "dojo/ready", "dojo/domReady!"], function (registry, ready) {
    ready(function () {
        var tabId = $('.hidden_field_id').val();
        if (tabId == null || tabId == "")
            return;
        var panel = registry.byId('mainTab');
        var tab = registry.byId(tabId);
        panel.selectChild(tab);
    });
});

- Richard