Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

Code Block
HTML
HTML
<script type="text/javascript">
   function enableTab(id) {
      var tabContainer = dojo.widget.byId('tabContainer');
      tabContainer.enableTab(id);
   }
    
   function disableTab(index) {
      var tabContainer = dojo.widget.byId('tabContainer');
      tabContainer.disableTab(index);
   }
</script>

<sx:tabbedpanel 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" />
Tab labels position (top, right, bottom, left)
Code Block
HTML
HTML

<sx:tabbedpanel labelposition="bottom">
   <sx:div label="Tab 1" >
       Local Tab 1
   </sx:div>   
   <sx:div label="Tab 2" >
       Local Tab 2
   </sx:div>   
</sx:tabbedpanel>