`
- 浏览:
339003 次
- 性别:
- 来自:
南宁
-
-
·概述
-
一个浮动的窗口,包含标题和内容两部分。可以移动,调整大小,以及关闭图标
'×'
。
-
如果内容长度超过了对话框内容区域的显示,则会自动出现滚动条。
-
除此之外,还有一些常用的选项,如:添加底部按钮栏、模式窗口屏蔽层等。
-
官方示例地址:http:
//jqueryui.com/demos/dialog/
-
-
·参数(名称 : 参数类型 : 默认值)
-
autoOpen : Boolean :
true
-
如果设置为
true
,则默认页面加载完毕后,就自动弹出对话框;相反则处理hidden状态。
-
初始:$(
'.selector'
).dialog({ autoOpen:
false
});
-
获取:
var
autoOpen = $(
'.selector'
).dialog(
'option'
,
'autoOpen'
);
-
设置:$(
'.selector'
).dialog(
'option'
,
'autoOpen'
,
false
);
-
-
bgiframe : Boolean :
false
-
如果设置为
true
,则调用bgiframe插件,用于修复在IE6浏览器中无法显示于其它控件(select,flash)之上的问题。
-
初始:$(
'.selector'
).dialog({ bgiframe:
true
});
-
获取:
var
bgiframe = $(
'.selector'
).dialog(
'option'
,
'bgiframe'
);
-
设置:$(
'.selector'
).dialog(
'option'
,
'bgiframe'
,
true
);
-
-
buttons : Object : { }
-
为对话框添加相应的按钮及处理函数。
-
初始:$(
'.selector'
).dialog({ buttons: {
"Ok"
:
function
() { $(
this
).dialog(
"close"
); } } });
-
获取:
var
buttons = $(
'.selector'
).dialog(
'option'
,
'buttons'
);
-
设置:$(
'.selector'
).dialog(
'option'
,
'buttons'
, {
"Ok"
:
function
() { $(
this
).dialog(
"close"
); } });
-
-
closeOnEscape : Boolean :
true
-
设置当对话框打开的时候,用户按ESC键是否关闭对话框。
-
初始:$(
'.selector'
).dialog({ closeOnEscape:
false
});
-
获取:
var
closeOnEscape = $(
'.selector'
).dialog(
'option'
,
'closeOnEscape'
);
-
设置:$(
'.selector'
).dialog(
'option'
,
'closeOnEscape'
,
false
);
-
-
dialogClass : String :
''
-
设置指定的类名称,它将显示于对话框的标题处。
-
初始:$(
'.selector'
).dialog({ dialogClass:
'alert'
});
-
获取:
var
dialogClass = $(
'.selector'
).dialog(
'option'
,
'dialogClass'
);
-
设置:$(
'.selector'
).dialog(
'option'
,
'dialogClass'
,
'alert'
);
-
-
draggable : Boolean :
true
-
如果设置为
true
,则允许拖动对话框的标题栏移动窗口。
-
初始:$(
'.selector'
).dialog({ draggable:
false
});
-
获取:
var
draggable = $(
'.selector'
).dialog(
'option'
,
'draggable'
);
-
设置:$(
'.selector'
).dialog(
'option'
,
'draggable'
,
false
);
-
-
height : Number :
'auto'
-
设置对话框的高度(单位:像素)。
-
初始:$(
'.selector'
).dialog({ height: 530 });
-
获取:
var
height = $(
'.selector'
).dialog(
'option'
,
'height'
);
-
设置:$(
'.selector'
).dialog(
'option'
,
'height'
, 530);
-
-
hide : String :
null
-
使对话框关闭(隐藏),可添加动画效果。
-
初始:$(
'.selector'
).dialog({ hide:
'slide'
});
-
获取:
var
hide = $(
'.selector'
).dialog(
'option'
,
'hide'
);
-
设置:$(
'.selector'
).dialog(
'option'
,
'hide'
,
'slide'
);
-
-
maxHeight : Number :
false
-
设置对话框的最大高度(单位:像素)。
-
初始:$(
'.selector'
).dialog({ maxHeight: 400 });
-
获取:
var
maxHeight = $(
'.selector'
).dialog(
'option'
,
'maxHeight'
);
-
设置:$(
'.selector'
).dialog(
'option'
,
'maxHeight'
, 400);
-
-
maxWidth : Number :
false
-
设置对话框的最大宽度(单位:像素)。
-
初始:$(
'.selector'
).dialog({ maxWidth: 600 });
-
获取:
var
maxWidth = $(
'.selector'
).dialog(
'option'
,
'maxWidth'
);
-
设置:$(
'.selector'
).dialog(
'option'
,
'maxWidth'
, 600);
-
-
minHeight : Number : 150
-
设置对话框的最小高度(单位:像素)。
-
初始:$(
'.selector'
).dialog({ minHeight: 300 });
-
获取:
var
minHeight = $(
'.selector'
).dialog(
'option'
,
'minHeight'
);
-
设置:$(
'.selector'
).dialog(
'option'
,
'minHeight'
, 300);
-
-
minWidth : Number : 150
-
设置对话框的最小宽度(单位:像素)。
-
初始:$(
'.selector'
).dialog({ minWidth: 400 });
-
获取:
var
minWidth = $(
'.selector'
).dialog(
'option'
,
'minWidth'
);
-
设置:$(
'.selector'
).dialog(
'option'
,
'minWidth'
, 400);
-
-
modal : Boolean :
false
-
是否为模式窗口。如果设置为
true
,则在页面所有元素之前有个屏蔽层。
-
初始:$(
'.selector'
).dialog({ modal:
true
});
-
获取:
var
modal = $(
'.selector'
).dialog(
'option'
,
'modal'
);
-
设置:$(
'.selector'
).dialog(
'option'
,
'modal'
,
true
);
-
-
position : String, Array :
'center'
-
设置对话框的初始显示位置。可选值:
'center'
,
'left'
,
'right'
,
'top'
,
'bottom'
, 或是一个数组[
'right'
,
'top'
]
-
初始:$(
'.selector'
).dialog({ position:
'top'
});
-
获取:
var
position = $(
'.selector'
).dialog(
'option'
,
'position'
);
-
设置:$(
'.selector'
).dialog(
'option'
,
'position'
,
'top'
);
-
-
resizable : Boolean :
true
-
设置对话框是否可以调整大小。
-
初始:$(
'.selector'
).dialog({ resizable:
false
});
-
获取:
var
resizable = $(
'.selector'
).dialog(
'option'
,
'resizable'
);
-
设置:$(
'.selector'
).dialog(
'option'
,
'resizable'
,
false
);
-
-
show : String :
null
-
用于显示对话框。
-
初始:$(
'.selector'
).dialog({ show:
'slide'
});
-
获取:
var
show = $(
'.selector'
).dialog(
'option'
,
'show'
);
-
设置:$(
'.selector'
).dialog(
'option'
,
'show'
,
'slide'
);
-
-
stack : Boolean :
true
-
设置移动时对话框是否前置于其它的对话框前面。
-
初始:$(
'.selector'
).dialog({ stack:
false
});
-
获取:
var
stack = $(
'.selector'
).dialog(
'option'
,
'stack'
);
-
设置:$(
'.selector'
).dialog(
'option'
,
'stack'
,
false
);
-
-
title : String :
''
-
指定对话框的标题,也可以在对话框附加元素的title属性中设置标题。
-
初始:$(
'.selector'
).dialog({ title:
'Dialog Title'
});
-
获取:
var
title = $(
'.selector'
).dialog(
'option'
,
'title'
);
-
设置:$(
'.selector'
).dialog(
'option'
,
'title'
,
'Dialog Title'
);
-
-
width : Number : 300
-
设置对话框的宽度(单位:像素)。
-
$(
'.selector'
).dialog({ width: 460 });
-
获取:
var
width = $(
'.selector'
).dialog(
'option'
,
'width'
);
-
设置:$(
'.selector'
).dialog(
'option'
,
'width'
, 460);
-
-
zIndex : Integer : 1000
-
设置对话框的zindex值。
-
初始:$(
'.selector'
).dialog({ zIndex: 3999 });
-
获取:
var
zIndex = $(
'.selector'
).dialog(
'option'
,
'zIndex'
);
-
设置:$(
'.selector'
).dialog(
'option'
,
'zIndex'
, 3999);
-
-
-
·事件
-
beforeclose : dialogbeforeclose
-
当对话框关闭之前,触发此事件。如果返回
false
,则对话框仍然显示。
-
初始:$(
'.selector'
).dialog({ beforeclose:
function
(event, ui) { ... } });
-
绑定:$(
'.selector'
).bind(
'dialogbeforeclose'
,
function
(event, ui) { ... });
-
-
open : dialogopen
-
当对话框打开后,触发此事件。
-
初始:$(
'.selector'
).dialog({ open:
function
(event, ui) { ... } });
-
绑定:$(
'.selector'
).bind(
'dialogopen'
,
function
(event, ui) { ... });
-
-
focus : dialogfocus
-
当对话框获取焦点时,触发此事件。
-
初始:$(
'.selector'
).dialog({ focus:
function
(event, ui) { ... } });
-
绑定:$(
'.selector'
).bind(
'dialogfocus'
,
function
(event, ui) { ... });
-
-
dragStart : dragStart
-
当开始拖拽对话框移动时,触发此事件。
-
初始:$(
'.selector'
).dialog({ dragStart:
function
(event, ui) { ... } });
-
绑定:$(
'.selector'
).bind(
'dragStart'
,
function
(event, ui) { ... });
-
-
drag : drag
-
当拖拽对话框移动时,触发此事件。
-
初始:$(
'.selector'
).dialog({ drag:
function
(event, ui) { ... } });
-
绑定:$(
'.selector'
).bind(
'drag'
,
function
(event, ui) { ... });
-
-
dragStop : dragStop
-
当拖拽对话框动作结束时,触发此事件。
-
初始:$(
'.selector'
).dialog({ dragStop:
function
(event, ui) { ... } });
-
绑定:$(
'.selector'
).bind(
'dragStop'
,
function
(event, ui) { ... });
-
-
resizeStart : resizeStart
-
当开始改变对话框大小时,触发此事件。
-
初始:$(
'.selector'
).dialog({ resizeStart:
function
(event, ui) { ... } });
-
绑定:$(
'.selector'
).bind(
'resizeStart'
,
function
(event, ui) { ... });
-
-
resize : resize
-
当对话框大小改变时,触发此事件。
-
初始:$(
'.selector'
).dialog({ resize:
function
(event, ui) { ... } });
-
绑定:$(
'.selector'
).bind(
'resize'
,
function
(event, ui) { ... });
-
-
resizeStop : resizeStop
-
当对话框大小改变结束时,触发此事件。
-
初始:$(
'.selector'
).dialog({ resizeStop:
function
(event, ui) { ... } });
-
绑定:$(
'.selector'
).bind(
'resizeStop'
,
function
(event, ui) { ... });
-
-
close : dialogclose
-
当对话框关闭后,触发此事件。
-
初始:$(
'.selector'
).dialog({ close:
function
(event, ui) { ... } });
-
绑定:$(
'.selector'
).bind(
'dialogclose'
,
function
(event, ui) { ... });
-
-
-
·属性
-
destroy
-
销毁对话框对象。
-
用法:.dialog(
'destroy'
)
-
-
disable
-
禁用对话框。
-
用法:.dialog(
'disable'
)
-
-
enable
-
启用对话框。
-
用法:.dialog(
'enable'
)
-
-
option
-
获取或设置对话框的属性。
-
用法:.dialog(
'option'
, optionName , [value] )
-
-
close
-
关闭对话框。
-
用法:.dialog(
'close'
)
-
-
isOpen
-
用于判断对话框是否处理打开状态。
-
用法:.dialog(
'isOpen'
)
-
-
moveToTop
-
将对话框移至最顶层显示。
-
用法:.dialog(
'moveToTop'
)
-
-
open
-
打开对话框。
-
用法:.dialog(
'open'
)
分享到:
Global site tag (gtag.js) - Google Analytics
相关推荐
里面是经过修改的jquery.ui.dialog.js(版本jQuery UI Dialog 1.8.12),添加了parentElement: 'body',详情查看http://forum.jquery.com/topic/dialog-will-move-its-div-tag-to-body
jq ui dialog 示例jq ui dialog 示例漂亮哦.可以比美EXT哦.喜欢的同学们快来
formValidator代码生成器+jQuery+formValidator+jquery.ui.dialog
JQuery.UI.Dialog的封装,方便开发时的使用,供大家一起共同分享学习。
jQuery.dialog.js插件实现漂亮的轻量级对话框效果,多种样式jQuery网页弹出对话框美化特效。
本文实例讲述了jquery弹出框插件jquery.ui.dialog用法。分享给大家供大家参考,具体如下: ...要使用jquery.ui.dialog,需要引用两个文件,1个是js,另外1个是css 在contentpage中添加: [removed]<
jquery.dialog.js 是jquery 最经典的弹出框插件,简单易用,亲测可用,附案例代码
jquery.dialogBox.js动画对话框插件是一款适合初学者学习的简单网页对话框代码,提供9种不同类型的对话框效果。
art.dialog相关的js文件,导入即可使用,内含四个js文件,artDialog.js,iframeTools.js,以及他们的压缩版本(生成环境使用).
经过摸索进行了扩展,增加“自动记住关闭时的位置”的功能,源码如下: 代码如下: //myJquery.ui.dialog.ex.js //////////////////////////////////// //自动记住 jquery.ui.dialog关闭时的位置 ///////////////////...
添加按钮弹出层jqueryui实现,dialog
jquery UI 中的Dialog,配合相关插件使用 在配置map里输入,closable:false,弹出框隐藏关闭按钮,禁用esc键
两个版本:一个替换ui close按钮,对三个按钮设立同样css;一个不替换,修改ui的css文件;完美打开多个对话框,并可以分别控制最大最小关闭。jquery文件没有包含进来。
jquery.dialogBox.js插件下载是一款适合初学者学习,提供9种不同类型的对话框。
jquery.dialogBox.js动画对话框插件
android安卓app已经放弃使用Theme.Dialog,改用Theme.Holo.DialogWhenLarge
使用easyui需要的js文件
打开时修改为以下内容 if (op.mask) { //修改所有对话框zIndex,900为覆盖层,要显示的对话框大于900,不显示的小于900 ... if ($(dialog).data("id")) $.taskBar.closeDialog($(dialog).data("id")); }