Easy Jquery Tabs for Visualforce Pages

[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


16 comments:

  1. Excellent Post. Also visit http://msnetframework.com/#framework.php

    ReplyDelete
  2. Hi,

    Can you send me the JQ file.

    Thanks,
    Basha

    ReplyDelete
    Replies
    1. Well its included in the package. And the static resource name is "jQuery_UI_1_10_2"

      Delete
  3. Totally cool stuff .

    ReplyDelete
  4. Hi,
    Can you please tell me how to update the orange color to blue color

    ReplyDelete
    Replies
    1. set importCSS = "false" in Tabpanel
      and use http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/redmond/jquery-ui.min.css or http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/cupertino/jquery-ui.min.css stylesheet in your page using apex:includeStylesheet

      Delete
    2. Thanks Avinava.I have updated tab panel component with apex:attribute name="importCSS" description="By default the value is set to true,set the value to false if you dont want to laod the default jQuery CSS" default="false" type="Boolean" and included the style sheet in my visualforce page as apex:stylesheet value="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/cupertino/jquery-ui.min.css" .But still it is not working

      Delete
    3. Ok I will releasing a update soon that will let you change the theme easily using an attribute

      Delete
    4. New version is uploaded in the project detail page. There is a new attribute called theme you can set the value to any jquery theme

      Delete
  5. Hi Avi,I have a requirement to update the color code.Also tabs are not working sometimes need to refresh the page.can you please look into it

    ReplyDelete
    Replies
    1. Ok I will releasing a update soon that will let you change the theme easily using an attribute

      Delete
    2. Can you please update soon

      Delete
    3. New version is uploaded in the project detail page.

      Delete
  6. Thanks !!! Aninava Maiti. Your tabpanel saved by time and energy. My VF page had TabPanel and a google map and recently I started getting the below error and the Maps stopped working. I replaced the TabPAnel with your component and all is rosy now. Thanks again.

    TypeError: 'undefined' is not a function (evaluating 'this.each(function(value,index){results.push(iterator.call(context,value,index));})')
    collect3_3_3.Finalorg.ajax4jsf.javascript.PrototypeScript:34:124

    ReplyDelete
  7. It does not work in IE8.
    an error has occurred in the function loadTabs ().
    Please tell me how you can work with IE8

    ReplyDelete
  8. how to set second as active by default

    ReplyDelete