jquery ui（三）弹出窗口 dialog

发布时间：2020-07-23 15:32:04 作者：dearkerwin
来源：网络阅读：1674

jquery ui 提供了强大的dialog功能，基本能满足开发的功能。

一、先上一个简单的例子：

1、代码如下

<scriptsrc="http://code.jquery.com/jquery-1.9.1.js"></script>
<scriptsrc="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
<linkrel="stylesheet"href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css"/>
<script>
$(function() {
$( "#dialog" ).dialog({
buttons: { "Ok": function() { $(this).dialog("close"); } }
});
});
</script>
<divid="dialog"title="Basic dialog">
<p>
这是一个弹出窗口---from ifxoxo.com
</p>
</div>

2、效果截图

jquery-ui-dialog截图 –ifxoxo.com

二、具体用法还是简单的，总结如下：

1、需要加载的js和css

请记住jquery 一定要在jquery-ui之前加载，加载错的会导致意想不到的结果。

（1）jquery
（2）jquery-ui
（3）jquery-ui的css

2、页面上的html

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

<divid="dialog_div"title="弹出窗口的标题">
<from action=''> .......</from>
这里是窗口里面显示的内容 --ifxoxo.com
</div>

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

<divid="dialog_div" ></div>

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

示例代码如下：

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");
returnfalse;
});
});

三、其他相关联文章

1、jquery ui（一）简介
2、jquery ui（二）拖拽 draggable和droppable
3、jquery ui（三）弹出窗口 dialog
4、jquery ui（四）进度条 progressbar
5、jquery ui（五）日期选择器 datepicker