THIS IS A TEST INSTANCE. ALL YOUR CHANGES WILL BE LOST!!!!
...
Local Tabs
Code Block | ||||
---|---|---|---|---|
| ||||
<sx:tabbedpanel>tabbedpanel id="tabContainer"> <sx:div label="Tab 1" > Local Tab 1 </sx:div> <sx:div label="Tab 2" > Local Tab 2 </sx:div> </sx:tabbedpanel> |
Local and remote tabs
Code Block | ||||
---|---|---|---|---|
| ||||
<sx:tabbedpanel>tabbedpanel id="tabContainer"> <sx:div label="Local Tab 1" > Tab 1 </sx:div> <sx:div label="Remote Tab 2" href="%{#url}"> Remote Tab 2 </sx:div> </sx:tabbedpanel> |
...
Code Block | ||||
---|---|---|---|---|
| ||||
<sx:tabbedpanel cssStyle="width: 500px; height: 300px;" doLayout="true" id="tabContainer"> <sx:div label="Tab 1" > Local Tab 1 </sx:div> <sx:div label="Tab 2" > Local Tab 2 </sx:div> </sx:tabbedpanel> |
Do not load tab 2 when page loads (it will be loaded when selected)
Code Block | ||||
---|---|---|---|---|
| ||||
<sx:tabbedpanel>tabbedpanel id="tabContainer"> <sx:div label="Remote Tab 1" href="%{#url}"> Remote Tab 1 </sx:div> <sx:div label="Remote Tab 2" href="%{#url}" preload="false"> Remote Tab 1 </sx:div> </sx:tabbedpanel> |
Reload tabs content when selected
Code Block | ||||
---|---|---|---|---|
| ||||
<sx:tabbedpanel>tabbedpanel id="tabContainer"> <sx:div label="Remote Tab 1" href="%{#url}" refreshOnShow="true"> Remote Tab 1 </sx:div> <sx:div label="Remote Tab 2" href="%{#url}" refreshOnShow="true"> Remote Tab 2 </sx:div> </sx:tabbedpanel> |
Disabled tabs
Code Block | ||||
---|---|---|---|---|
| ||||
<sx:tabbedpanel>tabbedpanel id="tabContainer"> <sx:div label="Tab 1" > Local Tab 1 </sx:div> <sx:div label="Tab 2" disabled="true"> Local Tab 2 </sx:div> </sx:tabbedpanel> |
...
Code Block | ||||
---|---|---|---|---|
| ||||
<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" onclick="enableTab(1)" value="Enable Tab 2 using Index" /> <input type="button" onclick="disableTab(1)" value="Disable Tab 2 using Index" /> <!-- By Tab Id --> <input type="button" onclick="enableTab('tab2')" value="Enable Tab 2 using Id" /> <input type="button" onclick="disableTab('tab2')" value="Disable Tab 2 using Id" /> <!-- By Widget --> <input type="button" onclick="enableTab(dojo.widget.byId('tab2'))" value="Enable Tab 2 using widget" /> <input type="button" onclick="disableTab(dojo.widget.byId('tab2'))" value="Disable Tab 2 using widget" /> |
...
Code Block | ||||
---|---|---|---|---|
| ||||
<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>
|
Allow tab 2 to be removed(closed)
Code Block | ||||
---|---|---|---|---|
| ||||
<sx:tabbedpanel>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> |
...
Code Block | ||||
---|---|---|---|---|
| ||||
<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>
|
...
Select tab using JavaScript
Code Block | ||||
---|---|---|---|---|
| ||||
<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" onclick="selectTab('tab1')" value="Select tab 1" />
<input type="button" onclick="selectTab('tab2')" value="Select tab 2" />
|
Prevent tab 2 from being selected
Code Block | ||||
---|---|---|---|---|
| ||||
<script type="text/javascript"> dojo.event.dojo.event.topic.subscribe('/before', function(event, tab, tabContainer) { event.cancel = tab.widgetId == "tab2" ; }); </script> <sx:tabbedpanel beforeSelectTabNotifyTopics="/before" id="tabContainer"> <sx:div id="tab1" label="Tab 1"> Local Tab 1 </sx:div> <sx:div id="tab2" label="Tab 2"> Local Tab 2 </sx:div> </sx:tabbedpanel> |
...
Code Block | ||||
---|---|---|---|---|
| ||||
<sx:tabbedpanel templateCssPath="%{#cssUrl}" id="tabContainer">
<sx:div id="tab1" label="Tab 1">
Local Tab 1
</sx:div>
<sx:div id="tab2" label="Tab 2">
Local Tab 2
</sx:div>
</sx:tabbedpanel>
|
...