2

I try to build a lightning component with SLDS, lightning design system. The component I want is the tabs.

So I use the code given by lightning design system, but since it is static i need to use some logic in javascript. Here is my code :

the component :

<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,forceCommunity:availableForAllPageTypes" access="global">
<ltng:require scripts="/resource/jqueryMin"
              styles="/resource/SLDS103/assets/styles/salesforce-lightning-design-system-ltng.css"
              afterScriptsLoaded="{!c.doInit}"/>

<div class="slds">
    <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" id="tab-default-1__item" onclick="{!c.changerTab}">
                    Item One</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" id="tab-default-2__item" onclick="{!c.changerTab}">
                    Item Two</a>
            </li>
            <li class="slds-tabs--default__item slds-text-heading--label" title="Item Three" role="presentation">
                <a class="slds-tabs--default__link" href="#void" role="tab" tabindex="-1" aria-selected="false" aria-controls="tab-default-3" id="tab-default-3__item" onclick="{!c.changerTab}">
                    Item Three</a>
            </li>
        </ul>
        <div id="tab-default-1" class="slds-tabs--default__content slds-show" role="tabpanel" aria-labelledby="tab-default-1__item">Item One Content</div>
        <div id="tab-default-2" class="slds-tabs--default__content slds-hide" role="tabpanel" aria-labelledby="tab-default-2__item">Item Two Content</div>
        <div id="tab-default-3" class="slds-tabs--default__content slds-hide" role="tabpanel" aria-labelledby="tab-default-3__item">Item Three Content</div>
    </div>
</div>

</aura:component>

the controller :

({
doInit : function(component, event, helper) {
    var url = "/";
    if(window.location.href.search("/s/") !== -1){
        var taburl = window.location.href.split("/");
        if(taburl.length >3){
            url += taburl[3] + "/";
        }
    }
    var useElements = document.getElementsByTagName("use");
    for(var ii=0;ii<useElements.length;ii++){
        useElements[ii].setAttribute("xlink:href",url +useElements[ii].getAttribute("xlink:href"));
    }
},

changerTab : function(elmnt) {
    // slds-active
    $(elmnt).parent("li").siblings(".slds-active").removeClass("slds-active");
    $(elmnt).parent("li").addClass("slds-active");

    // tabindex
    $(elmnt).parent("li").siblings().children("a").attr("tabindex", -1);
    $(elmnt).attr("tabindex", 0);

    // aria-selected
    $(elmnt).parent("li").siblings().children("a").attr("aria-selected", false);
    $(elmnt).attr("aria-selected", true);

    // hiding previouly selected tab (slds-show/slds-hide)
    $(elmnt).closest(".slds-tabs--default").children("div[role='tabpanel'].slds-show").addClass("slds-hide");
    $(elmnt).closest(".slds-tabs--default").children("div[role='tabpanel'].slds-show").removeClass("slds-show");
    // displaying newly selected tab (slds-show/slds-hide)
    $(elmnt).closest(".slds-tabs--default").children("div[aria-labelledby='"+elmnt.id+"']").addClass("slds-show");
    $(elmnt).closest(".slds-tabs--default").children("div[aria-labelledby='"+elmnt.id+"']").removeClass("slds-hide");
}
})

then I put my component in an app so I can see it. The tabs are displaying, and the first tab is selected. But when I click on another tab it do not change... I don't know how to get my javascript function changerTab to work.

I used this tutorial for doing that, but it is for a visualforce page. I tried it and it works, but my big problem is to transform the javascript for the lightning component.

Thank you !

3

Any action you define in your component is going to pass (component, event, helper) to the controller action. In your case, the <a> elements that you've linked to the changerTab method are going to do the exact same thing. Your elmnt argument is going to contain a reference to the component that you pasted in here, not to the tab you want to switch to.

One easy fix would be to make 3 different controller actions, one for each <a> element. Have each of those 3 controller actions call a helper method that passes in the aura:id of the tab you want to show, and utilize component.find() to locate and hide/show the appropriate tabs.

1

better to use component.find() and $A.util.addClass()/$A.util.removeClass() for the style changes. https://developer.salesforce.com/docs/atlas.en-us.lightning.meta/lightning/js_cb_styles.htm

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.