jquery ui 提供了强大的dialog功能,基本能满足开发的功能。
先上一个简单的例子:
【代码】
<script>
$(function() {
$("#dialog" ).dialog({
buttons: { "Ok": function() { $(this).dialog("close"); }}
});
});
</script><div id="dialog" title="Basicdialog">
<p>This is the default dialog which is useful for displayinginformation.
The dialog window can be moved, resized and closed with the 'x'icon.
</p>
</div>
【效果图】
具体用法还是简单的,总结如下:
一、需要加载的js和css
请记住顺序,加载错的会导致意想不到的结果。
(1)jquery.js
(2)jquery.ui.core.js
(3)需要的效果:jquery.ui.xx.js
widget, mouse, diaggable, resizable, position的js,
如果不加载个别js,会导致窗口相应的功能失效,比如 定位,拖动,缩放。
(4)jquery.ui.dialog.js
(5)如果需要窗口弹出或者隐藏的 绚丽效果
a、需要加载 jquery.effects.core.js
b、加载相应的效果,如需要explode效果,加载jquery.effects.explode.js
【代码示例】
<scriptsrc="../js/jquery-1.7.1.js"></script>
<scriptsrc="../js/ui/jquery.ui.core.js"></script>
<scriptsrc="../js/ui/jquery.ui.widget.js"></script>
<scriptsrc="../js/ui/jquery.ui.mouse.js"></script>
<scriptsrc="../js/ui/jquery.ui.draggable.js"></script>
<scriptsrc="../js/ui/jquery.ui.resizable.js"></script>
<scriptsrc="../js/ui/jquery.ui.position.js"></script>
<scriptsrc="../js/ui/jquery.ui.dialog.js"></script>
<scriptsrc="../js/ui/jquery.effects.core.js"></script>
<scriptsrc="../js/ui/jquery.effects.blind.js"></script>
二、页面上的html
页面上需要一个装dialog的容器,需要一个固定ID,控制弹出窗口的内容。至于这个容器里面的内容,可以事先编进去(比如一个table,form),也可以在触发控件时在加载进去,或者ajax加载进去。
1、html固定格式的弹出窗口
<div id = "dialog_div"title="弹出窗口的标题">
这里是窗口里面显示的内容
</div>
2、不同情况的加载内容,可以定义一个空标签,待js加载
<div id = "dialog_div" ></div>
三、触发窗口弹出的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 |
【代码示例】
<script>
// increase the default animation speed toexaggerate the effect
$(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;
});
});
</script><div id="dialog" title="Basicdialog">
<p>This is an animated dialog whichis useful for displaying information. The dialog window can bemoved, resized and closed with the 'x'icon.</p>
</div><buttonid="opener">OpenDialog</button>
四、其他
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)disabledialog不可用,例:.dialog('disable');
(3)enabledialog可用,(4)close,open 关闭、打开dialog
(5)option设置和获取dialog属性,例如:.dialog( 'option' , optionName , [value] ),如果没有value,将是获取。
(6)isOpen如果dialog打开则返回true,例如:.dialog('isOpen')
(7)moveToTop将dialog移到最上层,例如:.dialog( 'moveToTop' )。
【示例】
$( "#opener" ).click(function() {
$( "#dialog" ).dialog( "open" );
return false;
});
});//点击 opener时,窗口打开