Posted By

tbelknap on 04/14/10


jquery tabs close ui

Versions (?)

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  

You need to login to post a comment.