Jquery ui的dialog使用文档概述

Jquery ui的dialog使用文档概述
一个浮动的窗口，包含标题和内容两部分。可以移动，调整大小，以及关闭图标'×'。如果内容长度超过了对话框内容区域的显示，则会自动出现滚动条。除此之外，还有一些常用的选项，如：添加底部按钮栏、模式窗口屏蔽层等。

官方示例地址：

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' )