jQuery UI Library 创建带有选项卡式标题栏的对话框
示例
有时，我们可能希望显示具有多个内容窗格的对话框。jQueryUI提供的选项卡可与对话框一起使用，以实现此目的。虽然在对话框的内容容器中包含选项卡可能更常见，但是此示例将演示如何使选项卡列表成为对话框的标题栏。
的HTML
<button id="openButton">
Open Dialog
</button>
<div id="dialog" style="display:none">
<div class="ui-tabs">
<ul>
<li><a href="#tab_1">Tab 1</a></li>
<li><a href="#tab_2">Tab 2</a></li>
</ul>
<div id="tab_1">
<p>Tab 1 content...</p>
</div>
<div id="tab_2">
<p>Tab 2 content...</p>
</div>
</div>
</div>jQuery的
$(document).ready(function() {
//传递给jQueryUI对话框的选项
var options = {
position: {
my: "left top",
at: "left top",
of: window
},
autoOpen: false
};
/* Initialization */
//初始化对话框
var dialog = $("#dialog").dialog(options);
//初始化标签
var tabs = $(".ui-tabs").tabs();
/* Gather Elements Before Rearrangement */
var closeButton = dialog.siblings(".ui-dialog-titlebar").find(".ui-dialog-titlebar-close");
var initialTitlebar = dialog.siblings(".ui-dialog-titlebar");
//查找选项卡列表以创建标题栏，添加ui-dialog-titlebar类，然后附加关闭按钮
var tabbedTitlebar = dialog.find(".ui-tabs ul:first").addClass("ui-dialog-titlebar").append(closeButton);
/* Arranging */
//删除初始标题栏
$(initialTitlebar).remove();
//为tabbedTitlebar创建一个新的.ui-tabs容器
var tabbedTitlebarContainer = $("<div>", {
class: "ui-tabs"
}).append(tabbedTitlebar);
//将tabbedTitlebarContainer放在对话框容器之前
dialog.parents(".ui-dialog").prepend(tabbedTitlebarContainer);
/* Show the Dialog */
dialog.dialog("open");
var openButton = $("#openButton").button().click(function() {
dialog.dialog("open");
});
});供参考的工作示例：https://jsfiddle.net/5x4zz681/