Jquery ui的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' )