2

默认情况下，jquery ui 选项卡对话框没有关闭按钮作为对话框？怎么加一个呢？我指的关闭按钮是主对话框中的那个，但不是子选项卡，谢谢。

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

2 回答 2

10

给你...

<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-11T21:28:55.060 回答
7

我知道这是一篇旧文章，但使用最新的 JQuery 可以轻松完成：

关闭按钮示例

于 2013-08-05T15:40:27.713 回答