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
Demo And Installation Link : http://blogforce9dev-developer-edition.ap1.force.com/ProjectDetail?id=a0290000007s6xl


Posted by at
Labels: , , , , , ,

16 comments:

  1. InnovapathJuly 31, 2013 at 8:56 PM

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

    ReplyDelete
  2. UnknownAugust 16, 2013 at 1:08 PM

    Hi,

    Can you send me the JQ file.

    Thanks,
    Basha

    ReplyDelete
    Replies
    1. AviAugust 18, 2013 at 4:21 PM

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

      Delete
  3. AnonymousSeptember 26, 2013 at 2:15 AM

    Totally cool stuff .

    ReplyDelete
  4. UnknownJanuary 23, 2014 at 1:53 AM

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

    ReplyDelete
    Replies
    1. Avinava MaitiJanuary 23, 2014 at 5:12 AM

      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. UnknownJanuary 23, 2014 at 9:30 PM

      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. AviJanuary 29, 2014 at 2:46 PM

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

      Delete
    4. AviFebruary 2, 2014 at 5:35 PM

      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. UnknownJanuary 25, 2014 at 1:38 AM

    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. AviJanuary 29, 2014 at 2:46 PM

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

      Delete
    2. UnknownJanuary 31, 2014 at 8:20 PM

      Can you please update soon

      Delete
    3. AviFebruary 2, 2014 at 5:34 PM

      New version is uploaded in the project detail page.

      Delete
  6. shrungaSeptember 10, 2014 at 5:35 PM

    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. AnonymousJanuary 23, 2015 at 10:37 AM

    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. AnonymousJanuary 18, 2017 at 1:07 PM

    how to set second as active by default

    ReplyDelete

Subscribe to: Post Comments (Atom)