CODEWITHSUNDEEP
jquerytabsdialog
Joe
Joe

Reputation: 449

jQuery Tab custom event on one specific tab

I'm sure this is trivial for the more experienced. I'm trying to prevent one specified tab from looking for and opening its corresponding div. Instead, do whatever I specify, such as open a dialog.

I've tried binding to the tab then using return false and preventDefault(), which works on all tabs in general, but not the one specified when I narrow the selector, it just opens the div like a typical tab would, no errors from console.

I've also tried keeping that specific tab intentionally broken, without its div, which causes all kinds of goofy stuff... bad code anyways.

HTML

<div id="tabs">
  <ul>
    <li><a href="#tabs1">tabs 1</a></li>
    <li><a href="#tabs2">tabs 2</a></li>
    <li><a href="#customtab">custom tab</a></li>
  </ul>
  <div id="tabs1">
    etc
  </div>
  ..
  <div id="customtab">
    dialog content
  </div>
</div>

jQuery:

$("#tabs [href=#customtab]").bind('tabselect', function(){
  alert("do whatever I say here");
  return false;
});

Obviously my approach is wrong. Suggestions?

Thanks for your time!

Upvotes: 2

Views: 796

Answers (1)

Arun P Johny
Arun P Johny

Reputation: 388436

You need to use the beforeActivate event

$("#tabs").bind('tabsbeforeactivate', function (e, ui) {
    if (ui.newPanel.is('#customtab')) {
        console.log("do whatever I say here", ui);
        return false;
    }
});

Demo: Fiddle

If jQuery UI 1.8

$("#tabs").bind('tabsselect', function (e, ui) {
    if ($(ui.panel).is('#customtab')) {
        console.log("do whatever I say here", ui);
        return false;
    }
});

Demo: Fiddle

Upvotes: 3

Related Questions