JqueryUI - 对话( Dialog)
对话框是在HTML页面上显示信息的好方法之一。 对话框是一个带有标题和内容区域的浮动窗口。 此窗口可以移动，调整大小，当然，默认情况下使用“X”图标关闭。
jQueryUI提供了dialog()方法，该方法将页面上编写的HTML代码转换为HTML代码以显示对话框。
语法 (Syntax)
dialog()方法可以用两种形式 -
$ (selector, context).dialog（选项）方法
dialog (options)方法声明可以以对话框的形式管理HTML元素。 options参数是一个对象，它指定该窗口的外观和行为。语法 (Syntax)
$(selector, context).dialog(options);
您可以使用Javascript对象一次提供一个或多个选项。 如果要提供多个选项，则您将使用逗号分隔它们，如下所示 -
$(selector, context).dialog({option1: value1, option2: value2..... });
下表列出了可与此方法一起使用的不同options -
| Sr.No. | 选项和说明 |
|---|---|
| 1 | appendTo 如果此选项设置为false ，则会阻止将ui-draggable类添加到所选DOM元素的列表中。 默认情况下，其值为true 。 |
| 2 | autoOpen 此选项除非设置为false ，否则会在创建时打开该对话框。 如果为false ，则在调用对话框（“打开”）时将打开对话框。 默认情况下，其值为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 (the default), left, right, top, or 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 。 |
以下部分将向您展示一些对话功能的工作示例。
默认的功能 (Default functionality)
下面的示例演示了一个简单的对话框功能示例，它不向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的标准浏览器中打开它，您还必须看到以下输出。 现在，你可以玩结果 -
新页面打开使用按钮，标题和位置
以下示例演示了JqueryUI对话框小部件中三个选项buttons ， title和position的用法。
<!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的标准浏览器中打开它，您还必须看到以下输出。 现在，你可以玩结果 -
新页面打开使用皮革，表演和身高
以下示例演示了JqueryUI对话框小部件中三个选项hide ， show和height的用法。
<!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的标准浏览器中打开它，您还必须看到以下输出。 现在，你可以玩结果 -
新页面打开使用模态
以下示例演示了JqueryUI对话框小部件中三个选项buttons ， title和position的用法。
<!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方法，我们可以以字符串的形式使用它们。
语法 (Syntax)
$(selector, context).dialog ("action", [params]);
下表列出了此方法的操作 -
| Sr.No. | 行动和描述 |
|---|---|
| 1 | close() 此操作将关闭对话框。 此方法不接受任何参数。 |
| 2 | destroy() 此操作可以有效地删除对话框。 这将使元素返回到pre-init状态。 此方法不接受任何参数。 |
| 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类名注释的元素。 此方法不接受任何参数。 |
例子 (Example)
现在让我们看一个使用上表中的操作的示例。 以下示例演示了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的标准浏览器中打开它，你还必须看到以下输出 -
新页面打开对话框上的事件管理
除了我们在前面几节中看到的dialog（options）方法之外，JqueryUI还提供了为特定事件触发的事件方法。 这些事件方法如下 -
| Sr.No. | 事件方法和描述 |
|---|---|
| 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 Event方法
以下示例演示了使用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 Event方法
以下示例演示了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稳定性的扩展点。 列于上表中 。
| Sr.No. | 方法和描述 |
|---|---|
| 1 | _allowInteraction(event) 此方法允许用户通过将不是对话框子元素但允许用户能够使用的元素列入白名单来与给定目标元素进行交互。 event属于Event类型。 |
jQuery UI Widget Factory是一个可扩展的基础，可以在其上构建所有jQuery UI的小部件。 使用小部件工厂构建插件为状态管理提供了便利，也为常见任务提供了便利，例如公开插件方法和在实例化后更改选项。
