ui 탭에 닫기 버튼을 추가 하시겠습니까?

기본적으로 jquery UI 탭 대화 상자에는 대화 상자로 닫기 버튼이 없습니다. 어떻게 추가하나요? 참조하는 닫기 버튼은 주 대화 상자에있는 것이지만 하위 탭에는 없습니다. 감사합니다.ui 탭에 닫기 버튼을 추가 하시겠습니까?

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

출처

2013-01-16 user782104

나중에 가서 ...

<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>

데모 : JS FIDDLE

출처

2013-02-11 21:28:55 user2062764

좋은 해결책. 'live' 함수를'on'으로 변경하면 JQuery의 최신 버전에서 작동합니다. –