jq ui.dialog.js简介

来源：互联网发布：网络吞吐量怎么计算编辑：程序博客网时间：2024/06/06 19:35

jq ui.dialog.js简介

2010年01月27日 18:04

·概述
一个浮动的窗口，包含标题和内容两部分。可以移动，调整大小，以及关闭图标'×'。
如果内容长度超过了对话框内容区域的显示，则会自动出现滚动条。
除此之外，还有一些常用的选项，如：添加底部按钮栏、模式窗口屏蔽层等。
官方示例地址：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' )