Advanced Search

A Closable jQuery UI Tab

/ Published in: jQuery
Save to your folder(s)
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

Copy this code and paste it in your HTML 
  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


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.