I am displaying Sharepoint Tabs using CSR display templates.I want to color each tab which i was able to get it. Now I want to change the background color of the tab contents with the same color. For example if i click first tab where the color is Blue the fields in that tab also should display blue,Similarly for other tabs like orange, red . here is the code which i have tried.
var currentFormUniqueId;
var currentFormWebPartId;
// Use "Multi String" javascript to embed the required css
var MultiString = function (f) {
return f.toString().split('\n').slice(1, -1).join('\n');
}
var tabsStyle = MultiString(function () {/**
.tabs {
border-bottom: 1px solid #ddd;
content: " ";
display: table;
margin-bottom: 0;
padding-left: 0;
list-style: none;
width: 100%;
}
.tabs > li {
float: left;
margin-bottom: -1px;
position: relative;
display: block;
}
.tabs > li > a {
margin-right: 2px;
line-height: 1.42857143;
border: 1px solid transparent;
position: relative;
display: block;
padding: 10px 15px;
}
.tabs a {
color: #fff;
text-decoration: none;
background-color:RGB(0,109,182);
}
.tabs > li.active > a, .tabs > li.active > a:hover, .tabs > li.active > a:focus {
color: #fff;
font-style:oblique;
background-color:RGB(0,109,182);
border: 1px solid #ddd;
border-bottom-color: transparent;
cursor: default;
}
.tabs .Discovery a {
background-color:RGB(38,165,112);
font-color:#fff;
}
ul.tabs > li.Discovery > a, ul.tabs > li.Discovery > a:focus, ul.tabs > li.Discovery > a:hover{
color: #fff;
background-color:RGB(38,165,112);
border: 1px solid #ddd;
border-bottom-color: transparent;
cursor: default;
}
.tabs .BusinessPlan a {
background-color:RGB(236,176,34);
font-color:#fff;
}
ul.tabs > li.BusinessPlan > a, ul.tabs > li.BusinessPlan > a:focus, ul.tabs > li.BusinessPlan > a:hover{
color: #fff;
background-color:RGB(236,176,34);
border: 1px solid #ddd;
border-bottom-color: transparent;
cursor: default;
}
.tabs .Development a {
background-color:RGB(165,79,139);
font-color:#fff;
}
ul.tabs > li.Development > a, ul.tabs > li.Development > a:focus, ul.tabs > li.Development> a:hover{
color: #fff;
background-color:RGB(165,79,139);
border: 1px solid #ddd;
border-bottom-color: transparent;
cursor: default;
}
.tabs .Implemetation a {
background-color:RGB(192,0,0);
font-color:#fff !important;
}
ul.tabs > li.Implemetation > a, ul.tabs > li.Implemetation > a:focus, ul.tabs > li.Implemetation> a:hover{
color: #fff;
background-color:RGB(192,0,0);
border: 1px solid #ddd;
border-bottom-color: transparent;
cursor: default;
}
**/
});
var tabsObj = [
["ProjectDetails", ["Title", "Age", "Married", "Mobile", "SSN"]],
["Discovery", ["Manager", "Salary", "Phone", "Email"]],
["BusinessPlan", ["Title", "Age", "Married", "Mobile", "SSN"]],
["Development", ["Manager", "Salary", "Phone", "Email"]],
["Implemetation", ["Comments"]]
];
(function () {
// jQuery library is required in this sample
// Fallback to loading jQuery from a CDN path if the local is unavailable
(window.jQuery || document.write('<script src="//ajax.aspnetcdn.com/ajax/jquery/jquery-1.10.0.min.js"><\/script>'));
var tabsContext = {};
tabsContext.OnPreRender = TabsOnPreRender;
tabsContext.OnPostRender = TabsOnPostRender;
// accordionContext.OnPostRender = accordionOnPostRender;
tabsContext.Templates = {};
SPClientTemplates.TemplateManager.RegisterTemplateOverrides(tabsContext);
})();
function TabsOnPreRender(ctx) {
if (!currentFormUniqueId) {
currentFormUniqueId = ctx.FormUniqueId;
currentFormWebPartId = "WebPart" + ctx.FormUniqueId;
jQuery(document).ready(function () {
var tabHTMLTemplate = "<li class='{class}'><a href='#{Index}'>{Title}</a></li>";
var tabClass;
var tabsHTML = "";
for (var i = 0; i < tabsObj.length; i++) {
tabClass = tabsObj[i][0];
if (i == 0){ tabClass = "active";}
tabsHTML += tabHTMLTemplate.replace(/{Index}/g, i).replace(/{Title}/g, tabsObj[i][0]).replace(/{class}/g, tabClass)
}
jQuery("#" + currentFormWebPartId).prepend("<ul class='tabs'>" + tabsHTML + "</ul>");
jQuery('.tabs li a').on('click', function (e) {
var currentIndex = jQuery(this).attr('href').replace("#","");
showTabControls(currentIndex);
jQuery(this).parent('li').addClass('active').siblings().removeClass('active');
e.preventDefault();
});
showTabControls(0);
jQuery("#" + currentFormWebPartId).prepend("<style>" + tabsStyle + "</style>");
});
}
}
function TabsOnPostRender(ctx) {
var controlId = ctx.ListSchema.Field[0].Name + "_" + ctx.ListSchema.Field[0].Id;
jQuery("[id^='" + controlId + "']").closest("tr").attr('id', 'tr_' + ctx.ListSchema.Field[0].Name).hide();
}
function showTabControls(index)
{
jQuery("#" + currentFormWebPartId + " [id^='tr_']").hide();
for (var i = 0; i < tabsObj[index][1].length; i++) {
jQuery("[id^='tr_" + tabsObj[index][1][i] + "']").show();
}
}