资源描述：
《jqueryui库中dialog对话框功能使用全解析_jquery》由会员上传分享，免费在线阅读，更多相关内容在工程资料-天天文库。
1、jQueryUI库中dialog对话框功能使用全解析对话框(dialog),是jQueryUI非常重要的一个功能。它彻底的代替了JavaScript的alert()>prompt()等方法，也避免了新窗口或页面的繁杂冗余。一.开启多个dialog只要设置不同的id即可实现。$('#x').dialog();$('#y').dialog();二.修改dialog样式在弹；1【的dialog对话框中，在火狐浏览器中打开Firebug或者右击-〉查看元素。可以看看dialog的样式，对dialog的标题背景进彳亍修改。//无须修改ui里的CS
2、S,直接用style,css替代掉.ui-widget-header{background:url(・・/img/xxx・png);三.dialog0方法的属性对话框方法有两种形式：1.dialog(options),options是以对象键值对的形式传参，每个键值对表示一个选项;2.dialog('action',param),action是操作对话框方法的字符串，param则是options的某个选项。dialog外观选项属性默认值/类型说明title无/字符串对话框的标题，可以直接设置在DOM元索上buttons无/对象以对彖键值
3、对方式，给dialog添加按钮。键是按钮的名称，值是用户点击后调用的回调函数$C#reg‘).dialog({title:'注册’，buttons:{'按钮’：function(){});dialog页面位置选项属性默认值/类型说明positioncenter/字符串设迸一个对话框窗口的坐标位迸，默认为center®其他设置值为:lefttopstopright>bottomleft^rightbottom（四个角）、top>bottom（顶部或底部，宽度居中）、left或血ht（左边或右边，高度居中）、center（默认值）$('#r
4、eg').dialog({position:'lefttop'});dialog大小选项属性默认值/类型说明width300/数值对话框的宽度。默认为300,单位是像素。heightauto/数值对话框的高度。默认为auto,单位是像素。minWidth150/数值对话框的最小宽度。默认150,单位是像素。minHeight150/数值对话框的最小高度。默认150,单位是像素。maxWidthmuto/数值对话框的最大宽度。默认auto,单位是像素。maxHeightauto/数值对话框的最大高度。默认auto,单位是像索。$C#reg
5、").dialog({height:500,width:500,minWidth:300,minHeight:300,maxWidth:800,maxHeight:600});dialog视觉选项属性默认值/类型说明showfalse/布尔值显示对话框时，默认采用淡入效果。hidefalse布尔值关闭対话框时，默认采用淡岀效果。$Cttreg").dialog({show:true,hide:true});注意：设置true后，默认为淡入淡出，如果想使用别的特效，可以使用以下表格中的字符串参数。show和hide可选特效特效名称说明bl
6、ind对话框从顶部显示或消失bounce对话框断断续续地显示或消失，垂直运动clip对话框从中心垂直地显示或消失slide对话框从左边显示或消失drop对话框从左边显示或消失，有透明度变化fold对话框从左上角显示或消失highlight对话框显示或消失，伴随着透明度和背景色的变化puff对话框从屮心开始缩放。显示时''收缩〃，消失时''生长〃scale对话框从中心开始缩放。显示吋'、生长〃，消失时''收缩〃pulsate对话框以闪烁形式显示或消失$('#reg').dialog({show:'blind',hide:，blind'})
7、；dialog行为选项属性J默认值/类型说明autoOpentrue/布尔值默认为true,调用dialog()方法时就会打开对话框；如果为false,对话框不可见,但对话框已创建,可以通过dialog('open')才能可见。draggabletrue/布尔值默认为true,口J以移动对话框，false无法移动。resizabletrue/布尔值默认为true,可以调整对话框大小，false无法调整modalfalse/布尔值默认为false,对话框外可操作，true对话框会遮罩一层灰纱，无法操作。closeText无/字符串设置关闭
8、按钮的title文字$('#reg').dialog({autoOpen:false,draggable:false,resizable:false,modal:true,closeText:关闭'});一
