Developer guide

HTML generated

By using JSPTabControl like this :

  <jsptabcontrol:tabControl name="MY_TABCONTROL" 
                            width="500px"
                            height="50px"
                            tabHeaderClass="tabHeader2"
                            tabBodyClass="tabBody2"  >
                            
    <jsptabcontrol:tabPage name="MY_TABPAGE1" title="Tab page 1" width="150px" >
      Tab Page 1 content
    </jsptabcontrol:tabPage>
    
    <jsptabcontrol:tabPage name="MY_TABPAGE2" title="Tab page 2"  >
      Tab Page 2 content
    </jsptabcontrol:tabPage>
    
    <jsptabcontrol:tabPage name="MY_TABPAGE3" title="Tab page 3" >
      Tab Page 3 content
    </jsptabcontrol:tabPage>  
    
  </jsptabcontrol:tabControl>

JSP Taglib generate this HTML content :

<div style="width:500px" >
  
  <ul class="tabHeader2" >
    <li id="tabPageheader_MY_TABCONTROL_MY_TABPAGE1" >
      <a href="#" onclick="new TabToggle('MY_TABCONTROL','MY_TABPAGE1'); return false;" style="width:150px" >
        Tab page 1
      </a>
    </li>
    <li id="tabPageheader_MY_TABCONTROL_MY_TABPAGE2" class="active" >
      <a href="#" onclick="new TabToggle('MY_TABCONTROL','MY_TABPAGE2'); return false;">
        Tab page 2
      </a>
    </li>
    <li id="tabPageheader_MY_TABCONTROL_MY_TABPAGE3" >
      <a href="#" onclick="new TabToggle('MY_TABCONTROL','MY_TABPAGE3'); return false;">
        Tab page 3
      </a>
    </li>
  </ul>
  
  <div id="tabControlBody_MY_TABCONTROL" class="tabBody2"  style="width:500px;height:50px;" >
    
    <div id="tabPageBody_MY_TABCONTROL_MY_TABPAGE1" style="height:100%;display:none;" >
      Tab Page 1 content
      
      <input type="hidden" 
             id="tabPageStateInputHiddenName_MY_TABCONTROL_MY_TABPAGE1" 
             name="tabPageStateInputHiddenName_MY_TABCONTROL_MY_TABPAGE1" 
             value="" />
             
    </div>
    
    <div id="tabPageBody_MY_TABCONTROL_MY_TABPAGE2" style="height:100%;" >
      Tab Page 2 content
      
      <input type="hidden" 
             id="tabPageStateInputHiddenName_MY_TABCONTROL_MY_TABPAGE2" 
             name="tabPageStateInputHiddenName_MY_TABCONTROL_MY_TABPAGE2" 
             value="READ-ONLY" />
    </div>
    
    <div id="tabPageBody_MY_TABCONTROL_MY_TABPAGE3" style="height:100%;display:none;" >
      Tab Page 3 content
      
      <input type="hidden" 
             id="tabPageStateInputHiddenName_MY_TABCONTROL_MY_TABPAGE3" 
             name="tabPageStateInputHiddenName_MY_TABCONTROL_MY_TABPAGE3" 
             value="FORBIDDEN" />

    </div>   
    
  </div>
  
</div>  
                                                  
<input type="hidden" 
       id="tabPageInputHiddenName_MY_TABCONTROL"         
       name="tabPageInputHiddenName_MY_TABCONTROL" 
       value="MY_TABPAGE2" />