• This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn more.
  • This forum has been archived. New threads and replies may not be made. All add-ons/resources that are active should be migrated to the Resource Manager. See this thread for more information.

[How To]Adding Tabs to your pages

R

ragtek

Guest
#1
XenForo provides a easy to use js Class, to create own tabs.

You have to create a List with the tabs and add the class "Tabs tabs" to it.
There's also a data-panes attribute necessary, where you define the "content container"
Code:
<ul id="ragtektabs" class="Tabs tabs" data-panes="#ragtek > li">
As you see, my data-panes are the li elements in the ragtek container.


Code:
<ul id="ragtektabs" class="Tabs tabs" data-panes="#ragtek > li">
<li>
                <a href="foo">Tab1</a>
</li>
<li>
                <a href="foo2">Tab2</a>
</li>
<li>
                <a href="foo3">Tab3a>
</li>
</ul>
<ul id="ragtek">
<li>element1</li>
<li>elemen2</li>
<li>element3</li>
</ul>
Because we used the global Tab class, xenforo knows automatic, that we want a tab here.
You could use own classes, but then you have to register them to the tabs class.
Code:
<script type="text/javascript">
$(function()
{
        this.tabs = new XenForo.Tabs($(myTabs)));
}
</script>
 

Attachments

JVCode

Well-known member
#6
Linking to your profile doesn't help, especially when it's set to private and all members will see is "This member limits who may view their full profile."
 
R

ragtek

Guest
#7
I thought that everybody knows what a tab is and how it looks like in XenForo but ok, Screenshot added:D