Versions Compared

Old Version 13

changes.mady.by.user Musachy Barroso

Saved on

compared with

New Version 14

changes.mady.by.user Musachy Barroso

Saved on

Key

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

...

Code Block
HTML
HTML
<sx:head extraLocales="en-us,nl-nl,de-de" />

<sx:datetimepicker label="In German" name="dddp7" value="%{'2006-06-28'}" language="de-de" />
<sx:datetimepicker label="In Dutch"  name="dddp8" value="%{'2006-06-28'}" language="nl-nl" />

Tabbed Panel

Local Tabs
Code Block
HTML
HTML

<sx:tabbedpanel>
   <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
HTML
HTML

<sx:tabbedpanel>
   <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>
Fixed size (size does not adjust to current tab)
Code Block
HTML
HTML

<sx:tabbedpanel cssStyle="width: 500px; height: 300px;" doLayout="true">
   <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
HTML
HTML

<sx:tabbedpanel>
   <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
HTML
HTML

<sx:tabbedpanel>
   <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
HTML
HTML

<sx:tabbedpanel>
   <sx:div label="Tab 1" >
       Local Tab 1
   </sx:div>   
   <sx:div label="Tab 2" disabled="true">
       Local Tab 2
   </sx:div>   
</sx:tabbedpanel>
Enable/Disable tabs using JavaScript
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" />