jQuery UI Dialog
Dialog用于在HTML页面上很好地呈现信息。 jQuery UI Dialog方法用于创建一个基本的对话框窗口，该窗口位于视口中并受页面内容的保护。它具有标题栏和内容区域，并且默认情况下可以使用" x"图标进行移动，调整大小和关闭。
语法:
您可以以两种形式使用对话框()方法:
$(selector, context).dialog (options)
$(selector, context).dialog ("action", [params])
第一种方法
$(selector, context).dialog (options)
dialog(options)方法指定您可以使用对话框形式的HTML元素。在这里，options参数是一个对象，用于指定该窗口的外观和行为。
语法:
$(selector, context).dialog(options);
您可以一次使用JavaScript对象使用一个或多个选项。如果有多个选项，则必须使用逗号将它们分开，如下所示:
$(selector, context).dialog({option1: value1, option2: value2..... });
以下是可与该方法一起使用的不同选项的列表:
| 选项 |
说明 |
| appendto |
如果将此选项设置为false，将防止将UI可拖动类添加到所选DOM元素列表中。默认情况下，其值为true。 |
| autoopen |
如果将此选项设置为true，则在创建时将打开对话框。如果为false，则在调用dialog('open')时将打开对话框。默认情况下，其值为true。 |
| buttons |
此选项在对话框中添加按钮。这些列为对象，每个属性都是按钮上的文本。该值是用户单击按钮时调用的回调函数。默认情况下，其值为{}。 |
| closeonescape |
除非您将此选项设置为false，否则当对话框具有焦点时用户按退出键时，该对话框将关闭。默认情况下，其值为true。 |
| closetext |
此选项包含用于替换关闭按钮的默认关闭文本的文本。默认情况下，其值为"关闭"。 |
| dialogclass |
如果将此选项设置为false，将防止将UI拖动类添加到所选dom元素列表中。默认情况下，其值为""。 |
| draggable |
将此选项设置为false，通过单击并拖动标题栏将可拖动对话框。默认情况下，其值为true。 |
| height |
此选项设置对话框的高度。默认情况下，其值为"自动"。 |
| hide |
此选项用于设置关闭对话框时要使用的效果。默认情况下，其值为null。 |
| maxheight |
此选项设置对话框的最大高度(以像素为单位)。默认情况下，其值为false。 |
| maxwidth |
此选项设置对话框可调整大小的最大宽度(以像素为单位)。默认情况下，其值为false。 |
| minheight |
此选项是对话框可以调整大小的最小高度(以像素为单位)。默认情况下，其值为150。 |
| minwidth |
此选项是对话框可调整大小的最小宽度(以像素为单位)。默认情况下，其值为150。 |
| modal |
如果此选项设置为true，则对话框将具有模式行为；页面上的其他项目将被禁用，即无法与之交互。模式对话框在对话框下方但在其他页面元素上方创建一个叠加层。默认情况下，其值为false。 |
| position |
此选项指定对话框的初始位置。可以是预定义位置之一: 居中(默认)，左，右，上或下。也可以是2元素数组，其左值和顶部值(以像素为单位)为[left，top]，或文本位置，例如['right'，'top']。默认情况下，其值为{my: " center"，位于: " center"，of: window}。 |
| resizeable |
此选项除非设置为false，否则对话框在各个方向上均可调整大小。默认情况下，其值为true。 |
| show |
此选项是打开对话框时要使用的效果。默认情况下，其值为null。 |
| title |
此选项指定要显示在对话框标题栏中的文本。默认情况下，其值为null。 |
| width |
此选项指定对话框的宽度(以像素为单位)。默认情况下，其值为300。 |
jQuery UI对话框示例1
让我们举一个简单的示例来演示对话框功能的用法，该功能不将任何参数传递给dialog()方法。
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Dialog functionality</title>
<link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://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="Movie Title:Psycho (1960)">"A boy's best friend is his mother." </div>
<button id="opener">Open Dialog</button>
</body>
</html>
jQuery UI对话框示例2
按钮，标题和位置的使用:
让我们以一个示例来演示对话框小部件中三个选项按钮，标题和位置的用法。
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Dialog functionality</title>
<link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<!-- CSS -->
<style>
.ui-widget-header,.ui-state-default, ui-button{
background:lightgreen;
border: 1px solid #b9cd6d;
color: black;
font-weight: bold;
}
</style>
<!-- Javascript -->
<script>
$(function() {
$( "#dialog-2").dialog({
autoOpen: false,
buttons: {
OK: function() {$(this).dialog("close");}
},
title: "Movie Title:Sholey",
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...">Are O Sambha:Kitna inaam rakhi hai re sarkar hum par.</div>
<button id="opener-2">Open Dialog</button>
</body>
</html>
jQueryUI对话框示例3
隐藏，显示和高度的使用:
让我们以一个示例来演示用法这些选项中的隐藏，显示和高度。
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Dialog functionality</title>
<link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<!-- CSS -->
<style>
.ui-widget-header,.ui-state-default, ui-button{
background: lightyellow;
border: 1px solid #b9cd6d;
color: black;
font-weight: bold;
}
</style>
<!-- Javascript -->
<script>
$(function() {
$( "#dialog-3").dialog({
autoOpen: false,
hide: "slide",
show : "slide",
height: 200
});
$( "#opener-3").click(function() {
$( "#dialog-3").dialog( "open");
});
});
</script>
</head>
<body>
<!-- HTML -->
<div id="dialog-3" title="This is a title.">This is a dialog.</div>
<button id="opener-3">Open Dialog</button>
</body>
</html>
第二种方法
$(selector, context).dialog ("action", [params]):
dialog ("action", [params])方法用于在对话框上执行操作，例如关闭对话框。该操作在第一个参数中指定为字符串，并且可以选择使用一个或多个参数(基于给定操作)一个或多个参数。
语法:
$(selector, context).dialog ("action", [params]);
以下是与此方法一起使用的操作的列表:
动作
|
说明 |
| close() |
此操作用于关闭对话框。此方法不接受任何参数。 |
| destroy() |
此操作用于完全删除对话框。这将使元素返回其初始状态。此方法不接受任何参数。 |
| isOpen() |
此操作用于检查对话框是否打开。此方法不接受任何参数。 |
| moveToTop() |
此操作用于将位置分配给相应对话框的前景(在其他对话框的顶部)。此方法不接受任何参数。 |
| open() |
此操作用于打开对话框。此方法不接受任何参数。 |
| option(optionName) |
此操作获取当前与指定的optionName关联的值。其中optionName是要获取的选项的名称。 |
| option() |
此操作获取一个对象，该对象包含表示当前对话框选项哈希的键/值对。此方法不接受任何参数。 |
| option(optionName，value) |
此操作设置与指定的optionName关联的对话框选项的值。 |
| option(选项) |
此操作为对话框设置一个或多个选项。 |
| widget() |
此动作用于返回对话框的小部件元素；用ui-dialog类名注释的元素。此方法不接受任何参数。 |
jQuery UI对话框示例4
让我们以一个简单的示例来演示isOpen()，open()和close()方法的用法。
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Dialog functionality</title>
<link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://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 cose this dialog box.
</div>
</body>
</html>
