Ajouter le bouton de fermeture aux onglets de jquery ui?

Par défaut, la boîte de dialogue onglets jquery ui n'a pas de bouton de fermeture comme la boîte de dialogue? Comment en ajouter un? Le bouton de fermeture que je referme est celui de la boite de dialogue principale mais pas les sous-onglets, merci.Ajouter le bouton de fermeture aux onglets de jquery ui?

$("#tabs").tabs({open: function(event, ui) { $(".ui-dialog-titlebar-close", ui.dialog || ui).show();});

Source

2013-01-16 user782104

Here ya go ...

<html lang="en"> 
<head> 
    <meta charset="utf-8" /> 
    <title>jQuery UI Tabs - Default functionality</title> 
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.0/themes/base/jquery-ui.css" /> 
    <script src="http://code.jquery.com/jquery-1.8.3.js"></script> 
    <script src="http://code.jquery.com/ui/1.10.0/jquery-ui.js"></script> 
    <script> 
    $(function() { 
    $("#tabs").tabs(); 
    $(".ui-closable-tab").live("click", function() { 
     var tabContainerDiv=$(this).closest(".ui-tabs").attr("id"); 
     var panelId = $(this).closest("li").remove().attr("aria-controls"); 
     $("#" + panelId).remove(); 
     $("#"+tabContainerDiv).tabs("refresh"); 
     var tabCount=$("#"+tabContainerDiv).find(".ui-closable-tab").length; 
     if (tabCount<1) { 
      $("#"+tabContainerDiv).hide(); 
     } 
    }); 
    }); 
    </script> 
    <style> 
    .ui-icon-circle-close { 
    cursor:pointer; 
    } 
    </style> 
</head> 
<body> 

<div id="tabs"> 
    <ul> 
    <li><a href="#tabs-1">Nunc tincidunt</a><span class='ui-icon ui-icon-circle-close ui-closable-tab'></span></li> 
    <li><a href="#tabs-2">Proin dolor</a><span class='ui-icon ui-icon-circle-close ui-closable-tab'></span></li> 
    <li><a href="#tabs-3">Aenean lacinia</a><span class='ui-icon ui-icon-circle-close ui-closable-tab'></span></li> 
    </ul> 
    <div id="tabs-1"> 
    <p>Tab 1 Content</p> 
    </div> 
    <div id="tabs-2"> 
    <p>Tab 2 Content</p> 
    </div> 
    <div id="tabs-3"> 
    <p>Tab 3 Content</p> 
    </div> 
</div> 
</body> 
</html>

Démo: JS FIDDLE

Source

2013-02-11 21:28:55 user2062764

Belle solution. Cela fonctionnera avec les versions plus récentes de JQuery si vous changez la fonction 'live' en' on'. –