Apex Code Development You need to sign in to do that
Don't have an account?
yeshab create vertical tab in visualforce page using jquery
I have to create vertical tab in visualforce page using jquery.
The tab headings values come from <apex:repeat> which is list of names
<head>
<apex:includeScript value="{!URLFOR($Resource.jquery, 'jquery-ui-1.10.4.custom/js/jquery-1.10.2.js')}"/>
<apex:includeScript value="{!URLFOR($Resource.jquery, 'jquery-ui-1.10.4.custom/js/jquery-ui-1.10.4.custom.min.js')}"/>
<apex:includeScript value="{!URLFOR($Resource.jquery, 'jquery-ui-1.10.4.custom/js/jquery-ui-1.10.4.custom.js')}"/>
<apex:stylesheet value="{!URLFOR($Resource.jquery, 'jquery-ui-1.10.4.custom/css/ui-lightness/jquery-ui-1.10.4.custom.css')}"/>
<apex:stylesheet value="{!URLFOR($Resource.jquery, 'jquery-ui-1.10.4.custom/css/ui-lightness/jquery-ui-1.10.4.custom.min.css')}"/>
<apex:includeScript value="{!URLFOR($Resource.jquery,'jquery-ui-1.10.4.custom/development-bundle/ui/jquery.ui.tabs.js')}"/>
<script>
$(function() {
$('#tabs').tabs().addClass( "ui-tabs-vertical ui-helper-clearfix" );;
$( "#tabs li" ).removeClass( "ui-corner-top" ).addClass( "ui-corner-left" );
});
</script>
<style>
.ui-tabs-vertical { width: 55em; }
.ui-tabs-vertical .ui-tabs-nav { padding: .2em .1em .2em .2em; float: left; width: 12em; }
.ui-tabs-vertical .ui-tabs-nav li { clear: left; width: 100%; border-bottom-width: 1px !important; border-right-width: 0 !important; margin: 0 -1px .2em 0; }
.ui-tabs-vertical .ui-tabs-nav li a { display:block; }
.ui-tabs-vertical .ui-tabs-nav li.ui-tabs-active { padding-bottom: 0; padding-right: .1em; border-right-width: 1px; border-right-width: 1px; }
.ui-tabs-vertical .ui-tabs-panel { padding: 1em; float: right; width: 40em;}
</style>
</head>
<body>
<apex:repeat value="{!Categories}" var="assessmentcategory" >
<div id="tabs">
<ul>
<li><a href="#tabs-{!assessmentcategory.name}">{!assessmentcategory.name}</a></li>
</ul>
<div id="tabs-{!assessmentcategory.name}">
<p>{!assessmentcategory.name}</p>
</div>
</div>
</apex:repeat>
Problem is only first item is in a tab the remaining elements appear as a link.
any pointers would be helpful.
The tab headings values come from <apex:repeat> which is list of names
<head>
<apex:includeScript value="{!URLFOR($Resource.jquery, 'jquery-ui-1.10.4.custom/js/jquery-1.10.2.js')}"/>
<apex:includeScript value="{!URLFOR($Resource.jquery, 'jquery-ui-1.10.4.custom/js/jquery-ui-1.10.4.custom.min.js')}"/>
<apex:includeScript value="{!URLFOR($Resource.jquery, 'jquery-ui-1.10.4.custom/js/jquery-ui-1.10.4.custom.js')}"/>
<apex:stylesheet value="{!URLFOR($Resource.jquery, 'jquery-ui-1.10.4.custom/css/ui-lightness/jquery-ui-1.10.4.custom.css')}"/>
<apex:stylesheet value="{!URLFOR($Resource.jquery, 'jquery-ui-1.10.4.custom/css/ui-lightness/jquery-ui-1.10.4.custom.min.css')}"/>
<apex:includeScript value="{!URLFOR($Resource.jquery,'jquery-ui-1.10.4.custom/development-bundle/ui/jquery.ui.tabs.js')}"/>
<script>
$(function() {
$('#tabs').tabs().addClass( "ui-tabs-vertical ui-helper-clearfix" );;
$( "#tabs li" ).removeClass( "ui-corner-top" ).addClass( "ui-corner-left" );
});
</script>
<style>
.ui-tabs-vertical { width: 55em; }
.ui-tabs-vertical .ui-tabs-nav { padding: .2em .1em .2em .2em; float: left; width: 12em; }
.ui-tabs-vertical .ui-tabs-nav li { clear: left; width: 100%; border-bottom-width: 1px !important; border-right-width: 0 !important; margin: 0 -1px .2em 0; }
.ui-tabs-vertical .ui-tabs-nav li a { display:block; }
.ui-tabs-vertical .ui-tabs-nav li.ui-tabs-active { padding-bottom: 0; padding-right: .1em; border-right-width: 1px; border-right-width: 1px; }
.ui-tabs-vertical .ui-tabs-panel { padding: 1em; float: right; width: 40em;}
</style>
</head>
<body>
<apex:repeat value="{!Categories}" var="assessmentcategory" >
<div id="tabs">
<ul>
<li><a href="#tabs-{!assessmentcategory.name}">{!assessmentcategory.name}</a></li>
</ul>
<div id="tabs-{!assessmentcategory.name}">
<p>{!assessmentcategory.name}</p>
</div>
</div>
</apex:repeat>
Problem is only first item is in a tab the remaining elements appear as a link.
any pointers would be helpful.
Let me know if it helps.
Other useful sources :
https://code.google.com/p/jquery-vert-tabs/
http://keith-wood.name/uiTabs.html
these all are html link...how to integrate in visualforce all these javascipt css or html pages