jQuery UI库中dialog对话框功能使用全解析

对话框（dialog），是jQuery UI 非常重要的一个功能。它彻底的代替了JavaScript
的alert()、prompt()等方法，也避免了新窗口或页面的繁杂冗余。

一．开启多个dialog
   只要设置不同的id 即可实现。

$('#x').dialog(); $('#y').dialog();

二．修改dialog 样式
   在弹出的dialog 对话框中，在火狐浏览器中打开Firebug 或者右击->查看
元素。可以看看dialog 的样式，对dialog 的标题背景进行修改。

//无须修改ui 里的CSS，直接用style.css 替代掉 .ui-widget-header { background:url(../img/xxx.png); }

三．dialog()方法的属性
   对话框方法有两种形式：1.dialog(options)，options 是以对象键值对的形式
传参，每个键值对表示一个选项；2.dialog('action', param)，action 是操作对
话框方法的字符串，param则是options 的某个选项。
dialog 外观选项 属性
  默认值/类型
  说明
 
title
  无/字符串
  对话框的标题，可以直接设置在DOM 元素上
 
buttons
  无/对象
 

以对象键值对方式，给dialog 添加按钮。键是按钮

的名称，值是用户点击后调用的回调函数

 

$('#reg').dialog({ title : '注册', buttons : { '按钮' : function () {} } );

dialog 页面位置选项 属性
  默认值/类型
  说明
 
position
  center/字符串
 

设置一个对话框窗口的坐标位置，默认为center。

其他设置值为：left top、top right、bottom left、

right bottom（四个角）、top、bottom（顶部或底

部，宽度居中）、left 或right（左边或右边，高度

居中）、center（默认值）

 

$('#reg').dialog({ position : 'left top' });

dialog 大小选项 属性
  默认值/类型
  说明
 
width
  300/数值
  对话框的宽度。默认为300，单位是像素。
 
height 
  auto/数值
  对话框的高度。默认为auto，单位是像素。
 
minWidth 
  150/数值
  对话框的最小宽度。默认150，单位是像素。
 
minHeight 
  150/数值
  对话框的最小高度。默认150，单位是像素。
 
maxWidth 
  auto/数值
  对话框的最大宽度。默认auto，单位是像素。
 
maxHeight 
  auto/数值
  对话框的最大高度。默认auto，单位是像素。  

$('#reg').dialog({ height : 500, width : 500, minWidth : 300, minHeight : 300, maxWidth : 800, maxHeight : 600 });

dialog 视觉选项 属性
  默认值/类型
  说明
 
show 
  false/布尔值
  显示对话框时，默认采用淡入效果。
 
hide 
  false 布尔值
  关闭对话框时，默认采用淡出效果。  

$('#reg').dialog({ show : true, hide : true });

注意：设置true 后，默认为淡入淡出，如果想使用别的特效，可以使用以下表格中的字符串参数。
show 和hide 可选特效 特效名称
  说明
 
blind 
  对话框从顶部显示或消失
 
bounce 
  对话框断断续续地显示或消失，垂直运动
 
clip 
  对话框从中心垂直地显示或消失
 
slide 
  对话框从左边显示或消失
 
drop 
  对话框从左边显示或消失，有透明度变化
 
fold 
  对话框从左上角显示或消失
 
highlight 
  对话框显示或消失，伴随着透明度和背景色的变化
 
puff 
  对话框从中心开始缩放。显示时“收缩”，消失时“生长”
 
scale 
  对话框从中心开始缩放。显示时“生长”，消失时“收缩”
 
pulsate 
  对话框以闪烁形式显示或消失  

$('#reg').dialog({ show : 'blind', hide : 'blind' });