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?
Forum Discussion
- 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?
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>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,
