转载 jqueryui三 弹出窗口dialog dwz dialog 弹出窗口

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函数有一个强大的参数库，如下

【参数】

【代码示例】

<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时，窗口打开

爱华网本文地址 » http://www.aihuau.com/a/25101013/162223.html