I use jQuery UI tabs a lot in my web application development because
they are simple and do not provide a lot of unnecessary or bloaty
features, they are just plain tabs. It is easy and intuitive to dynamically
add tabs with the
add method. And, fairly easy to remove tabs
remove method. However, one large downside that I’ve
faced over and over is finding a way for a user to trigger the removal
of a tab with a close button on the tab like:
The reason, it’s difficult, is the capability is neither there by default nor by option and jQuery UI tabs are not the easiest plugin to extend. So, in the past, I have hacked such close buttons into my applications after the tabs have fully rendered. And I’ve also searched google for a clean solution, but I never really found an unobtrusive way to add a close button to the tabs in jQuery UI.
So, I wrote one.
2. Add a
closable option when instantiating the tabs:
When successful, all your tabs will have a close button like the above image.