1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.
  2. 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

Discussion in 'Development Tutorials [Archive]' started by ragtek, Oct 25, 2010.

  1. ragtek

    ragtek Guest

    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>
    
     

    Attached Files:

  2. Floris

    Floris Guest

    <vborg> screenshot! </vborg>
     
  3. ragtek

    ragtek Guest

  4. JVCode

    JVCode Well-Known Member

    Post a screenshot.:p
     
  5. ragtek

    ragtek Guest

  6. JVCode

    JVCode Well-Known Member

    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."
     
  7. ragtek

    ragtek Guest

    I thought that everybody knows what a tab is and how it looks like in XenForo but ok, Screenshot added:D
     
  8. beduino

    beduino Active Member

    Thank you ragtek :D
     
  9. Anthony Parsons

    Anthony Parsons Well-Known Member

  10. Bob

    Bob Well-Known Member

Share This Page