JqueryUI - 对话框小部件
对话框是在 HTML 页面上呈现信息的一种好方法。 对话框是一个带有标题和内容区域的浮动窗口。 此窗口可以移动、调整大小，当然也可以默认使用"X"图标关闭。
jQueryUI 提供了dialog() 方法，将写在页面上的HTML 代码转换成HTML 代码显示对话框。
语法
dialog() 方法有两种形式 −
$ (selector, context).dialog (options) 方法
dialog (options) 方法声明可以以对话框的形式管理 HTML 元素。 options 参数是一个指定该窗口的外观和行为的对象。语法
$(selector, context).dialog(options);
您可以使用 Javascript 对象一次提供一个或多个选项。 如果要提供多个选项，那么您将使用逗号分隔它们，如下所示 −
$(selector, context).dialog({option1: value1, option2: value2..... });
下表列出了可与此方法一起使用的不同选项 −
| 序号 | 选项 & 说明 |
|---|---|
| 1 | appendTo
如果此选项设置为 false，它将阻止将 ui-draggable 类添加到所选 DOM 元素的列表中。 默认情况下，它的值为 true。 |
| 2 | autoOpen
此选项除非设置为 false，否则对话框会在创建时打开。 当 false 时，对话框将在调用 dialog('open') 时打开。 默认情况下，它的值为 true。 |
| 3 | buttons
此选项在对话框中添加按钮。 这些被列为对象，每个属性都是按钮上的文本。 该值是用户单击按钮时调用的回调函数。 默认情况下，它的值为 {}。 |
| 4 | closeOnEscape
除非此选项设置为 false，否则当用户在对话框具有焦点时按 Escape 键时，对话框将关闭。 默认情况下，它的值为 true。 |
| 5 | closeText
此选项包含用于替换关闭按钮的默认关闭的文本。 默认情况下，它的值为 "close"。 |
| 6 | dialogClass
如果此选项设置为 false，它将阻止将 ui-draggable 类添加到所选 DOM 元素的列表中。 默认情况下，它的值为 ""。 |
| 7 | draggable
除非您将此选项设置为 false，否则可以通过单击并拖动标题栏来拖动对话框。 默认情况下，它的值为 true。 |
| 8 | height
此选项设置对话框的高度。 默认情况下，它的值为 "auto"。 |
| 9 | hide
该选项用于设置对话框关闭时使用的效果。 默认情况下，它的值为 null。 |
| 11 | maxHeight
此选项设置对话框可以调整大小的最大高度（以像素为单位）。 默认情况下，它的值为 false。 |
| 12 | maxWidth
此选项设置对话框可以调整大小的最大宽度，以像素为单位。 默认情况下，它的值为 false。 |
| 13 | minHeight
此选项是对话框可以调整到的最小高度（以像素为单位）。 默认情况下，它的值为 150。 |
| 14 | minWidth
此选项是对话框可以调整到的最小宽度（以像素为单位）。 默认情况下，它的值为 150。 |
| 15 | modal
如果此选项设置为 true，对话框将具有模态行为； 页面上的其他项目将被禁用，即无法与之交互。 模态对话框在对话框下方但在其他页面元素上方创建一个覆盖层。 默认情况下，它的值为 false。 |
| 16 | position
此选项指定对话框的初始位置。 可以是预定义位置之一:center (默认), left, right, top, 或 bottom。 也可以是一个 2 元素数组，其左值和上值（以像素为单位）如 [left,top]，或文本位置如 ['right','top']。 默认情况下，它的值为 { my: "center", at: "center", of: window }。 |
| 17 | resizable
此选项除非设置为 false，否则对话框可在所有方向调整大小。 默认情况下，它的值为 true。 |
| 18 | show
此选项是打开对话框时使用的效果。 默认情况下，它的值为 null。 |
| 20 | title
此选项指定显示在对话框标题栏中的文本。 默认情况下，它的值为 null。 |
| 21 | width
此选项以像素为单位指定对话框的宽度。 默认情况下，它的值为 300。 |
以下部分将向您展示一些对话框功能的工作示例。
默认功能
以下示例演示了一个不向 dialog() 方法传递参数的对话框功能的简单示例。
<!doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<title>jQuery UI Dialog functionality</title>
<link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
rel = "stylesheet">
<script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
<script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<!-- CSS -->
<style>
.ui-widget-header,.ui-state-default, ui-button {
background:#b9cd6d;
border: 1px solid #b9cd6d;
color: #FFFFFF;
font-weight: bold;
}
</style>
<!-- Javascript -->
<script>
$(function() {
$( "#dialog-1" ).dialog({
autoOpen: false,
});
$( "#opener" ).click(function() {
$( "#dialog-1" ).dialog( "open" );
});
});
</script>
</head>
<body>
<!-- HTML -->
<div id = "dialog-1"
title = "Dialog Title goes here...">This my first jQuery UI Dialog!</div>
<button id = "opener">Open Dialog</button>
</body>
</html>
让我们将上面的代码保存在一个 HTML 文件 dialogexample.htm 中，并在支持 javascript 的标准浏览器中打开它，您应该会看到以下输出。 现在，您可以查看结果 −
按钮、标题和位置的使用
下面的例子演示了三个选项buttons、title和position在JqueryUI的对话框部件中的用法。
<!doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<title>jQuery UI Dialog functionality</title>
<link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
rel = "stylesheet">
<script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
<script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<!-- CSS -->
<style>
.ui-widget-header,.ui-state-default, ui-button {
background:#b9cd6d;
border: 1px solid #b9cd6d;
color: #FFFFFF;
font-weight: bold;
}
</style>
<!-- Javascript -->
<script>
$(function() {
$( "#dialog-2" ).dialog({
autoOpen: false,
buttons: {
OK: function() {$(this).dialog("close");}
},
title: "Success",
position: {
my: "left center",
at: "left center"
}
});
$( "#opener-2" ).click(function() {
$( "#dialog-2" ).dialog( "open" );
});
});
</script>
</head>
<body>
<!-- HTML -->
<div id = "dialog-2"
title = "Dialog Title goes here...">This my first jQuery UI Dialog!</div>
<button id = "opener-2">Open Dialog</button>
</body>
</html>
让我们将上面的代码保存在一个 HTML 文件 dialogexample.htm 中，并在支持 javascript 的标准浏览器中打开它，您应该会看到以下输出。 现在，您可以查看结果 −
隐藏、显示和高度的使用
下面的例子演示了三个选项hide、show和height在JqueryUI的对话框部件中的用法。
<!doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<title>jQuery UI Dialog functionality</title>
<link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
rel = "stylesheet">
<script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
<script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<!-- CSS -->
<style>
.ui-widget-header,.ui-state-default, ui-button {
background:#b9cd6d;
border: 1px solid #b9cd6d;
color: #FFFFFF;
font-weight: bold;
}
</style>
<!-- Javascript -->
<script>
$(function() {
$( "#dialog-3" ).dialog({
autoOpen: false,
hide: "puff",
show : "slide",
height: 200
});
$( "#opener-3" ).click(function() {
$( "#dialog-3" ).dialog( "open" );
});
});
</script>
</head>
<body>
<!-- HTML -->
<div id = "dialog-3"
title = "Dialog Title goes here...">This my first jQuery UI Dialog!</div>
<button id = "opener-3">Open Dialog</button>
</body>
</html>
让我们将上面的代码保存在一个 HTML 文件 dialogexample.htm 中，并在支持 javascript 的标准浏览器中打开它，您应该会看到以下输出。 现在，您可以查看结果 −
模态的使用
下面的例子演示了三个选项buttons、title和position在JqueryUI的对话框部件中的用法。
<!doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<title>jQuery UI Dialog functionality</title>
<link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
rel = "stylesheet">
<script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
<script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<!-- CSS -->
<style>
.ui-widget-header,.ui-state-default, ui-button {
background:#b9cd6d;
border: 1px solid #b9cd6d;
color: #FFFFFF;
font-weight: bold;
}
</style>
<!-- Javascript -->
<script>
$(function() {
$( "#dialog-4" ).dialog({
autoOpen: false,
modal: true,
buttons: {
OK: function() {$(this).dialog("close");}
},
});
$( "#opener-4" ).click(function() {
$( "#dialog-4" ).dialog( "open" );
});
});
</script>
</head>
<body>
<!-- HTML -->
<div id = "dialog-4" title = "Dialog Title goes here...">This my first jQuery UI Dialog!</div>
<button id = "opener-4">Open Dialog</button>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt
ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat.
</p>
<label for = "textbox">Enter Name: </label>
<input type = "text">
</body>
</html>
让我们将上面的代码保存在一个 HTML 文件 dialogexample.htm 中，并在支持 javascript 的标准浏览器中打开它，您应该会看到以下输出。 现在，您可以查看结果 −
$ (selector, context).dialog ("action", [params]) 方法
dialog(action, params) 方法可以对对话框执行一个动作，比如关闭对话框。 action 在第一个参数中被指定为一个字符串，并且可选地，一个或多个 params 可以根据给定的操作提供。
基本上，这里的动作只是我们可以以字符串形式使用的 jQuery 方法。
语法
$(selector, context).dialog ("action", [params]);
下表列出了此方法的操作 −
| 序号 | 操作 & 说明 |
|---|---|
| 1 | close()
此操作关闭对话框。 此方法不接受任何参数。 |
| 2 | destroy()
此操作完全删除对话框。 这会将元素返回到其预初始化状态。 此方法不接受任何参数。 |
| 3 | isOpen()
此操作检查对话框是否打开。 此方法不接受任何参数。 |
| 4 | moveToTop()
此操作将相应的对话框定位到前台（在其他对话框之上）。 此方法不接受任何参数。 |
| 5 | open()
此操作会打开对话框。 此方法不接受任何参数。 |
| 6 | option( optionName )
此操作获取当前与指定 optionName 关联的值。 其中 optionName 是要获取的选项的名称。 |
| 7 | option()
此操作获取一个对象，其中包含表示当前对话框选项哈希的键/值对。 此方法不接受任何参数。 |
| 8 | option( optionName, value )
此操作设置与指定 optionName 相关联的对话框选项的值。 |
| 9 | option( options )
此操作为对话框设置一个或多个选项。 |
| 10 | widget()
此操作返回对话框的小部件元素； 用 ui-dialog 类名注释的元素。 此方法不接受任何参数。 |
示例
现在让我们看一个使用上表中的操作的示例。 以下示例演示了 isOpen()、open() 和 close() 方法的使用。
<!doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<title>jQuery UI Dialog functionality</title>
<link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
rel = "stylesheet">
<script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
<script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<!-- CSS -->
<style>
.ui-widget-header,.ui-state-default, ui-button {
background:#b9cd6d;
border: 1px solid #b9cd6d;
color: #FFFFFF;
font-weight: bold;
}
</style>
<!-- Javascript -->
<script type = "text/javascript">
$(function() {
$("#toggle").click(function() {
($("#dialog-5").dialog("isOpen") == false) ? $(
"#dialog-5").dialog("open") : $("#dialog-5").dialog("close") ;
});
$("#dialog-5").dialog({autoOpen: false});
});
</script>
</head>
<body>
<button id = "toggle">Toggle dialog!</button>
<div id = "dialog-5" title = "Dialog Title!">
Click on the Toggle button to open and close this dialog box.
</div>
</body>
</html>
让我们将上面的代码保存在一个 HTML 文件 dialogexample.htm 中，并在支持 javascript 的标准浏览器中打开它，您应该会看到以下输出 −
对话框事件管理
除了我们在前面部分看到的对话框（选项）方法之外，JqueryUI 还提供了事件方法，可以为特定事件触发。 下面列出了这些事件方法 −
| 序号 | 事件方法 & 说明 |
|---|---|
| 1 | beforeClose(event, ui)
当对话框即将关闭时触发此事件。 返回 false 可防止对话框关闭。 它对于表单验证失败的对话框很方便。 其中event是Event类型，ui是Object类型。 |
| 2 | close(event, ui)
该事件在对话框关闭时触发。 其中event是Event类型，ui是Object类型。 |
| 3 | create(event, ui)
创建对话框时会触发此事件。 其中event是Event类型，ui是Object类型。 |
| 4 | drag(event, ui)
当对话框在拖动过程中四处移动时，会重复触发此事件。 其中event是Event类型，ui是Object类型。 |
| 5 | dragStart(event, ui)
当通过拖动对话框的标题栏开始重新定位对话框时，将触发此事件。 其中event是Event类型，ui是Object类型。 |
| 6 | dragStop(event, ui)
当拖动操作终止时触发此事件。 其中event是Event类型，ui是Object类型。 |
| 7 | focus(event, ui)
当对话框获得焦点时触发此事件。 其中event是Event类型，ui是Object类型。 |
| 8 | open(event, ui)
当对话框打开时触发此事件。 其中event是Event类型，ui是Object类型。 |
| 9 | resize(event, ui)
调整对话框大小时会重复触发此事件。 其中event是Event类型，ui是Object类型。 |
| 10 | resizeStart(event, ui)
当对话框开始调整大小时触发此事件。 其中event是Event类型，ui是Object类型。 |
| 11 | resizeStop(event, ui)
当对话框的大小调整终止时触发此事件。 其中event是Event类型，ui是Object类型。 |
以下示例演示了上表中列出的事件的使用。
beforeClose 事件方法的使用
以下示例演示了 beforeClose 事件方法的使用。
<!doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<title>jQuery UI Dialog functionality</title>
<link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
rel = "stylesheet">
<script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
<script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<!-- CSS -->
<style>
.ui-widget-header,.ui-state-default, ui-button {
background:#b9cd6d;
border: 1px solid #b9cd6d;
color: #FFFFFF;
font-weight: bold;
}
.invalid { color: red; }
textarea {
display: inline-block;
width: 100%;
margin-bottom: 10px;
}
</style>
<!-- Javascript -->
<script type = "text/javascript">
$(function() {
$( "#dialog-6" ).dialog({
autoOpen: false,
buttons: {
OK: function() {
$( this ).dialog( "close" );
}
},
beforeClose: function( event, ui ) {
if ( !$( "#terms" ).prop( "checked" ) ) {
event.preventDefault();
$( "[for = terms]" ).addClass( "invalid" );
}
},
width: 600
});
$( "#opener-5" ).click(function() {
$( "#dialog-6" ).dialog( "open" );
});
});
</script>
</head>
<body>
<div id = "dialog-6">
<p>You must accept these terms before continuing.</p>
<textarea>This Agreement and the Request constitute the entire agreement of the
parties with respect to the subject matter of the Request. This Agreement shall be
governed by and construed in accordance with the laws of the State, without giving
effect to principles of conflicts of law.</textarea>
<div>
<label for = "terms">I accept the terms</label>
<input type = "checkbox" id = "terms">
</div>
</div>
<button id = "opener-5">Open Dialog</button>
</body>
</html>
让我们将上面的代码保存在一个 HTML 文件 dialogexample.htm 中，并在支持 javascript 的标准浏览器中打开它，您应该会看到以下输出 −
resize事件方法的使用
下面的例子演示了resize事件方法的使用。
<!doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<title>jQuery UI Dialog functionality</title>
<link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
rel = "stylesheet">
<script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
<script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<!-- CSS -->
<style>
.ui-widget-header,.ui-state-default, ui-button {
background:#b9cd6d;
border: 1px solid #b9cd6d;
color: #FFFFFF;
font-weight: bold;
}
</style>
<!-- Javascript -->
<script type = "text/javascript">
$(function() {
$( "#dialog-7" ).dialog({
autoOpen: false,
resize: function( event, ui ) {
$( this ).dialog( "option", "title",
ui.size.height + " x " + ui.size.width );
}
});
$( "#opener-6" ).click(function() {
$( "#dialog-7" ).dialog( "open" );
});
});
</script>
</head>
<body>
<div id = "dialog-7" title = "Dialog Title goes here..."
>Resize this dialog to see the dialog co-ordinates in the title!</div>
<button id = "opener-6">Open Dialog</button>
</body>
</html>
让我们将上面的代码保存在一个 HTML 文件 dialogexample.htm 中，并在支持 javascript 的标准浏览器中打开它，您应该会看到以下输出 −
扩展点
对话框小部件是用小部件工厂构建的，可以扩展。 要扩展小部件，我们可以覆盖或添加现有方法的行为。 以下方法作为扩展点提供与对话框方法相同的 API 稳定性。在上表中列出。
| 序号 | 方法 & 说明 |
|---|---|
| 1 | _allowInteraction(event)
此方法允许用户通过白名单元素与给定的目标元素进行交互，这些元素不是对话框的子元素，但允许用户能够使用。 其中 event 是 Event 类型。 |
jQuery UI Widget Factory 是一个可扩展的基础，所有 jQuery UI 的小部件都是基于它构建的。 使用小部件工厂构建插件为状态管理提供了便利，并为常见任务（如在实例化后公开插件方法和更改选项）提供了约定。
