知问前端——对话框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:;
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");
});
知问前端——对话框UI(一)的更多相关文章
- 第一百七十八节，jQuery-UI，知问前端--对话框 UI
jQuery-UI,知问前端--对话框 UI 学习要点: 1.开启多个 dialog 2.修改 dialog 样式 3.dialog()方法的属性 4.dialog()方法的事件 5.dialog 中 ...
- 知问前端——对话框UI(二)
dialog()方法的事件 除了属性设置外,dialog()方法也提供了大量的事件,这些事件可以给各种不同状态时的对话框提供回调函数,这些回调函数中的this值等于对话框内容的div对象,不是整个对话 ...
- 第一百八十二节，jQuery-UI，知问前端--日历 UI
jQuery-UI,知问前端--日历 UI 学习要点: 1.调用 datepicker()方法 2.修改 datepicker()样式 3.datepicker()方法的属性 4.datepicker ...
- 知问前端——日历UI(三)
datepicker日期选择选项 属性 默认值/类型 说明 minDate 无/对象.字符串或数值 日历中可以选择的最小日期 maxDate 无/对象.字符串或数值 日历中可以选择的最大日期 defa ...
- 知问前端——日历UI(二)
datapicker外观选项 属性 默认值/类型 说明 disabled false/布尔值 禁用日历 numberOfMonths 1/数值 日历中同时显示的月份个数.默认为1,如果设置3就同时显示 ...
- 知问前端——日历UI(一)
日历(datepicker)UI,可以让用户更加直观的.更加方便的输入日期,并且还考虑不同国家的语言限制,包括汉语. 调用datepicker()方法 $('#date').datepicker(); ...
- 知问前端——工具提示UI
工具提示(tooltip),是一个非常实用的UI.它彻底扩展了HTML中的title属性,让提示更加丰富,更加可控制,全面提升了用户体验. 调用tooltip()方法 在调用tooltip()方法之前 ...
- 知问前端——按钮UI
按钮(button),可以给生硬的原生按钮或者文本提供更多丰富多彩的外观.它不单单可以设置按钮或文本,还可以设置单选按钮和多选按钮. 使用button按钮 使用button按钮UI的时候,不一定必须是 ...
- 第一百七十九节，jQuery-UI，知问前端--按钮 UI-图标
jQuery-UI,知问前端--按钮 UI 学习要点: 1.使用 button 按钮 2.修改 button 样式 3.button()方法的属性 4.button('action', param) ...
随机推荐
- angularJS项目-ajax事件的按钮loading和页面loading状态 & Controller之间通信-待续
1).按钮loading --TODO 2). page loading状态 1.在module中注入指令 // Route State Load Spinner(used on page or co ...
- 59.DDR3_IP核文件设置
在ISE软件生成DDR3 IP核时,会产生很多文件,其中user_design,example_design里面分别是用户接口文件和自带的仿真测试文件.在user_design里的rtl中,这些文件是 ...
- 如何向VS2010中插入ActiveX控件并且附带相应的类
上两篇文章中我们已经讲述了ActiveX控件的一些相关知识,本文中,简单说明一下如何在我们自己的程序中使用ActiveX控件.(仍以我们上节课的例子为例) 我们打开VS2010编辑器,新建一个基于对话 ...
- JAVA类与对象（十）-----抽象类
在面向对象的概念中,所有的对象都是通过类来描绘的,但是反过来,并不是所有的类都是用来描绘对象的,如果一个类中没有包含足够的信息来描绘一个具体的对象,这样的类就是抽象类. 抽象类除了不能实例化对象之外, ...
- [vsftp服务]——ftp虚拟用户、权限设置等的实验
搭建ftp服务器,满足以下要求: 1.允许匿名用户登录服务器并下载文件,下载速度设置为最高2MB/s 2.不允许本地用户登录ftp服务器 3.在服务器添加虚拟用户vuser01.vuser02.vus ...
- java并发编程：如何创建线程
原文:http://www.cnblogs.com/dolphin0520/p/3913517.html 一.Java中关于应用程序和进程相关的概念 在Java中,一个应用程序对应着一个JVM实例(也 ...
- snmp安装配置
只说一下在ubuntu下如何进行基本的配置. ubuntu Server 12.04 apt-get install snmp snmpd 安装完成之后还要安装snmp-mibs-downloader ...
- 【CodeForces】【338E】Optimize!
线段树 先搞出来每个a[i]能连多少条边记为w[i]……如果对一组s[i],都满足w[i]-rank[i]>=0则这是一组合法方案,然后线段树维护w[i]-rank[i](第一个元素出去的时候后 ...
- 升级到win8.1后除IE11外,其它浏览器无法打开网页解决办法
原文 : http://productforums.google.com/forum/#!topic/chrome/TUDjVQzf4Os 用管理员方式打开cmd 输入 netsh winsock r ...
- 【JQuery NoviceToNinja系列】目录
[JQuery NoviceToNinja系列]目录 [JQuery NoviceToNinja系列]01 开篇 Html页面设计和布局