Jquery李炎恢——37，38对话框UI【3】【4】

学习要点：
1.开启多个dialog
2.修改dialog样式
3.dialog()方法的属性
4.dialog()方法的事件
5.dialog()中使用on()

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

一、开启多个dialog
我们可以同时打开多个dialog，只要设置不同的id即可实现。
$("#reg").dialog();
$("#login").dialog();

二、修改dialog样式
在弹出的dialog对话框中，在火狐浏览器中打开Firebug或者右击查看元素。这样，我们可以看看dialog的样式，根据样式进行修改。我们为了和网站主题符合，对dialog的标题背景进行修改。
\\无须修改Ui里的css,直接使用style.css替代掉
.ui widget-header{
background:url(....);
}
注意：其他修改方案类似

三、dialog（）方法的属性
对话框方法有两种形式：1.dialog（options），options是以对象键值对的形式传参，每个键值对表示一个选项；2.dialog（"action",param）,acion是操作对话框方法的字符串，param则是options的某个选项。

属性：title，默认值/类型：无/字符串，说明：对话框的标题，可以直接设置在DOM元素上
属性：button，默认值/类型：无/对象，说明：以对象键值对方式，给dialog添加按钮。建是按钮的名称，值是用户点击后调用的回调函数
$("#reg").dialog({
title:"注册知问"，
buttons:{
  "提交"：function(){

       alert("正在Ajax提交中....")

    } ,

    "取消":function(){

       $(this).dialog("close");

     }
  }
})

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，单位是像素。
属性：maxHeigh，默认值/类型：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后，默认为淡入淡出，如果想使用别的特效，可以使用以下参数
特效名称：bind,说明：对话框从顶部显示或消失
特效名称：bounce,说明：对话框断断续续地显示或消失、垂直运动
特效名称：clip,说明：对话框从中心垂直显示或消失
特效名称：slide,说明：对话框从左边显示或消失
特效名称：drop,说明：对话框从左边显示或消失，有透明度变化
特效名称：fold,说明：对话框从左上角显示或消失
特效名称：highlight,说明：对话框显示或消失,伴随着透明度和背景色的变化
特效名称：puff,说明：对话框从中心开始缩放。显示时“收缩”，消失时“生长”
特效名称：scale,说明：对话框从中心开始缩放.显示时“生长”，消失时“收缩”
特效名称：pulsate,说明：对话框以闪烁形式显示或消失
$("#reg").dialog({
show:"bind",
hide:"bind"
})

dialog行为选项
属性：autoOpen,默认值/类型：true/布尔值，说明：默认为true，调用dialog()方法时就会打开对话框；如果为false，对话框不可见，但对话框已创建，可以通过dialog("open")才能可见。
属性：draggable,默认值/类型：true/布尔值，说明：可以移动对话框，false无法移动。
属性：resizable,默认值/类型：true/布尔值，说明：可以调整对话框大小，false无法调整。
属性：modal,默认值/类型：false/布尔值，说明：对话框外可操作，true对话框会遮罩一层灰纱，无法操作。
属性：closeText,默认值/类型：无/布尔值，说明：设置关闭按钮的title文字
$("#reg").dialog({
autoOpen:false,
draggable:false,
resizable:false,
modal:true,
closeText:"关闭"
})

四、dialog()方法的事件
除了属性设置外，dialog()方法也提供了大量的事件。这些事件可以给各种不同状态时提供回调函数，这些回调函数中的this值等于对话框内容的div对象，不是整个对话框的div

dialog事件选项
事件名：focus,说明：当对话框被激活时（首次显示以及每次在上面点击）会调用focus方法，该方法有两个参数（event,ui）。此事件中的ui参数为空。
事件名：create,说明：当对话框被创建时会调用create方法，该方法有两个参数（event，ui），此事件中的ui参数为空。
事件名：open,说明：当对话框被显示时（首次显示或调用dialog（"open"）方法）会调用open方法。该方法有两个参数（event,ui）。此事件中的ui参数为空。
事件名：beforeClose,说明：当对话框将要关闭时（当单击关闭按钮或调用dialog（"close"）方法），会调用beforeClose方法。如果该函数返回false，对话框将不会被关闭。关闭的对话框可以用dialog（"open"）重新打开，该方法有两个参数（event,ui）。此事件中的ui参数为空。
事件名：close,说明：当对话框将要关闭时（当单击关闭按钮或调用dialog("close")方法），会调用close方法，关闭的对话框可以用dialog（"open"）重新打开，该方法有两个参数（event,ui）。此事件中的ui参数为空。
事件名：drag,说明：当对话框移动式，每次移动一点均会调用drag方法，该方法有两个参数（event,ui）。此事件中的ui有两个属性对象：1.position,得到当前移动的坐标，有两个子属性，top和left,2.offset,得到当前移动的坐标，有两个子属性，top和letf
事件名：dragStart,说明：当开始移动对话框时，会调用dragStart方法，该方法有两个参数（event,ui）。此事件中的ui有两个属性对象：1.position,得到当前移动的坐标，有两个子属性，top和left,2.offset,得到当前移动的坐标，有两个子属性，top和letf
事件名：dragStop,说明：当结束移动对话框时，会调用dragStop方法，该方法有两个参数（event,ui）。此事件中的ui有两个属性对象：1.position,得到当前移动的坐标，有两个子属性，top和left,2.offset,得到当前移动的坐标，有两个子属性，top和letf
事件名：resize,说明：当对话框拉伸大小的时候，每一次拖拉都会调用resize方法。该方法有两个参数（event,ui）。此事件中的ui有四个属性对象：1.size,得到对话框的大小，有两个子属性：width和height，2.position，得到对话框的坐标，有两个子属性：top和letf,3.originaSize，得到对话框原始的大小，有两个子属性：width和height,4.originalPosition,得到对话框原始的坐标，有两个子属性：top和letf
事件名：resizeStart,说明:当开始拖拉对话框时，会调用resizeStart方法，该方法有两个参数（event,ui）。此事件中的ui有四个属性对象：1.size,得到对话框的大小，有两个子属性：width和height，2.position，得到对话框的坐标，有两个子属性：top和letf,3.originaSize，得到对话框原始的大小，有两个子属性：width和height,4.originalPosition,得到对话框原始的坐标，有两个子属性：top和letf
事件名：resizeStop,说明:当结束拖拉对话框时，会调用resizeStop方法，该方法有两个参数（event,ui）。此事件中的ui有四个属性对象：1.size,得到对话框的大小，有两个子属性：width和height，2.position，得到对话框的坐标，有两个子属性：top和letf,3.originaSize，得到对话框原始的大小，有两个子属性：width和height,4.originalPosition,得到对话框原始的坐标，有两个子属性：top和letf
//当对话框获得焦点后
$("#reg").dialog({
focus:function(e,ui){
alert("获得焦点")；
}
})

//当创建对话框时
$("#reg").dialog({
create:function(e,ui){
alert("创建对话框")；
}
})

//当将要关闭时
$("#reg").dialog({
beforeClose:function(e,ui){
alert("关闭前做的事")
return false；
}
}

//当开始调整对话框大小时
$("#reg").dialog({
resizeStart:function(e,ui){
alert("size"+ui.size.width+"\n"+"originalsize"+ui.originalSize.width)；
}
})

//当开始调整对话框大小时
$("#reg").dialog({
resizeStop:function(e,ui){
alert("size"+ui.size.width+"\n"+"originalsize"+ui.originalSize.width)；
}
})
})

dialog("action",param)方法
方法：dialog（"open"）,返回值：jquery对象，说明：打开对话框
方法：dialog（"close"）,返回值：jquery对象，说明：关闭对话框
方法：dialog（"destroy"）,返回值：jquery对象，说明：删除对话框，直接阻断了dialog
方法：dialog（"isOpen"）,返回值：布尔值，说明：判断对话框是否打开状态
方法：dialog（"widget"）,返回值：jquery对象，说明：获取对话框的jquery对象
方法：dialog（"option",param）,返回值：一般值，说明：获取options属性的值
方法：dialog（"option",param，value）,返回值：jquery对象，说明：获取options属性的值
//初始隐藏对话框
$("#reg").dialog({
autoOpen:false
})

//打开对话框
$("#reg_a").click(function(){
$("#reg").dialog("open")
})

//关闭对话框
$("#reg").click(function(){
$("#reg").dialog("close")
})

//打开对话框打开或关闭状态
$(document).click(function(){
$("#reg").dialog("isOpen")
})

//将指定对话框置前
$(document).click(function(){
$("#reg").dialog("moveToTop")
})

//获取某个options的param选项的值
var title=$("#reg").dialog("options","title");
alert(title);

//设置某个options的param选项的值
$("#reg").dialog("options","title"，"注册知问");
alert(title);

五、dialog中使用on()
在dialog的事件中，提供了使用on()方法处理的事件方法。
on()方法触发的对话框事件
特效名称：dialogfocus,说明：得到焦点时触发
特效名称：dialogopen,说明：显示时触发
特效名称：dialogbeforeclosse,说明：将要关闭时触发
特效名称：dialogclose,说明：关闭时触发
特效名称：dialogdrag,说明：每一次移动时触发
特效名称：dialogdragstart,说明：开始移动时触发
特效名称：dialogdragstop,说明：移动结束后触发
特效名称：dialogresize,说明：每次调整大小时触发
特效名称：dialogresizestart,说明：开始调整大小时触发
特效名称：dialogresizestop,说明：结束调整大小时触发
$("#reg").on("dialogclose",function(){
alert("关闭")
})