jquery ui 提供了强大的dialog功能,基本能满足开发的功能。
本文已经同步至我的个人博客站点:
jquery ui(三)弹出窗口 dialog ( http://ifxoxo.com/jquery-ui-dialog.html )
请记住jquery 一定要在jquery-ui之前加载,加载错的会导致意想不到的结果。
(1)jquery
(2)jquery-ui
(3)jquery-ui的css
页面上需要一个装dialog的容器,需要一个固定ID,控制弹出窗口的内容,而html有两种方式:
(1)事先写在页面上(比如一个table,form)
(2)不同情况的加载内容,可以定义一个空标签,待js加载 (或者ajax加载)
主要函数如下:$(“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, |
modal | false | 是否使用模式窗口,模式窗口打开后,页面其他元素将不能点击,直到关闭模式窗口 |
title | null | dialog的标题文字 |
position | center | dialog的显示位置:可以是’center’, ‘left’, ‘right’, |
zIndex | 1000 | dialog的zindex值 |
stack | true | 是否在dialog获得焦点是,dialog将在最上面 |
bgiframe | false | 在IE6下,让后面那个灰屏盖住select(需要调用jquery.bgiframe.js) |
disabled | false | 当为true是,关掉这个dialog |
示例代码如下:
(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 缩放结束的时候此事件将被触发
(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’ )。
本文已经同步至我的个人博客站点:
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 )