<!-- For this example to render properly, you must associate the Visualforce page with a valid account record in the URL. For example, if 001D000000IRt53 is the account ID, the resulting URL should be: https://Salesforce_instance/apex/myPage?id=001D000000IRt53 See the Visualforce Developer's Guide Quick Start Tutorial for more information. -->
<!-- This example shows how to use the tabClass and inactiveTabClass attributes to change the default styling of the tab bar. Note that in the style definitions, 'background-image:none' is required to override the default image with the specified color. You can also provide your own image with .css styles. -->
Hello Fouzan Baig , I am implement this code in my visualforce page .but on this page its not working .plz solve my problem
In this snap shot .I use your vertical tab code in my select contact list .after runnig this page tabs not working .when i click on edit template, select contact list ,preview& send. its not change the position
<-......................this is the controller for this visualforce code.......................->
public class temp { public string Contact{get;set;} public string lead{get;set;} public string selectedTemplate{get; set;} public EmailTemplate em{get; set;}
public void callEmailTemplate(){ em = [select id,name,HtmlValue,body from EmailTemplate where Id=: selectedTemplate];
} public temp() { }
list<EmailTemplate> temp1=[SELECT id ,Name,HtmlValue FROM EmailTemplate ORDER by Name ASC]; public list<EmailTemplate> gettemp1(){ return temp1;
It is because of Jquery conflict, u need to remove the conflict.
Sorry for the late reply, i went for an vacation.
If it is possible you can remove the conflict, or else please refer your below code, which is bug freezed
<apex:page controller="temp" sidebar="false">
<apex:form >
<apex:pageBlock >
<style>
.activeTab {background-color: #236FBD; color:white; background-image:none}
.inactiveTab { background-color: lightgray; color:black; background-image:none}
</style>
<apex:tabPanel id="tabPanel" switchType="client" immediate="true">
<apex:tab label="Select Mail Merge Template">
<apex:pageBlockSection >
<apex:pageBlockTable value="{!temp1}" var="t">
<apex:column >
<apex:commandLink action="{!callEmailTemplate}" reRender="temp_dt" >
{!t.name}
<apex:param name="temp_id" assignTo="{!selectedTemplate}" value="{!t.id }"/>
</apex:commandLink>
</apex:column>
</apex:pageBlockTable>
<apex:outputPanel id="temp_dt" >
{!em.Name}
</apex:outputPanel>
</apex:pageBlockSection>
</apex:tab>
<!----------------------------teb2-------------------------->
<apex:tab label="Edit Template">
<apex:outputPanel id="temp_dt" >
<apex:detail subject="{!$CurrentPage.parameters.temp_id}"/>
</apex:outputPanel>
</apex:tab>
<!---------------------------tab3---------------------------->
<apex:tab label="Select Contact" >
<!--------------------------here I am starting your code to paste------------------------------->
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<style>
* {
margin: 0;
padding: 0;
}
.tabs {
list-style: none;
width: 200px;
float: left
}
.tabs a {
display: block;
padding: 10px 15px;
text-decoration: none;
background: #fff;
color: #000;
border-bottom: 1px solid #ccc;
}
.tabContent {
margin-left: 200px;
min-height: 300px;
border: 1px solid #ccc;
padding: 10px;
}
.tabs a.active {
background: rgba(0,0,0,0.2);
}
.tabContent .tabBox {
display: none
}
.tabContent .activeTab {
display: block
}
</style>
<script>
if(jQuery)
jQuery.noConflict();
jQuery(document).ready(function(){
jQuery('.tabs a').click(function(){
var tabId = jQuery(this).attr('href');
jQuery('.tabs a').removeClass('active');
jQuery(this).addClass('active');
jQuery('.tabContent .tabBox').removeClass('activeTab');
jQuery(tabId).addClass('activeTab')
});
});
</script>
<ul class="tabs" >
<li><a class="active" href="#tab1">Tab One</a></li>
<li><a href="#tab2">Tab Two</a></li>
<li><a href="#tab3">Tab Three</a></li>
<li><a href="#tab4">Tab Four</a></li>
</ul>
<div class="tabContent">
<div class="tabBox activeTab" id="tab1">Tab One</div>
<div class="tabBox" id="tab2">Tab Two</div>
<div class="tabBox" id="tab3">Tab Three</div>
<div class="tabBox" id="tab4">Tab Four</div>
</div>
<!--------------------------your code is finished------------------------------->
<apex:selectRadio >
<apex:selectOption itemLabel="Contacts View" itemValue="1"></apex:selectOption>
<apex:selectOption itemLabel="Leads View" itemValue="2"></apex:selectOption>
</apex:selectRadio>
</apex:tab>
<apex:tab label="Preview & Send" >
</apex:tab>
</apex:tabPanel>
</apex:pageblock>
</apex:form>
</apex:page>
All Answers
<!-- For this example to render properly, you must associate the Visualforce page
with a valid account record in the URL.
For example, if 001D000000IRt53 is the account ID, the resulting URL should be:
https://Salesforce_instance/apex/myPage?id=001D000000IRt53
See the Visualforce Developer's Guide Quick Start Tutorial for more information. -->
<!-- This example shows how to use the tabClass and inactiveTabClass attributes to
change the default styling of the tab bar. Note that in the style definitions,
'background-image:none' is required to override the default image with the
specified color. You can also provide your own image with .css styles. -->
<apex:page standardController="Account" showHeader="true">
<!-- Define Tab panel .css styles -->
<style>
.activeTab {background-color: #236FBD; color:white; background-image:none}
.inactiveTab { background-color: lightgrey; color:black; background-image:none}
</style>
<!-- Create Tab panel -->
<apex:tabPanel switchType="client" selectedTab="name2" id="AccountTabPanel"
tabClass="activeTab" inactiveTabClass="inactiveTab">
<apex:tab label="One" name="name1" id="tabOne">content for tab one</apex:tab>
<apex:tab label="Two" name="name2" id="tabTwo">content for tab two</apex:tab>
</apex:tabPanel>
</apex:page>
Fouzan Baig 2 .
this code is for horiz tab not for vertical ..if you have other code for verticaly plz help
Good Day :)
Please try this....and try to change the UI as per your need :)
<apex:page >
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<style>
* {
margin: 0;
padding: 0;
}
.tabs {
list-style: none;
width: 200px;
float: left
}
.tabs a {
display: block;
padding: 10px 15px;
text-decoration: none;
background: #fff;
color: #000;
border-bottom: 1px solid #ccc;
}
.tabContent {
margin-left: 200px;
min-height: 300px;
border: 1px solid #ccc;
padding: 10px;
}
.tabs a.active {
background: rgba(0,0,0,0.2);
}
.tabContent .tabBox {
display: none
}
.tabContent .activeTab {
display: block
}
</style>
<script>
$(document).ready(function(){
$('.tabs a').click(function(){
var tabId = $(this).attr('href');
$('.tabs a').removeClass('active');
$(this).addClass('active');
$('.tabContent .tabBox').removeClass('activeTab');
$(tabId).addClass('activeTab')
});
});
</script>
<ul class="tabs" >
<li><a class="active" href="#tab1">Tab One</a></li>
<li><a href="#tab2">Tab Two</a></li>
<li><a href="#tab3">Tab Three</a></li>
<li><a href="#tab4">Tab Four</a></li>
</ul>
<div class="tabContent">
<div class="tabBox activeTab" id="tab1">Tab One</div>
<div class="tabBox" id="tab2">Tab Two</div>
<div class="tabBox" id="tab3">Tab Three</div>
<div class="tabBox" id="tab4">Tab Four</div>
</div>
</apex:page>
Fouzan Baig ,
I am implement this code in my visualforce page .but on this page its not working .plz solve my problem
In this snap shot .I use your vertical tab code in my select contact list .after runnig this page tabs not working .when i click on edit template, select contact list ,preview& send. its not change the position
<apex:form >
<apex:pageBlock >
<style>
.activeTab {background-color: #236FBD; color:white; background-image:none}
.inactiveTab { background-color: lightgray; color:black; background-image:none}
</style>
<apex:tabPanel id="tabPanel" switchType="client" immediate="true">
<apex:tab label="Select Mail Merge Template">
<apex:pageBlockSection >
<apex:pageBlockTable value="{!temp1}" var="t">
<apex:column >
<apex:commandLink action="{!callEmailTemplate}" reRender="temp_dt" >
{!t.name}
<apex:param name="temp_id" assignTo="{!selectedTemplate}" value="{!t.id }"/>
</apex:commandLink>
</apex:column>
</apex:pageBlockTable>
<apex:outputPanel id="temp_dt" >
{!em.Name}
</apex:outputPanel>
</apex:pageBlockSection>
</apex:tab>
<!----------------------------teb2-------------------------->
<apex:tab label="Edit Template">
<apex:outputPanel id="temp_dt" >
<apex:detail subject="{!$CurrentPage.parameters.temp_id}"/>
</apex:outputPanel>
</apex:tab>
<!---------------------------tab3---------------------------->
<apex:tab label="Select Contact" >
<!--------------------------here I am starting your code to paste------------------------------->
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<style>
* {
margin: 0;
padding: 0;
}
.tabs {
list-style: none;
width: 200px;
float: left
}
.tabs a {
display: block;
padding: 10px 15px;
text-decoration: none;
background: #fff;
color: #000;
border-bottom: 1px solid #ccc;
}
.tabContent {
margin-left: 200px;
min-height: 300px;
border: 1px solid #ccc;
padding: 10px;
}
.tabs a.active {
background: rgba(0,0,0,0.2);
}
.tabContent .tabBox {
display: none
}
.tabContent .activeTab {
display: block
}
</style>
<script>
$(document).ready(function(){
$('.tabs a').click(function(){
var tabId = $(this).attr('href');
$('.tabs a').removeClass('active');
$(this).addClass('active');
$('.tabContent .tabBox').removeClass('activeTab');
$(tabId).addClass('activeTab')
});
});
</script>
<ul class="tabs" >
<li><a class="active" href="#tab1">Tab One</a></li>
<li><a href="#tab2">Tab Two</a></li>
<li><a href="#tab3">Tab Three</a></li>
<li><a href="#tab4">Tab Four</a></li>
</ul>
<div class="tabContent">
<div class="tabBox activeTab" id="tab1">Tab One</div>
<div class="tabBox" id="tab2">Tab Two</div>
<div class="tabBox" id="tab3">Tab Three</div>
<div class="tabBox" id="tab4">Tab Four</div>
</div>
<!--------------------------your code is finished------------------------------->
<apex:selectRadio >
<apex:selectOption itemLabel="Contacts View" itemValue="1"></apex:selectOption>
<apex:selectOption itemLabel="Leads View" itemValue="2"></apex:selectOption>
</apex:selectRadio>
</apex:tab>
<apex:tab label="Preview & Send" >
</apex:tab>
</apex:tabPanel>
</apex:pageblock>
</apex:form>
</apex:page>
<-......................this is the controller for this visualforce code.......................->
public class temp {
public string Contact{get;set;}
public string lead{get;set;}
public string selectedTemplate{get; set;}
public EmailTemplate em{get; set;}
public void callEmailTemplate(){
em = [select id,name,HtmlValue,body from EmailTemplate where Id=: selectedTemplate];
}
public temp() {
}
list<EmailTemplate> temp1=[SELECT id ,Name,HtmlValue FROM EmailTemplate ORDER by Name ASC];
public list<EmailTemplate> gettemp1(){
return temp1;
}
}
It is because of Jquery conflict, u need to remove the conflict.
Sorry for the late reply, i went for an vacation.
If it is possible you can remove the conflict, or else please refer your below code, which is bug freezed
<apex:page controller="temp" sidebar="false">
<apex:form >
<apex:pageBlock >
<style>
.activeTab {background-color: #236FBD; color:white; background-image:none}
.inactiveTab { background-color: lightgray; color:black; background-image:none}
</style>
<apex:tabPanel id="tabPanel" switchType="client" immediate="true">
<apex:tab label="Select Mail Merge Template">
<apex:pageBlockSection >
<apex:pageBlockTable value="{!temp1}" var="t">
<apex:column >
<apex:commandLink action="{!callEmailTemplate}" reRender="temp_dt" >
{!t.name}
<apex:param name="temp_id" assignTo="{!selectedTemplate}" value="{!t.id }"/>
</apex:commandLink>
</apex:column>
</apex:pageBlockTable>
<apex:outputPanel id="temp_dt" >
{!em.Name}
</apex:outputPanel>
</apex:pageBlockSection>
</apex:tab>
<!----------------------------teb2-------------------------->
<apex:tab label="Edit Template">
<apex:outputPanel id="temp_dt" >
<apex:detail subject="{!$CurrentPage.parameters.temp_id}"/>
</apex:outputPanel>
</apex:tab>
<!---------------------------tab3---------------------------->
<apex:tab label="Select Contact" >
<!--------------------------here I am starting your code to paste------------------------------->
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<style>
* {
margin: 0;
padding: 0;
}
.tabs {
list-style: none;
width: 200px;
float: left
}
.tabs a {
display: block;
padding: 10px 15px;
text-decoration: none;
background: #fff;
color: #000;
border-bottom: 1px solid #ccc;
}
.tabContent {
margin-left: 200px;
min-height: 300px;
border: 1px solid #ccc;
padding: 10px;
}
.tabs a.active {
background: rgba(0,0,0,0.2);
}
.tabContent .tabBox {
display: none
}
.tabContent .activeTab {
display: block
}
</style>
<script>
if(jQuery)
jQuery.noConflict();
jQuery(document).ready(function(){
jQuery('.tabs a').click(function(){
var tabId = jQuery(this).attr('href');
jQuery('.tabs a').removeClass('active');
jQuery(this).addClass('active');
jQuery('.tabContent .tabBox').removeClass('activeTab');
jQuery(tabId).addClass('activeTab')
});
});
</script>
<ul class="tabs" >
<li><a class="active" href="#tab1">Tab One</a></li>
<li><a href="#tab2">Tab Two</a></li>
<li><a href="#tab3">Tab Three</a></li>
<li><a href="#tab4">Tab Four</a></li>
</ul>
<div class="tabContent">
<div class="tabBox activeTab" id="tab1">Tab One</div>
<div class="tabBox" id="tab2">Tab Two</div>
<div class="tabBox" id="tab3">Tab Three</div>
<div class="tabBox" id="tab4">Tab Four</div>
</div>
<!--------------------------your code is finished------------------------------->
<apex:selectRadio >
<apex:selectOption itemLabel="Contacts View" itemValue="1"></apex:selectOption>
<apex:selectOption itemLabel="Leads View" itemValue="2"></apex:selectOption>
</apex:selectRadio>
</apex:tab>
<apex:tab label="Preview & Send" >
</apex:tab>
</apex:tabPanel>
</apex:pageblock>
</apex:form>
</apex:page>
thanks for solve the problem