Search code examples
jqueryjquery-uijquery-ui-tabs

jQuery UI tabs link for _blank webpage


In our format some pages must be in Tabs that's ok. But some of them must be open in a blank page...

Here is the html;

<div id="tablar">
    <div id="tabs">
        <ul>
            <li><a href="#tabs-1">Tüm Liste</a></li>
            <li><a rel="ex" href="gtl.aspx?EventId=2">Yeni Ekle</a></li>
            <li><a href="#tabs-2">Detaylı Arama</a></li>
            <li><a rel="ex" href="RaporGtl.aspx">Raporla</a></li>
        </ul>
        <div id="tabs-1">...

So How can i do that. I have try ;

$('#tablar #tabs ul li a').filter(function() {
    return $(this).attr('rel') == 'ex';
})
.unbind()
.click(function(e) {
    location.href = this.href;
    e.preventDefault();
});

But not working...

that turns #ui-tabs-2 at addressbar...


Solution

  • You're right, jquery will add a hash no matter what - but it could be circumvented:

    HTML

    <div id="tabs">
         <ul>
           <li id="li1"><a href="#tab-1">tab1</a></li>
           <li><a href="#tab-2">tab2</a></li>
           <li><a href="#l-http://www.google.com">google</a></li>
        </ul>
        <div id="tab-1">Tab 1 Content</div>
        <div id="tab-2">Tab 2 Content</div>
      </div>
    

    JavaScript

    $(function() {
      $('#tabs').tabs({
        select: function(e, ui) {
          if( $(ui.tab).attr('href').indexOf('#l-') == 0 ) {
              window.location.href = $(ui.tab).attr('href').substring(3);
          }
        }
      });
    });​​
    

    Basically, we are saying any a link with a href starting with #l- will be an actual link that gets followed. Cool, eh? Of course, you could do whatever you want to in the if statement, i just added a hard redirect.