1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

Targeting Default Tabs

Discussion in 'XenForo Development Discussions' started by John L., Jul 12, 2011.

  1. John L.

    John L. Well-Known Member

    Hi All,

    We are working on a plugin that requires us in the backend to split the viewing of information into tabs (on the admin-side). I took a look at the HTML code generated for tabs and I don't see a way to target a tab after you have done something. So let me explain the scenario:

    1. You login to the backend and visit "Create Cool Node".
    2. You enter in your basic information and save that node.
    3. Once created that node has 3 new tabs (Cool Options, Cool People, and Cool Things).
      1. Note, the default tab is called "General Cool".
    4. You want to create a new cool option so you click on the "Cool Options" tab.
    5. You click to add a new "Cool Option" and fill in that information. Hit Save...
    I'll stop the scenario here. Now, when we hit save it takes us to back to the default first tab (General Cool) under "Edit Cool Node". Ideally we would like it to take us to the "Cool Options" tab under "Edit Cool Node". How do we do that? Right now I see no way of targeting those tab, either by URL or some other method. Thanks for the help!

    I'll provide screens if this is too confusing.
     
  2. John L.

    John L. Well-Known Member

    Does anyone have any idea?
     
  3. ragtek

    ragtek Guest

    10$ and you'll get the info:D (Took me 2 days for research... :( )

    For example, if you want to set the 3rd tab from the profile as active on pageload:
    Code:
    <script type="text/javascript">
    $(document).bind('XenForoActivationComplete', function(){
        $tabContainer = $('#profiletabs');
    
    var $api = $tabContainer.data('tabs');
    $current = $api.click(2);
    });
    
    </script>
    so you'll need your own event, which gets fired after the save and etc... (see my code^^ )
    this way i can manipulate the tab via url:
    Code:
    
    <script type="text/javascript">
        $(document).bind('XenForoActivationComplete', function() {
            $test = document.URL.split("#")[1];
            if ($test && $test == 'invitestab') {
                $tabContainer = $('#ragtektabs');
                var $api = $tabContainer.data('tabs');
                $current = $api.click(1);
            }
        });
    
    </script>
    now kier & mike need only to implement the url support, so we can set the active tab via URL like in vB and i'm happy:D
     
    iXanon and Cool like this.
  4. John L.

    John L. Well-Known Member

    We figured it out, but thanks for the info. :)

    I believe URL support is already there, please see jQuery Tools (tabs) for more information.
     
  5. ragtek

    ragtek Guest

    Haven't found anything
     
  6. LiquidPro

    LiquidPro Active Member

    This functionality was already built into jQuery Tools. In your tab specification, put a link. For example...

    HTML:
    <ul>
      <li><a href="#tab-1">Tab 1</a></li>
      <li><a href="#tab-2">Tab 2</a></li>
    </ul>
    Then if you put #tab-2 on the end of your URL it will take you to that specific tab.
     
  7. ragtek

    ragtek Guest

    http://xenforo.com/community/members/ragtek.82/#info ?? as you see it's not working
     
  8. John L.

    John L. Well-Known Member

  9. LiquidPro

    LiquidPro Active Member

    I believe the href would have to be set to just "#info" instead of "/community/members/ragtek.82/#info".
     
  10. ragtek

    ragtek Guest

Share This Page