如何在dijit.layout.tabcontainer中“獲取”“單擊”選項卡的ID？

Question

我還沒有找到一個明確定義的解決方案。 大多數是不完整的摘要。

這是一個簡單的示例。 請參閱doSomething（）注釋：

<head>
    <style type="text/css">
        body, html { font-family:helvetica,arial,sans-serif; font-size:90%; }
    </style>
    <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.5/dijit/themes/claro/claro.css"/>
    <script src="http://ajax.googleapis.com/ajax/libs/dojo/1.5/dojo/dojo.xd.js"
    djConfig="parseOnLoad: true">
    </script>
    <script type="text/javascript">
        dojo.require("dijit.layout.TabContainer");
        dojo.require("dijit.layout.ContentPane");

    function doSomething() {
        //Put code in here that identifies the clicked tab and displays it's id in the below alert
        alert("Hello World!");
    }   

    </script>

</head>

<body class=" claro ">
    <div id="mainTab" dojoType="dijit.layout.TabContainer" style="width: 400px; height: 100px;" onClick="doSomething();">
        <div id="tab1" dojoType="dijit.layout.ContentPane" title="My first tab" selected="true">
            Lorem ipsum and all around...
        </div>
        <div id="tab2" dojoType="dijit.layout.ContentPane" title="My second tab">
            Lorem ipsum and all around - second...
        </div>
        <div id="tab3" dojoType="dijit.layout.ContentPane" title="My last tab">
            Lorem ipsum and all around - last...
        </div>
    </div>
</body>

Answer 1

我相信dijit.byId('mainTab').selectedChildWidget應該為您提供對選定選項卡中的小部件的引用（例如，您的ContentPanes之一）。

http://www.dojotoolkit.org/api/dijit/layout/TabContainer.html#selectedChildWidget

Answer 2

您可以使用dojo.connect附加到TabContainer上的selectChild事件。 就像是

dojo.connect(dijit.byId("mainTab"), "selectChild", function(page){ alert(page.id); });

您也可以通過dojo.subscribe mainTab-selectChild主題來實現。

Answer 3

這是在Dojo 1.8中工作的完整代碼示例，我已經對其進行了測試：

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

Answer 4

嘗試這個：

<head>
    <style type="text/css">
        body, html { font-family:helvetica,arial,sans-serif; font-size:90%; }
    </style>
    <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.5/dijit/themes/claro/claro.css"/>
    <script src="http://ajax.googleapis.com/ajax/libs/dojo/1.5/dojo/dojo.xd.js" djConfig="parseOnLoad: true">
    </script>
    <script type="text/javascript">
        dojo.require("dijit.layout.TabContainer");
        dojo.require("dijit.layout.ContentPane");
        dojo.require("dojo.NodeList-traverse");

    function doSomething(e) {
        var tab = dojo.query(e.target).parents('.dijitTab')[0];
        if (tab) {
            alert(tab.getAttribute('widgetId'));
        }
    }   

    </script>

</head>

<body class=" claro ">
    <div id="mainTab" dojoType="dijit.layout.TabContainer" style="width: 400px; height: 100px;" onClick="doSomething">
        <div id="tab1" dojoType="dijit.layout.ContentPane" title="My first tab" selected="true">
            Lorem ipsum and all around...
        </div>
        <div id="tab2" dojoType="dijit.layout.ContentPane" title="My second tab">
            Lorem ipsum and all around - second...
        </div>
        <div id="tab3" dojoType="dijit.layout.ContentPane" title="My last tab">
            Lorem ipsum and all around - last...
        </div>
    </div>
</body>

如何在dijit.layout.tabcontainer中“獲取”“單擊”選項卡的ID？

問題描述

4 個解決方案

解決方案1
5 2010-08-16 04:53:08

解決方案2
4 2010-08-09 14:51:34

解決方案3
1 2013-02-21 07:28:55

解決方案4
0 2010-08-04 21:13:11

如何在dijit.layout.tabcontainer中“獲取”“單擊”選項卡的ID？

問題描述

4 個解決方案

解決方案1 5 2010-08-16 04:53:08

解決方案2 4 2010-08-09 14:51:34

解決方案3 1 2013-02-21 07:28:55

解決方案4 0 2010-08-04 21:13:11

解決方案1
5 2010-08-16 04:53:08

解決方案2
4 2010-08-09 14:51:34

解決方案3
1 2013-02-21 07:28:55

解決方案4
0 2010-08-04 21:13:11