advanced code snippet search

Posted By

tbelknap on 04/14/10


Tagged

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.

Expand | Embed | Plain Text 
  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. }
  8.  
  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.