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

最新推荐文章于 2023-04-10 08:53:48 发布

iteye_19603

最新推荐文章于 2023-04-10 08:53:48 发布

阅读量121

点赞数

文章标签： javascript ui ViewUI

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>

show 和 hide支持的动画效果，后面再专门介绍，这些效果同时使用与其它方面，为jQuery支持的通用的动态效果。

iteye_19603

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery 入门教程(33): jQuery UI Dialog 示例（一）

jQuery Dialog组件用来显示对话框，模式或非模式的。基本用法1&lt;!doctype html&gt;2&lt;htmllang="en"&gt;3&lt;head&gt;4&lt;metacharset="utf-8"/&gt;5&lt;title&gt;jQuery UI Demos&lt;/title&am
复制链接

扫一扫