gpt4 book ai didi

jquery - 向 jquery ui 选项卡添加关闭按钮?

转载 作者:行者123 更新时间:2023-12-01 01:56:20 25 4
gpt4 key购买 nike

默认情况下,jquery ui 选项卡对话框没有像对话框那样的关闭按钮?如何在上面添加一个呢?我指的关闭按钮是主对话框中的关闭按钮,而不是子选项卡中的按钮,谢谢。

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

最佳答案

给你...

<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

关于jquery - 向 jquery ui 选项卡添加关闭按钮?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14357614/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com