Easy Jquery Tabs for Visualforce Pages

Thursday, May 9, 2013

[Live Demo]

This is another blog regarding so called Easy Jquery Component.Now this component helps you to generate  the Jquery Tabs very easily in a Visualforce pages. Follows the same syntax as the standard component, with added Jquery goodness. Pretty straight forward and can include standard components inside the Jquery tabs.

How it looks like ?

How to use the components?

• <c:Tabpanel> : A wrapper component that holds all the tab together inside a panel.
• <c:Tab> : Represents a single Tab inside a tabpanel.

Below is a sample code to generate a Jquery Tab

<!--Tab Panel -->  
   <c:Tabpanel >  
     <!--First Tab-->  
     <c:Tab title="Tab 1">  
       This is a tab 1. You can add standard component inside also.  
       <apex:pageBlock title="Standard page block">  
         This is a pageblock component.  
         <br/>  
         <apex:pageBlockSection title="This is a section" collapsible="false">  
         </apex:pageBlockSection>  
       </apex:pageBlock>  
     </c:Tab>  
     <!--Second Tab -->  
     <c:Tab title="Tab 2">  
       This is a tab 2  
     </c:Tab>  
   </c:Tabpanel>  

Codebase

Demo And Installation Link : http://blogforce9dev-developer-edition.ap1.force.com/ProjectDetail?id=a0290000007s6xl