知问前端——对话框UI(一)
2024-10-19 03:31:42
对话框(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:;
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:;
}
#header .header_main {
width: 800px;
height: 40px;
margin: 0 auto;
}
#header .header_main h1 {
font-size: 20px;
margin:;
padding:;
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");
});
最新文章
- 《OOAD与UML那点儿事》目录索引
- rabbitMQ学习（四）
- Android坐标系统
- 2.1---删除链表中重复元素（CC150）
- libevent使用<一> libevent导入项目
- ＳＱＬ技术内幕－12 SQL优化方法论前言
- javascript OOP编辑思想的一个实践参考
- java String的比较，BOX装箱拆箱，以及面向对象的小代码
- 子元素的margin-top影响父元素原因和解决办法
- c# aes 加密解密
- hdu_1028_母函数
- freemarker中的substring取子串（十四）
- 拿来主义：layPage分页插件的使用
- Coursera, Big Data 1, Introduction (week 3)
- python简介和python工具的选择
- Vue开源项目汇总(史上最全)(转)
- IntelliJ IDEA src下新建包, 没有层级结构
- Oracle 使用PLSQL 导出 一个表的insert 语句
- Ubuntu 14.04 配置OpenCv 2.4.9
- 2017-2018-2 20155224『网络对抗技术』Exp5：MSF基础应用