function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
Praveen Venkata BPraveen Venkata B 

Jquery tabs on Visualforce page.

I'm trying to buit below jquery tab styling on Visualforce page:

 

User-added image

 

My code gives me below styling:

 

User-added image

 

Below is my code:

 

<apex:page standardController="Account" standardStylesheets="false" doctype="html-5.0" cache="false">

<apex:includeScript value="https://code.jquery.com/jquery-1.10.2.js"/>
<apex:includeScript value="https://code.jquery.com/ui/1.11.4/jquery-ui.js"/>
<apex:includeScript value="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"/>
<apex:stylesheet value="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"/>
<apex:stylesheet value="https://resources/demos/style.css"/>

<body>
    <div id="tabs">
  <ul>
    <li><a href="#tabs-1">Tab A</a>
    </li>
    
    <li><a href="#tabs-2">Tab B</a>
    </li>
    
    <li><a href="#tabs-3">Tab C</a>
    </li>
  </ul>
  
  <div id="tabs-1">
    <p>Content for tabs-A</p>
  </div>
  
  <div id="tabs-2">
    <p>Content for tabs-B</p>
  </div>
  
  <div id="tabs-3">
    <p>Content for tabs-C</p>
  </div>
  
</div>
</body>

<script type="text/javascript">
    jQuery.noConflict();
    jQuery(document).ready(function() {
        jQuery( "#tabs" ).tabs();
    });
</script>

</apex:page>


 

Please help me in fixing the tab stylings. Thanks in advance !!

Regards,
Praveen Venkata.

Amit Chaudhary 8Amit Chaudhary 8
Please check below blog. I hope that will help for dynamic tab
http://amitsalesforce.blogspot.in/2014/11/dynamic-tab-in-salesforce-css-and.html
Praveen Venkata BPraveen Venkata B

Thanks Amit for quick reply.

But i'm looking for static tabs with look and feel as below.

User-added image

I used previously tabPanel and tab to achive above styling but stuck with defaulted padding issue between tab and its border as shoun below:

User-added image

Hence want to have a try of jquery to achive this. But stuck in the initial stages of this.

Regards,
Praveen Venkata.
Amit Chaudhary 8Amit Chaudhary 8
Above code will work only once you will add Jquery code in Static resource.
And import like below 
<apex:includeScript value="{!URLFOR($Resource.Scripts,'script/jquery-1.8.1.min.js')}" />
http://developer.force.com/cookbook/recipe/using-jquery-in-a-visualforce-page
http://salesforce.stackexchange.com/questions/18961/highlighting-the-selected-tab-using-jqueryui-tabs
If all we need is jQuery, the first thing we need to do is download it here

here: http://jquery.com/
http://www.tehnrd.com/setting-up-jquery-with-salesforce-com/

Please let us know if this will help your

Thanks
Amit Chaudhary
Praveen Venkata BPraveen Venkata B

Okay. Will Jquery won't work CDN's ? Coz, i have included jquery CDN's in my code, but the stylings and not applied. Not sure whether i have included incorrect CDN or my code is wrong.

Any way i'll upload jquery as static resource and check if my code works for it.
Praveen Venkata BPraveen Venkata B

I have resolved this. but came up with a new issue:

https://developer.salesforce.com/forums/ForumsMain?id=906F00000005FtjIAE