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

Js Tabs + only link tab

Discussion in 'XenForo Development Discussions' started by ragtek, Apr 10, 2012.

  1. ragtek

    ragtek Guest

    Is there a way to have an xenforo tab as an normal link which redirects me to a page, instead of trying to show the content under the tabs?


    If you don't know what i mean:
    The first tabs should have the normal behaviour and then i want to add a new one, which shouldn't show the content, instead i wish to redirect to a own page
    link.PNG
     
  2. ragtek

    ragtek Guest

    That's what i tried, but didn't work
    Code:
    <ul id="ragtektabs" class="Tabs tabs" data-panes="#ragtek > li">
        <li>
            <a href="#">a</a>
        </li>
        <li>
            <a href="#">b</a>
        </li>
        <li>
            <a href="{xen:link mypage}">This one should redirect to the page instead of tabcontent</a>
        </li>
    <li>
     
  3. guiltar

    guiltar Well-Known Member

    Have you tried to bind a redirect to this link using js?
     
    ragtek likes this.
  4. ragtek

    ragtek Guest

    no^^
    i hoped there's a class which i can add to the li element^^
    will try it
    thx
     
  5. guiltar

    guiltar Well-Known Member

    Js is already binded to '.Tabs' and it seems to always returns false.
    Guess, tabs are not designed for it. I would place a link inside most appropriate tab.
    But you can also bind another js for redirect.
     
  6. ragtek

    ragtek Guest

    yea, i've added a id and it works with
    Code:
    $noTab = $("#noTab");
    console.log($noTab);
    $noTab.bind('click', function(){
    window.location = $noTab.data(url);
    });
    but it takes some time till the redirects works, so i'm seeing the active tab + empty page for ~2 sec

    what means that it works, but isn't optimal^^
     
  7. ragtek

    ragtek Guest

    thx for the idea:)
     
  8. Naatan

    Naatan Well-Known Member

    You're making things far more complicated than they need to be, you can simply use the following (with the example code given above):

    Code:
    $("#ragtektabs li:last-child a").unbind('click');
    For your information, the reason it took a while and you were seeing a blank tab is because you were not canceling the default click event. To fix your code:

    Code:
    $noTab.bind('click', function(e){
    window.location = $noTab.data(url);
    e.preventDefault();
    return false;
    });
    Also, I realize your code is just a prototype / sample, but I'd recommend you always use "var $noTab" as oppose to leaving out the var, which assigns it as a global variable (practically never a good idea).
     
    ragtek likes this.
  9. guiltar

    guiltar Well-Known Member

    Are you sure unbind will work correct if it will be loaded before bind? Last version of jQuery seem to solve this problem.
     
  10. Naatan

    Naatan Well-Known Member

    That's relative to when you call unbind of course. But you can fairly easily make sure you do that right either by listening to the relevant ajax request or validating with setInterval. Whereas his original solution would always be problematic as there's no way to guarantee his click event is triggered before the XF one.
     
  11. Naatan

    Naatan Well-Known Member

    Alternative solution:

    Code:
    var originalOnBeforeClick = XenForo.Tabs.prototype.onBeforeClick;
     
    XenForo.Tabs.prototype.onBeforeClick = function(e, index)
    {
        if ($(this).hasClass('regularLink')) return false;
        return originalOnBeforeClick.call(this, e, index);
    }
    Then just add class="regularLink" to your link.

    Might need a tweak or 2, I haven't tested it.
     
    guiltar likes this.
  12. guiltar

    guiltar Well-Known Member

    XF core does nothing except showing a new tab. So it doest'n matter when redirect will happen before or after the tab will be shown.
     
  13. Naatan

    Naatan Well-Known Member

    True but if you don't cancel or bypass the original event you will get a blank tab, which doesn't break anything but it's not pretty / user friendly.
     

Share This Page