知问前端——对话框UI(一)
对话框(dialog)，是jQuery UI非常重要的一个功能。它彻底的代替了JavaScript的alert()、prompt()等方法，也避免了新窗口或页面的繁杂冗余。
开启多个dialog
我们可以同时打开多个dialog，只要设置不同的id即可实现。如：
test.html：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>知问前端</title> <script type="text/javascript" src="jquery-1.12.3.js"></script> <script type="text/javascript" src="jquery-ui.js"></script> <script type="text/javascript" src="index.js"></script> <!-- 引入icon图标 --> <link rel="shortcut icon" type="image/x-icon" href="img/favicon.ico" /> <link rel="stylesheet" type="text/css" href="jquery-ui.css" /> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <body> <div id="header"> <div class="header_main"> <h1>知问</h1> <div class="header_search"> <input type="text" name="search" class="search" /> </div> <div class="header_button"> <input type="button" value="查询" id="search_button" /> </div> <div class="header_member"> <a href="###" id="reg_a">注册</a> | <a href="###" id="login_a">登录</a> </div> </div> </div> <div id="reg" title="会员注册"> 表单区--会员注册 </div> <div id="login" title="会员登录"> 表单区--会员登录 </div> </body> </html>
jQuery代码：
//同时打开2个对话框 $("#reg").dialog(); $("#login").dialog();
修改dialog样式
在弹出的dialog对话框中，在火狐浏览器中打开Firebug或者右击->查看元素。这样，我们可以看看dialog的样式，根据样式进行修改。我们为了和网站主题符合，对dialog的标题背景进行修改。
无须修改ui里的CSS，直接用style.css替代掉，style.css中加入如下代码：
/* 更改jQuery UI主题的对话框header的背景 */ .ui-widget-header { background: url(img/ui_header_bg.png); }
dialog()方法的属性
对话框方法有两种形式：
1.dialog(options)，options是以对象键值对的形式传参，每个键值对表示一个选项
2.dialog('action', param)，action是操作对话框方法的字符串，param则是options的某个选项
dialog外观选项
| 属性 | 默认值/类型 | 说明 |
| title | 无/字符串 | 对话框的标题，可以直接设置在DOM元素上 |
| buttons | 无/对象 | 以对象键值对方式，给dialog添加按钮。键是按钮的名称，值是用户点击后调用的回调函数 |
index.html：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>知问前端</title> <script type="text/javascript" src="jquery-1.12.3.js"></script> <script type="text/javascript" src="jquery-ui.js"></script> <script type="text/javascript" src="index.js"></script> <!-- 引入icon图标 --> <link rel="shortcut icon" type="image/x-icon" href="img/favicon.ico" /> <link rel="stylesheet" type="text/css" href="jquery-ui.css" /> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <body> <div id="header"> <div class="header_main"> <h1>知问</h1> <div class="header_search"> <input type="text" name="search" class="search" /> </div> <div class="header_button"> <input type="button" value="查询" id="search_button" /> </div> <div class="header_member"> <a href="###" id="reg_a">注册</a> | <a href="###" id="login_a">登录</a> </div> </div> </div> <div id="reg" title="会员注册"> 表单区--会员注册 </div> </body> </html>
style.css：
body { margin: 40px 0 0 0; padding: 0; font-size: 12px; font-family: 宋体; background: #fff; } /* 更改jQuery UI主题的对话框header的背景 */ .ui-widget-header { background: url(img/ui_header_bg.png); } #header { width: 100%; height: 40px; background: url(img/header_bg.png); position: absolute; top:0; } #header .header_main { width: 800px; height: 40px; margin: 0 auto; } #header .header_main h1 { font-size: 20px; margin: 0; padding: 0; color: #666; line-height: 40px; float: left; padding: 0 10px; } #header .header_search { padding: 6px 0 0 0; float: left; } #header .header_search .search { width: 300px; height: 24px; border: 1px solid #ccc; background: #fff; color: #666; font-size: 14px; text-indent: 5px; } #header .header_button { padding: 5px; float: left; } #header .header_member { float: right; line-height: 40px; color: #555; font-size: 14px; } #header .header_member a { text-decoration: none; font-size: 14px; color: #555; }
jQuery代码：
$("#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（默认值） |
jQuery代码：
$('#reg').dialog({
position : 'left top' //顶在窗口左上角
});
注意：经测试，设置其他值都是对话框顶在窗口左上角，无任何其他效果，除非不写这个属性，对话框才默认窗口居中。
dialog大小选项
| 属性 | 默认值/类型 | 说明 |
| width | 300/数值 | 对话框的宽度。默认为300，单位是像素 |
| height | auto/数值 | 对话框的高度。默认为auto，单位是像素 |
| minWidth | 150/数值 | 对话框的最小宽度。默认150，单位是像素 |
| minHeight | 150/数值 | 对话框的最小高度。默认150，单位是像素 |
| maxWidth | auto/数值 | 对话框的最大宽度。默认auto，单位是像素 |
| maxHeight | auto/数值 | 对话框的最大高度。默认auto，单位是像素 |
jQuery代码：
$('#reg').dialog({
height : 500,
width : 500,
minWidth : 300,
minHeight : 300,
maxWidth : 800,
maxHeight : 600
});
dialog视觉选项
| 属性 | 默认值/类型 | 说明 |
| show | false/布尔值 | 显示对话框时，默认采用淡入效果 |
| hide | false/布尔值 | 关闭对话框时，默认采用淡出效果 |
jQuery代码：
$('#reg').dialog({
show : true,
hide : true
});
注意：设置true后，默认为淡入淡出，如果想使用别的特效，可以使用以下表格中的字符串参数。
show和hide可选特效
| 特效名称 | 说明 |
| blind | 对话框从顶部显示或消失 |
| bounce | 对话框断断续续地显示或消失，垂直运动 |
| clip | 对话框从中心垂直地显示或消失 |
| slide | 对话框从左边显示或消失 |
| drop | 对话框从左边显示或消失，有透明度变化 |
| fold | 对话框从左上角显示或消失 |
| highlight | 对话框显示或消失，伴随着透明度和背景色的变化 |
| puff | 对话框从中心开始缩放。显示时“收缩”，消失时“生长” |
| scale | 对话框从中心开始缩放。显示时“生长”，消失时“收缩” |
| pulsate | 对话框以闪烁形式显示或消失 |
jQuery代码：
$('#reg').dialog({
show : 'blind',
hide : 'blind'
});
dialog行为选项
| 属性 | 默认值/类型 | 说明 |
| autoOpen | true/布尔值 | 默认为true，调用dialog()方法时就会打开对话框；如果为false，对话框不可见，但对话框已创建，可以通过dialog('open')才能可见。 |
| draggable | true/布尔值 | 默认为true，可以移动对话框，false无法移动。 |
| resizable | true/布尔值 | 默认为true，可以调整对话框大小，false无法调整. |
| modal | false/布尔值 | 默认为false，对话框外可操作，true对话框会遮罩一层灰纱，无法操作。 |
| closeText | 无/字符串 | 设置关闭按钮的title文字。 |
jQuery代码：
如果autoOpen设置为true，对话框不可见，但对话框已创建，可以通过dialog('open')才能可见。如：
$("#reg").dialog({
title:"知问注册",
buttons:{
'提交':function() {
alert("正在Ajax提交中...");
},
'取消':function() {
$(this).dialog("close"); //后面讲解对话框的关闭
}
},
autoOpen:false,
draggable:false,
resizable:false,
modal:true,
closeText:"关闭"
});
点击注册链接弹出对话框：
$("#reg_a").click(function() {
$("#reg").dialog("open");
});
