Making an "Add Tab" button on jQuery UI tabs

Question

I have a jQuery UI tab control in my web page, and i want to make an "Add Tab" button having the same look than the tab titles (and located in the "tab bar", with other tab titles). I added an item in the list, with a specific class allowing me to make it float on the right. But I cannot remove the default action added by jQuery (on click, open related tab), which leads to an error, because the tab doesn't exist.

I tried several methods :

Disabling the tab makes it fade on the screen (removing the css I want)
Using unbind does not remove the onClick listener.
Setting another onClick listener does not work either, as it is simply ignored...

I'm losing my mind on this. Anyone can help me stay sane ?

jerone · Accepted Answer · 2011-02-14 12:42:27Z

1

You could use the select event and catch the event when clicked on your tab. In there you could make a new tab and give that focus.

answered Feb 14, 2011 at 12:42

jerone

17.1k4 gold badges42 silver badges58 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

belugabob · Accepted Answer · 2011-02-14 13:08:58Z

1

As Jerone pointed out, the select event is your friend.

Set the url of your 'Add' tab to "#Add" (Or some other value that can be used to uniquely identify that tab) Inside the event handler, check the value of ui.tab.hash, to check if this hash value is present and , if so, create the new tab, select it, and return 'false'. If the hash value doesn't match you magic value, then return 'true', to let the tab selection process continue as normal.

answered Feb 14, 2011 at 13:08

belugabob

4,47025 silver badges22 bronze badges

Collectives™ on Stack Overflow

Making an "Add Tab" button on jQuery UI tabs

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related