[英]Dojo dijit.layout.TabContainer - how to add class to tab?
[英]How do I “get” the ID for a “clicked” tab in a dijit.layout.tabcontainer?
我还没有找到一个明确定义的解决方案。 大多数是不完整的摘要。
这是一个简单的示例。 请参阅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>
我相信dijit.byId('mainTab').selectedChildWidget
应该为您提供对选定选项卡中的小部件的引用(例如,您的ContentPanes之一)。
http://www.dojotoolkit.org/api/dijit/layout/TabContainer.html#selectedChildWidget
您可以使用dojo.connect
附加到TabContainer上的selectChild事件。 就像是
dojo.connect(dijit.byId("mainTab"), "selectChild", function(page){ alert(page.id); });
您也可以通过dojo.subscribe
mainTab-selectChild主题来实现。
这是在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);
});
});
尝试这个:
<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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.