Apex Code Development You need to sign in to do that
Don't have an account?
Lightning design system tabs and javascript
I've been working with developing a stand-alone app in lightning. In trying to adhere to the look and feel I'm following the html layed out in https://www.lightningdesignsystem.com/components/tabs. Sorry if this is a newb question how do I manipulate the class of the <a> being clicked to .slds-active and it's corresponding <div> to .slds-show , and then remove any other existing <a> with the .slds-active and change the <div> to .sld.slds-hide? I've seen something similiar with javascript on a visualforce page but I wanted to follow the component design structure. Surely someone has done this as it seems pretty standard navigation. Currently my component has
<div class="slds-tabs--default">
<ul class="slds-tabs--default__nav" role="tablist">
<li class="slds-tabs--default__item slds-text-heading--label slds-active" title="Item One" role="presentation">
<a class="slds-tabs--default__link" href="#void" role="tab" tabindex="0" aria-selected="true" aria-controls="tab-default-1" data-data="tab-default-1__item" onclick="{!c.selectTab}" id="tab-default-1__item">New Checklists</a>
</li>
<li class="slds-tabs--default__item slds-text-heading--label" title="Item Two" role="presentation">
<a class="slds-tabs--default__link" href="#void" role="tab" tabindex="-1" aria-selected="false" aria-controls="tab-default-2" data-data="tab-default-2__item" onclick="{!c.selectTab}" id="tab-default-2__item">Existing Checklist</a>
</li>
</ul>
<div id="tab-default-1" class="slds-tabs--default__content slds-show" role="tabpanel" aria-labelledby="tab-default-1__item">
<h2>Item One Content</h2>
</div>
<div id="tab-default-2" class="slds-tabs--default__content slds-hide" role="tabpanel" aria-labelledby="tab-default-2__item">
<h2>Item Two Content</h2>
</div>
</div>
I have the onClick="{!c.selectTab}" which goes to my js controller. Below
selectTab : function(component, event, helper){
var activeTab;
activeTab = event.target.getAttribute("id");
//var result = component.find("tab-default-1__item");
//alert(result);
},
I see the event.target.getAttribute gives me the value of the onclick id. I can get the value and can then tell which tab was clicked, but then how do I
1. Change the class value of that Id?
2. Change the class value of other id's?
I've been trying to use various javascript functions like find but nothing seems to be working. Can someone point me to which functions I should be using to find id(DOMS) on a component and which functions can be used to set vairous attributes? I didn't find anything in the lightning dev guide but will keep looking. Any help is appreciated.
<div class="slds-feed"> <ul class="slds-feed__list"> <aura:iteration items="{!v.objects}" var="obj"> <li class="slds-feed__item"> <c:Cell object="{!obj}"/> </li> </aura:iteration> </ul>Then the cell can have an aura attribute of the SObject in question and do whatever you need to do that way. Not sure if that's exactly what you're going for... but it feels like Lightning wants you to be following a container approach for complex components like this.
Here's a post from bob buzzard which demonstrates how to include jquery: http://bobbuzzard.blogspot.com/2015/06/lightning-components-and-unobtrusive.html
Go to Setup select Critical Update
Deactivate: Enable Lightning LockerService Security
and paste below code in developer console
1 Step: Insert into component
<ltng:require scripts="/resource/Jq" afterScriptsLoaded="{!c.afterScriptsLoaded}" />
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
2 Step: Insert into Component
<button id="button1" onclick="{!c.dropdown}" class="slds-button slds-button--neutral">Show/Hide Columns
<img src="/resource/dropdownIcon" style="height:20px; width:20px;"/></button>
<p id="dropdown1">hi</p>
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
Step 3: insert into Controller
({
afterScriptsLoaded : function(component, event, helper) {
},
dropdown:function(component, event, helper)
{
// console.log("1st time");
// $.noConflict();
jQuery("#dropdown1").toggle();
//console.log("2nd time");
}
})
did you get your question answered. I am not able to fix this tab active. could you please paste your code..which is working. I am looking for javascript code for enabling tabs.
I used it to change slds-show and slds-active.
Helper function after onclick on the <li> passing through from controler. (changing from a Bill tab to a contact tab)
not pretty, but it is working. I guess I will need to make a new function for each <li> click to unselect the other tabs and activate the one it clicked on.
selectContactTab: function(cmp){
var contact = cmp.find('contactTab');
$A.util.addClass(contact, "slds-active");
var billingInfo = cmp.find('billTab');
$A.util.removeClass(billingInfo, "slds-active");
var billInfoDetail = cmp.find('tab-scoped-1');
$A.util.removeClass(billInfoDetail, "slds-show");
$A.util.addClass(billInfoDetail, "slds-hide");
var contactInfoDetail = cmp.find('tab-scoped-2');
$A.util.removeClass(contactInfoDetail, "slds-hide");
$A.util.addClass(contactInfoDetail, "slds-show");
$A.enqueueAction(action);
}
<ul class="slds-tabs--scoped__nav" role="tablist">
<li class="slds-tabs--scoped__item slds-active gpSessionTab" title="Item One" role="presentation">
<a class="slds-tabs--scoped__link" href="javascript:void(0);" role="tab" tabindex="0" aria-selected="true" aria-controls="tab-scoped-1" onclick="{!c.selectTab}" id="tab-scoped-1__item">Item One</a>
</li>
<li class="slds-tabs--scoped__item gpSessionTab" title="Item Two" role="presentation">
<a class="slds-tabs--scoped__link" href="javascript:void(0);" role="tab" tabindex="-1" aria-selected="false" aria-controls="tab-scoped-2" onclick="{!c.selectTab}" id="tab-scoped-2__item">Item Two</a>
</li>
<li class="slds-tabs--scoped__item gpSessionTab" title="Item Three" role="presentation">
<a class="slds-tabs--scoped__link" href="javascript:void(0);" role="tab" tabindex="-1" aria-selected="false" aria-controls="tab-scoped-3" onclick="{!c.selectTab}" id="tab-scoped-3__item">Item Three</a>
</li>
</ul>
<div id="tab-scoped-1" class="slds-tabs--scoped__content slds-show gpSessionTabScope" role="tabpanel" aria-labelledby="tab-scoped-1__item">
Item One Content
</div>
<div id="tab-scoped-2" class="slds-tabs--scoped__content slds-hide gpSessionTabScope" role="tabpanel" aria-labelledby="tab-scoped-2__item">
Item Two Content
</div>
<div id="tab-scoped-3" class="slds-tabs--scoped__content slds-hide gpSessionTabScope" role="tabpanel" aria-labelledby="tab-scoped-3__item">
Item Three Content
</div>
</div>
===========
var activeTab = event.target.getAttribute("id");
$(".gpSessionTab").removeClass("slds-active");
$("#"+activeTab).parent().addClass("slds-active");
$(".gpSessionTabScope").each(function(){
var clsName = $(this).attr("class");
if(clsName.indexOf("slds-show") != -1){
$(this).removeClass("slds-show");
$(this).addClass("slds-hide");
}
});
var arr = activeTab.split("__");
var scopeId = arr[0];
$("#"+scopeId).removeClass("slds-hide");
$("#"+scopeId).addClass("slds-show");
}
This is a nice clear example of how to activate/deactivate tabs:
https://sfdcmonkey.com/2016/11/23/how-to-create-lightning-tabs-in-component/