tabbedpanel用法

声名：转自：http://jiake.iteye.com/blog/271270

1.多个tab 如何选中某一个:
<script type="text/javascript">
function selectTab(id) {
var tabContainer = dojo.widget.byId("tabContainer");
tabContainer.selectTab(id);
}
</script>
<sx:tabbedpanel id="tabContainer">
<sx:div label="Tab 1" id="tab1">
Local Tab 1
</sx:div>
<sx:div label="Tab 2" id="tab2">
Local Tab 2
</sx:div>
</sx:tabbedpanel>

<input type="button" οnclick="selectTab('tab1')" value="Select tab 1" />
<input type="button" οnclick="selectTab('tab2')" value="Select tab 2" />

2.选中 tab 触发事件
<script type="text/javascript">
dojo.event.topic.subscribe('/before', function(event, tab, tabContainer) {
alert("Before selecting tab");
});

dojo.event.topic.subscribe('/after', function(tab, tabContainer) {
alert("After tab was selected");
});
</script>
<sx:tabbedpanel beforeSelectTabNotifyTopics="/before" afterSelectTabNotifyTopics="/after" id="tabContainer">
<sx:div label="Tab 1">
Local Tab 1
</sx:div>
<sx:div label="Tab 2">
Local Tab 2
</sx:div>
</sx:tabbedpanel>

3.多个 tab ，设置可关闭：
<sx:tabbedpanel id="tabContainer">
<sx:div label="Tab 1" >
Local Tab 1
</sx:div>
<sx:div label="Tab 2" closable="true">
Local Tab 2
</sx:div>
</sx:tabbedpanel>

4.设置 tab 位置(可选项:can be: top, right, bottom, left)
<sx:tabbedpanel labelposition="bottom" id="tabContainer">
<sx:div label="Tab 1" >
Local Tab 1
</sx:div>
<sx:div label="Tab 2" >
Local Tab 2
</sx:div>
</sx:tabbedpanel>

5.用javascript 决择哪个tab 可用或不可用
script type="text/javascript">
function enableTab(param) {
var tabContainer = dojo.widget.byId('tabContainer');
tabContainer.enableTab(param);
}


function disableTab(param) {
var tabContainer = dojo.widget.byId('tabContainer');
tabContainer.disableTab(param);
}
</script>

<sx:tabbedpanel id="tabContainer" id="tabContainer">
<sx:div id="tab1" label="Tab 1">
Local Tab 1
</sx:div>
<sx:div id="tab2" label="Tab 2" disabled="true">
Local Tab 2
</sx:div>
</sx:tabbedpanel>

<!-- By Tab Index -->
<input type="button" οnclick="enableTab(1)" value="Enable Tab 2 using Index" />
<input type="button" οnclick="disableTab(1)" value="Disable Tab 2 using Index" />

<!-- By Tab Id -->
<input type="button" οnclick="enableTab('tab2')" value="Enable Tab 2 using Id" />
<input type="button" οnclick="disableTab('tab2')" value="Disable Tab 2 using Id" />

<!-- By Widget -->
<input type="button" οnclick="enableTab(dojo.widget.byId('tab2'))" value="Enable Tab 2 using widget" />
<input type="button" οnclick="disableTab(dojo.widget.byId('tab2'))" value="Disable Tab 2 using widget" />