jQuery dialog 学习笔记

dialog属性详解

常用属性

1.autoOpen：这个属性为true的时候dialog被调用的时候自动打开dialog窗口。当属性为false的时候，一开始隐藏窗口，调用dialog(“open”)的时候才弹出dialog窗口。默认为：true。
2.position：dialog的显示位置：可以是’center’, ‘left’, ‘right’, ‘top’, ‘bottom’,也可以是top和left的偏移量也可以是一个字符串数组例如['right','top']。
3.title：dialog的标题，默认为空。
4.modal：是否使用模式窗口，模式窗口打开后，页面其他元素将不能点击，直到关闭模式窗口。默认为false不是模式窗口。
5.closeOnEscape： 为true的时候，点击键盘ESC键关闭dialog，默认为true。
6.draggable：draggable是否可以使用标题头进行拖动，默认为true，可以拖动。
7.resizable：resizable是否可以改变dialog的大小，默认为true，可以改变大小。

8.buttons：以对象键值对方式，给dialog 添加按钮。键是按钮的名称，值是用户点击后调用的回调函数。

9.width：300/数值  对话框的宽度。默认为300，单位是像素。
10.height ：auto/数值  对话框的高度。默认为auto，单位是像素。
11.minWidth ：150/数值  对话框的最小宽度。默认150，单位是像素。
12.minHeight ：150/数值  对话框的最小高度。默认150，单位是像素。
13.maxWidth ：auto/数值  对话框的最大宽度。默认auto，单位是像素。
14.maxHeight ：auto/数值  对话框的最大高度。默认auto，单位是像素。

15.show ：false/布尔值  显示对话框时，默认采用淡入效果。
16.hide ：false 布尔值  关闭对话框时，默认采用淡出效果。

show 和hide 可选特效
特效名称             说明
blind          对话框从顶部显示或消失
bounce     对话框断断续续地显示或消失，垂直运动
clip            对话框从中心垂直地显示或消失
slide          对话框从左边显示或消失
drop          对话框从左边显示或消失，有透明度变化
fold            对话框从左上角显示或消失
highlight   对话框显示或消失，伴随着透明度和背景色的变化
puff            对话框从中心开始缩放。显示时“收缩”，消失时“生长”
scale         对话框从中心开始缩放。显示时“生长”，消失时“收缩”
pulsate     对话框以闪烁形式显示或消失

例：$('#reg').dialog({ 
  
  show : 'blind', 
  
  hide : 'blind'
  
}); 

常用方法
 
1·open：打开dialog，一句话$(“#id”).dialog(“open”)。
2·close：关闭dialog，一句话 $(“#id”).dialog(“close”)。
3·disable：设置dialog不可用。
4·enable： 设置dialog可用。
5·isOpen： 判断dialog是否为打开状态，如果处于打开状态，返回true。
6·destroy： 销毁dialog。
7·moveToTop：将dialog移到最上层。
8·option：用于设置和取出dialog的值，比如我们为dialog设置标题，代码：$(“#dialogDiv”).dialog(“option”, “title”, “登录”)

9.focus：当对话框被激活时（首次显示以及每次在上面点击）会调用focus 方法，该方法有两个参数(event, ui)。此事件中的ui 参数为空。
10.create：当对话框被创建时会调用create 方法，该方法有两个参数(event, ui)。此事件中的ui 参数为空。

11.beforeClose：当对话框将要关闭时（ 当单击关闭按钮或调用dialog('close')方法），会调用beforeclose 方法。如果该函数返回false，对话框将不会被关闭。关闭的对话框可以用dialog('open')重新打开。该方法有两个参数(event, ui)。此事件中的ui 参数为空。

12.drag：当对话框移动时，每次移动一点均会调用drag 方法。该方法有两个参数。该方法有两个参数(event, ui)。

此事件中的ui 有两个属性对象：

1.position，得到当前移动的坐标，有两个子属性：top 和left。

2.offset，得到当前移动的坐标，有两个子属性：top 和left。
13.dragStart：当开始移动对话框时，会调用dragStart 方法。该方法有两个参数(event, ui)。

此事件中的ui 有两个属性对象：

1.position，得到当前移动的坐标，有两个子属性：top 和left。

2.offset，得到当前移动的坐标，有两个子属性：top 和left。

14.dragStop：当开始移动对话框时，会调用dragStop 方法。该方法有两个参数(event, ui)。

此事件中的ui 有两个属性对象：

1.position，得到当前移动的坐标，有两个子属性：top 和left。

2.offset，得到当前移动的坐标，有两个子属性：top 和left。

15.resize：当对话框拉升大小的时候，每一次拖拉都会调用resize方法。该方法有两个参数(event, ui)。

此事件中的ui 有四个属性对象：

1.size，得到对话框的大小，有两个子属性：width 和height。

2.position，得到对话框的坐标，有两个子属性：top 和left。

3.originalSize，得到对话框原始的大小，有两个子属性：width 和height。

4.originalPosition，得到对话框原始的坐标，有两个子属性：top 和left。
16.resizeStart：当开始拖拉对话框时，会调用resizeStart 方法。该方法有两个参数(event, ui)。

此事件中的ui 有四个属性对象：

1.size，得到对话框的大小，有两个子属性：width 和height。

2.position，得到对话框的坐标，有两个子属性：top 和left。

3.originalSize，得到对话框原始的大小，有两个子属性：width 和height。

4.originalPosition，得到对话框原始的坐标，有两个子属性：top 和left。
17.resizeStop：当结束拖拉对话框时，会调用resizeStart 方法。该方法有两个参数(event, ui)。

此事件中的ui 有四个属性对象：

1.size，得到对话框的大小，有两个子属性：width 和height。

2.position，得到对话框的坐标，有两个子属性：top 和left。

3.originalSize，得到对话框原始的大小，有两个子属性：width 和height。
4.originalPosition，得到对话框原始的坐标，有两个子属性：top 和left。

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

例：$('#reg').on('dialogclose', function () { 
  
  alert('关闭'); 
  
}); 

实例（完整）：

1.导入包

<link rel="stylesheet" type="text/css" href="../CSS/jquery-ui.css" />
<script type="text/javascript" src="../JS/jquery-3.1.1.js"></script>
<script type="text/javascript" src="../JS/jquery-ui.js"></script>

2.js代码

<script type="text/javascript">
$("#logindiv").dialog({
			title : "登陆",
			width : 350,
			height : 200,
			autoOpen : false,//调用.dialog("open");时才显示
			positoin : "center",
			modal : true,//模式：不能点击页面其他部分
			closeOnEscape : true,//ecs关闭有效
			draggable : false,
			resizable : false,
			show : "scale",
			hide : "scale",
		});

$(".quxiao").click(function() {
			$("#logindiv").dialog("close");
		});
$("#login").click(function() {
				$("#logindiv").dialog("open");
			});
</script>

3.HTML代码

<div id="logindiv">
		<center>
			<form name="form"
				action="${pageContext.request.contextPath}/MainPageLogin"
				method="post">
				<table>
					<tr>
						<td><strong>学号</strong></td>
						<td><font color="#ff0000">*</font></td>
						<td><input type="text" name="number" id="number" value=""
							οnblur="return checknumber()" /></td>
					</tr>
					<tr>
						<td><strong>密码</strong></td>
						<td><font color="#ff0000">*</font></td>
						<td><input type="password" name="password" id="password"
							value="" /></td>
					</tr>
				</table>
				<hr>
				<input type="submit" value="登陆" class="submitbtn" /> <input
					type="button" value="取消" class="quxiao" /><br>
			</form>
			<div id="checknumber"></div>
		</center>
	</div>

4.css代码

省略

5.效果