Posted By

tbelknap on 04/14/10



Versions (?)

Last Edited at 04/14/10 03:02pm

Viewed 1 times

A Closable jQuery UI Tab

/ Published in: jQuery

Sometimes, you need a jQuery tab that will close. Finding the right way to do that has been a challenge for me, personally. This is especially true when you are adding new tabs dynamically. The trick is getting the proper index of the closable element when its time to close.

  1. /*/////////////////////////////////////////
  2. // oesCloseTab: Closes the selected tab. //
  3. /////////////////////////////////////////*/
  4. jQuery.fn.oesCloseTab = function(elm) {
  5. var index = $('li').index($(elm).parent());
  6. $("#tabs").tabs('remove', index);
  7. }
  9. // To add this function to a tab, do this:
  10. var closer = $("<span class='ui-icon ui-icon-close'>Remove Tab</span>").click(function(){
  11. $().oesCloseTab(this);
  12. });
  13. $("#tabs yourULselector").find("li:last").append(closer);

Report this snippet


RSS Icon Subscribe to comments

You need to login to post a comment.