jquery ui（三）弹出窗口 dialog javascript

jquery ui 提供了强大的dialog功能，基本能满足开发的功能。
一、先上一个简单的例子： 1、代码如下

这是一个弹出窗口---from ifxoxo.com

2、效果截图
jquery-ui-dialog截图 –ifxoxo.com
本文已经同步至我的个人博客站点：
jquery ui（三）弹出窗口 dialog ( http://ifxoxo.com/jquery-ui-dialog.html )
二、具体用法还是简单的，总结如下： 1、需要加载的js和css
请记住jquery 一定要在jquery-ui之前加载，加载错的会导致意想不到的结果。
（1）jquery
（2）jquery-ui
（3）jquery-ui的css

2、页面上的html
页面上需要一个装dialog的容器，需要一个固定ID,控制弹出窗口的内容，而html有两种方式：
（1）事先写在页面上（比如一个table,form）

.......
这里是窗口里面显示的内容 --ifxoxo.com

（2）不同情况的加载内容，可以定义一个空标签，待js加载 (或者ajax加载)

3、触发窗口弹出的js
主要函数如下：$(“dialog_div”).dialog();
dialog函数有一个强大的参数库，如下
【参数】

参数	默认值	作用
autoOpen	true	是否自动打开dialog窗口。当属性为false的时候，一开始隐藏窗口，直到.dialog(“open”)的时候才弹出dialog窗口
buttons	{}	显示一个按钮，并写上按钮的文本，设置按钮点击函数
closeOnEscpe	true	是否点击键盘ESC键关闭dialog
dialogClass	null	为窗口加上的class属性
diaggable resizable	true	是否能拖动、缩放（必须加载相应的js）
width height	auto	窗口的长宽
maxWidth maxHeight	null	长宽的最大值
minWidth minHeight	150	长宽的最小值
hide show	null	当dialog关闭和打开时候的效果。（必须加载相应的jquery.effects.xx.js）效果有：blind,bounce,clip,drop,explode,fade,fold, highlight,pulsate,puff,slide,scale,size,shake,transfer
modal	false	是否使用模式窗口，模式窗口打开后，页面其他元素将不能点击，直到关闭模式窗口
title	null	dialog的标题文字
position	center	dialog的显示位置：可以是’center’, ‘left’, ‘right’, ‘top’, ‘bottom’, 也可以是top和left的偏移量, 也可以是一个字符串数组例如['right','top']。
zIndex	1000	dialog的zindex值
stack	true	是否在dialog获得焦点是，dialog将在最上面
bgiframe	false	在IE6下，让后面那个灰屏盖住select(需要调用jquery.bgiframe.js)
disabled	false	当为true是，关掉这个dialog

示例代码如下：
>

$ ( function ( ) {
$ ( "#dialog" ). dialog ( {
autoOpen : false ,
show : "blind" ,
hide : "explode"，

buttons : {
"Ok" : function ( ) {
$ ( this ). dialog ( "close" ) ;
} ,
"Cancel" : function ( ) {
$ ( this ). dialog ( "close" ) ;
}
}
} ) ;

$ ( "#opener" ). click ( function ( ) {
$ ( "#dialog" ). dialog ( "open" ) ;
return false ;
} ) ;
} ) ;

这是弹框的内容 ---ifxoxo. com

4、其他
1、事件 (1) beforeclose 当dialog尝试关闭的时候此事件将被触发，如果返回false，那么关闭将被阻止
(2) close 关闭dialog的时候此事件将被触发
(3) open 打开dialog的时候此事件将被触发
(4) focus 获得焦点的时候此事件将被触发
(5) dragStart 开始拖动dialog的时候此事件将被触发
(6) drag 拖动dialog过程此事件将被触发
(7) resizeStart 开始缩放dialog的时候此事件将被触发
(8) resize 缩放dialog过程的时候此事件将被触发
(9) resizeStop 缩放结束的时候此事件将被触发
$ ( '.selector' ). dialog ( {
beforeclose : function (event , ui ) { ... }
} ) ; 2、方法 (1)destroy 摧毁例：.dialog( ‘destroy’ )
(2)disable dialog不可用，例：.dialog(‘disable’);
(3)enable dialog可用，
(4)close，open 关闭、打开dialog
(5)option 设置和获取dialog属性，
例如：.dialog( ‘option’ , optionName , [value] ) ，如果没有value，将是获取。
(6)isOpen 如果dialog打开则返回true，例如：.dialog(‘isOpen’)
(7)moveToTop 将dialog移到最上层，例如：.dialog( ‘moveToTop’ )。
//点击 opener时，窗口打开
$ ( "#opener" ). click ( function ( ) {
$ ( "#dialog" ). dialog ( "open" ) ;
return false ;
} ) ;
} ) ; 三、其他jquery ui 文章本文已经同步至我的个人博客站点：
jquery ui（三）弹出窗口 dialog ( http://ifxoxo.com/jquery-ui-dialog.html )
如果想查看其它jquery ui的文章，可以点击以下链接到个人博客查看
1、jquery ui（一）简介（ http://ifxoxo.com/jquery-ui-1.html ）
2、jquery ui（二）拖拽 draggable和droppable ( http://ifxoxo.com/jquery-ui-draggable.html )
3、jquery ui（三）弹出窗口 dialog ( http://ifxoxo.com/jquery-ui-dialog.html )
4、jquery ui（四）进度条 progressbar ( http://ifxoxo.com/jquery-ui-prodressbar.html )
5、jquery ui（五）日期选择器 datepicker ( http://ifxoxo.com/jquery-ui-datepicker.html )
6、jquery ui（六）拖动排序 sortable ( http://ifxoxo.com/jquery-ui-sortable.html )
【jquery ui（三）弹出窗口 dialog】