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

原文地址:jqueryui(三)弹出窗口dialog作者:kerwin

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>
[转载]jqueryui(三)弹出窗口dialog dwz dialog 弹出窗口
<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函数有一个强大的参数库,如下

【参数】

参数默认值作用
autoOpentrue

是否自动打开dialog窗口。当属性为false的时候,一开始隐藏窗口,

直到.dialog("open")的时候才弹出dialog窗口

buttons{}显示一个按钮,并写上按钮的文本,设置按钮点击函数
closeOnEscpetrue是否点击键盘ESC键关闭dialog
dialogClassnull为窗口加上的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

modalfalse是否使用模式窗口,模式窗口打开后,页面其他元素将不能点击,直到关闭模式窗口
titlenulldialog的标题文字
positioncenter

dialog的显示位置:可以是'center', 'left', 'right','top', 'bottom',

也可以是top和left的偏移量,

也可以是一个字符串数组例如['right','top']。

zIndex1000dialog的zindex值
stacktrue是否在dialog获得焦点是,dialog将在最上面
bgiframefalse在IE6下,让后面那个灰屏盖住select(需要调用jquery.bgiframe.js)
disabledfalse当为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时,窗口打开

  

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

更多阅读

转载 宁乡三杰:齐璜·齐新·齐学启

原文地址:宁乡三杰:齐璜·齐新·齐学启作者:天空如同宁乡真的是一块神奇的热土,在这块热土上诞生过的历史风云人物不计其数。可以说,宁乡当之无愧是一个钟灵毓秀,人杰地灵的地方。今天我们要介绍的齐氏三杰,就是其中的佼佼者。  花明楼云

转载 简单三步自制懒人最爱的米饭吃法:腊味煲仔饭

原文地址:简单三步自制懒人最爱的米饭吃法:腊味煲仔饭作者:木棉的美食之旅博客好友已达上限,喜欢木棉博客的童鞋们请加关注,或是关注我的微博吧O(∩_∩)O~自古,国人就有“不时不食”的传统,在这气温始终徘徊在零度左右的寒冬,吃上一锅暖心

转载 阴三儿的“老师你好”太牛逼了 老师你好阴三

美中不足的是,他们没有拍MV原文地址:阴三儿的“老师你好”太牛逼了作者:阳光灿烂的日子这里把这首“老师你好”的歌词全文贴给大家,真是太牛逼了。想听歌的,自己去下吧。这后一个月的车里我就准备“阴三儿”系列了。想让我尊重你你得先

转载 张三丰真的活了212岁! 张三丰活了

原文地址:张三丰真的活了212岁!作者:上海证券会馆作者:许海锋题外话:一家之言,欢迎转载。 说到张三丰,历史上确实有这个人。众所周知,武当少林功夫,是中华武术

转载 第三卦屯水雷屯坎上震下 水雷屯

原文地址:第三卦屯水雷屯坎上震下作者:等火柴的香烟【原文】 屯①:元亨,利贞。勿用有攸往。利建侯。【译文】 屯卦。大吉大利,吉利的占卜。不利于出门。有利于建国封侯。【注释】①屯,卦名。本卦是异卦相叠(震下坎上)。震,表示雷。坎,表示雨

声明:《转载 jqueryui三 弹出窗口dialog dwz dialog 弹出窗口》为网友走开啊你分享!如侵犯到您的合法权益请联系我们删除