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 ?

Answer 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.

Answer 2

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.