Forum Discussion

Custa1200's avatar
Custa1200
Helper
11 years ago

Tabs example

Has anybody got an example which shows how to hook up some tabs in a custom component using the markup from Lithiums other instances of tabs?

4 Replies

  • initially tried to copy the markup just to see if I could get it going from the New Post tabs and added a @liascript  function call that I found at the bottom from the new post page but have had no luck.

     

    <@liaAddScript>
    LITHIUM.TabGroup('#tabgroup', '.lia-tabs', '.lia-tabs-content', 'LITHIUM:changeTab', 'tabName', false, false);
    </@liaAddScript>


    <div id="tabgroup" class="lia-tabs-standard-wrapper">
    <ul class="lia-tabs-standard">
    <li class="lia-tabs rich-tab lia-tabs-active">
    <span><a class="lia-link-navigation rich-link tab-link lia-custom-event" id="link_2" href="#">Recent Posts</a></span>
    </li>
    <li class="lia-tabs html-tab lia-tabs-inactive">
    <span><a class="lia-link-navigation html-link tab-link lia-custom-event" id="link_3" href="#">Recent Solutions</a></span>
    </li>
    <li class="lia-tabs preview-tab lia-tabs-inactive">
    <span><a class="lia-link-navigation preview-link tab-link lia-custom-event" id="link_4" href="#">Featured Posts</a></span>
    </li>
    </ul>
    </div>
    <div class="recent-posts">
    Recent Posts code goes here.
    </div>
    <div class="recent-solutions lia-js-hidden">
    Recent Solutions code goes here.
    </div>
    <div class="featured-posts lia-js-hidden">
    Featured Posts code goes here
    </div>

  • PaoloT's avatar
    PaoloT
    Lithium Alumni (Retired)
    11 years ago

    Hi Custa1200 

     

    what is exactly the use case / journey that you are trying to achieve? Have you considered using libraries such as jQueryUI Tabs?

     

    Hope this helps,

  • Hi paolo, the use case is to create a tab system for a custom component by using what is already in Lithium without having to add even more code bloat of even more Javascript. I can't see why we shouldn't be able to hook up LITHIUM.TabGroups's
  • Hey - I am looking to do something similar. Did you get the answer you were looking for?