srcmini本文概述
该对话框用于在HTML页面上很好地呈现信息。 jQuery UI对话框方法用于创建一个基本的对话框窗口, 该窗口位于视口中并受页面内容的保护。它具有标题栏和内容区域, 默认情况下可以使用“ x”图标进行移动, 调整大小和关闭。
句法：
你可以通过两种形式使用对话()方法：
$(selector, context).dialog (options) Method$(selector, context).dialog ("action", [params]) Method第一种方法
$(selector, context).dialog (options) Methoddialog（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 | 此选项设置对话框的高度。默认情况下, 其值为“ auto”。 |
| 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]) Method:对话框（操作, 参数）方法用于在对话框上执行操作, 例如关闭对话框。该操作在第一个参数中指定为字符串, 并且可以选择使用一个或多个参数, 这些参数可以基于给定的操作使用一个或多个参数。
句法：
$(selector, context).dialog ("action", [params]);以下是与此方法一起使用的操作的列表：
| 行动 | 描述 |
|---|---|
| close() | 此操作用于关闭对话框。此方法不接受任何参数。 |
| destroy() | 此操作用于完全删除对话框。这将使元素返回其初始状态。此方法不接受任何参数。 |
| isOpen() | 此操作用于检查对话框是否打开。此方法不接受任何参数。 |
| moveToTop() | 此操作用于将位置分配给相应对话框的前景（在其他对话框的顶部）。此方法不接受任何参数。 |
| open() | 此操作用于打开对话框。此方法不接受任何参数。 |
| option(optionName) | 此操作获取当前与指定的optionName关联的值。其中optionName是要获取的选项的名称。 |
| option() | 此操作将获取一个对象, 该对象包含表示当前对话框选项哈希的键/值对。此方法不接受任何参数。 |
| option(optionName, value) | 此操作设置与指定的optionName关联的对话框选项的值。 |
| option( options) | 此操作为对话框设置一个或多个选项。 |
| 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>立即测试
评论前必须登录！
注册