jQuery 入门教程(33): jQuery UI Dialog 示例（一）

最新推荐文章于 2018-03-27 19:25:48 发布

最新推荐文章于 2018-03-27 19:25:48 发布 · 178 阅读

文章标签：

#javascript #ui #ViewUI

本文介绍了jQuery UI中的Dialog组件的基本用法及如何配置动画效果。通过示例代码展示了如何创建一个可移动、可调整大小并带有关闭按钮的对话框，并演示了如何通过设置使对话框在特定事件触发时以动画形式显示。

jQuery Dialog组件用来显示对话框，模式或非模式的。

基本用法

    1<!doctype html>

<htmllang="en"> 

<head> 

<metacharset="utf-8"/> 

<title>jQuery UI Demos</title> 

<linkrel="stylesheet"href="themes/trontastic/jquery-ui.css"/> 

<scriptsrc="scripts/jquery-1.9.1.js"></script> 

<scriptsrc="scripts/jquery-ui-1.10.1.custom.js"></script> 

<script> 

$(function () { 

$("#dialog").dialog(); 

}); 

</script> 

</head> 

<body> 



<divid="dialog"title="Basic dialog"> 

<p>This is the default dialog which 

is useful for displaying information. 

The dialog window can be moved, 

resized and closed with the 'x' icon.</p> 

</div> 





</body> 

</html>

对话框的缺省显示有“X”关闭按钮，可以缩放，移动。

动画显示效果
可以为对话框显示和关闭添加动画效果，如果不希望对话框一开始就显示（这可能是大部分情况，在点击按钮或是某个事件发生后再显示对话框）可以通过配置autoOpen=false来设置。

    1<!doctype html>

<htmllang="en"> 

<head> 

<metacharset="utf-8"/> 

<title>jQuery UI Demos</title> 

<linkrel="stylesheet"href="themes/trontastic/jquery-ui.css"/> 

<scriptsrc="scripts/jquery-1.9.1.js"></script> 

<scriptsrc="scripts/jquery-ui-1.10.1.custom.js"></script> 

<script> 

$(function () { 

$("#dialog").dialog({ 

autoOpen: false, 

show: { 

effect: "blind", 

duration: 1000 

}, 

hide: { 

effect: "explode", 

duration: 1000 

} 

}); 

    22

$("#opener").click(function () { 

$("#dialog").dialog("open"); 

}); 

}); 

</script> 

</head> 

<body> 



<divid="dialog"title="Basic dialog"> 

<p>This is an animated dialog which is useful 

for displaying information. 

The dialog window can be moved, 

resized and closed with the 'x' icon.</p> 

</div> 

<buttonid="opener">Open Dialog</button> 



</body> 

</html>