jQueryUI之对话框（dialog）的使⽤
jQuery UI 是建⽴在 jQuery JavaScript 库上的⼀组⽤户界⾯交互、特效、⼩部件及主题。我们可以直接⽤它来构建具有很好交互性的web 应⽤程序。我们可以根据⾃⼰的需求和喜好从官⽹中下载相应的版本和主题。下载包中我们常⽤到的就是jquery-ui.css和jquery-ui.js⽂档，这两个⽂档分别包括jQuery UI的样式以及JavaScript主要代码。
jQuery UI 包含了许多维持状态的⼩部件（Widget），因此，它与典型的 jQuery 插件使⽤模式略有不同。所有的 jQuery UI ⼩部件（Widget）使⽤相同的模式，所以，只要学会使⽤其中⼀个，就知道如何使⽤其他的⼩部件（Widget）。现在先学习对话框（dialog）的使⽤。
1. 开启 dialog
⾸先需要引⼊相应的⽂档
然后通过jQuery绑定对应的对话框
2. dialog()⽅法的属性设置
对话框⽅法有两种形式：1.dialog(options)，options 是以对象键值对的形式传参，每个键值对表⽰⼀个选项；2.dialog(‘action’, param)，action 是操作对话框⽅法的字符串，param则是 options 的某个选项。
对话框的外观属性
jquery弹出div窗口属性
默认
值/类
型
说明
title⽆/字符
串
对话框的标题，可以直接设置在 DOM 元素上
buttons⽆/对象以对象键值对⽅式，给 dialog 添加按钮。键是按钮的名称，值是⽤户点击后调⽤的回调函数
width
300/数
值
对话框的宽度。默认为 300，单位是像素。<script type="text/javascript"src="jquery-2.2.3.js"></script>
<script type="text/javascript"src="jquery.ui.js"></script>
<link rel="stylesheet"type="text/css"href="jquery.ui.css">
<!--HTML代码-->
<input type="button"id="btn"value="对话框" />
<div id="my_dialog"title="我的对话框">
<form>
<p>⽤户名：<input type="text" /></p>
<p>密码：<input type="text" /></p>
</form>
</div>
//JS代码
$(function(){
$('#btn').button(); //通过jQuery UI设置按钮格式
$('#my_dialog').dialog({ //创建dialog，并设置为⾮⾃启动 autoOpen: false,
});
$('#btn').click(function(){ //通过按钮的点击事件打开dialog $('#my_dialog').dialog('open');
});
});
width 值对话框的宽度。默认为 300，单位是像素。height
auto/数值对话框的⾼度。默认为 auto，单位是像素。
minWidth 150/数值对话框的最⼩宽度。默认 150，单位是像素。
minHeight 150/数值对话框的最⼩⾼度。默认 150，单位是像素。
maxWidth auto/数值对话框的最⼤宽度。默认 auto，单位是像素。
maxHeight auto/数值对话框的最⼤⾼度。默认 auto，单位是像素。
position
center/字符串
设置⼀个对话框窗⼝的坐标位置，默认为 center。其他设置值为：left top、top right、bottom left、right bottom（四个
⾓） 、top、bottom（顶部或底部，宽度居中） 、left 或 right（左边或右边，⾼度居中） 、center（默认值）
属性默认值/类型说明
设置可以参照代码：
动画效果
属性默认值/类型说明
show false/布尔值默认没有动画效果，若设置为true，采⽤淡⼊淡出hide
false 布尔值
默认没有动画效果，若设置为true，采⽤淡⼊淡出
当然，除了“true”和“false”，还有⼀些其他可选的动画特效：
$('#my_dialog').dialog({ autoOpen: false , title :'对话框标题', buttons:{
'点我确认': function (){ alert('正在提交数据'); },
'点我取消': function (){$('#my_dialog').dialog('close');}, },
position: 'right bottom', width: 400, height: 300, });
特效名称说明
blind 对话框从顶部显⽰或消失
bounce 对话框断断续续地显⽰或消失，垂直运动
clip 对话框从中⼼垂直地显⽰或消失
slide 对话框从左边显⽰或消失
drop 对话框从左边显⽰或消失，有透明度变化
fold 对话框从左上⾓显⽰或消失
highlight 对话框显⽰或消失，伴随着透明度和背景⾊的变化puff 对话框从中⼼开始缩放。显⽰时“收缩” ，消失时“⽣长”scale 对话框从中⼼开始缩放。显⽰时“⽣长” ，消失时“收缩”
pulsate
对话框以闪烁形式显⽰或消失
设置格式如下：
⾏为选项
属性
默认值/类
型说明
autoOpen
true/布尔
值默认为 true，调⽤ dialog()⽅法时就会打开对话框；如果为 false，对话框不可见，但对话框已创建，可以通过
dialog(‘open’)才能可见。
draggable true/布尔
值默认为 true，可以移动对话框，false ⽆法移动。
resizable True/布尔
值默认为 true，可以调整对话框⼤⼩，false ⽆法调整
modal false/布尔
值默认为 false，对话框外可操作，true 对话框会遮罩⼀层灰纱，⽆法操作。
closeText ⽆/字符串
设置关闭按钮的 title ⽂字
设置格式可参照下⾯代码：
3. dialog()⽅法的事件设置
dialog()除了上述的属性外，还提供⼀些⽅法事件，这些⽅法可以给各种不同状态时提供回调函数，dialog为这些⽅法提供了两个参数(event, ui)，但是有⼀些⽅法的ui参数为空。
$('#my_dialog').dialog({ autoOpen: false , show : 'scale', hide : 'clip', });
$('#btn').button(); //通过jQuery UI 设置按钮格式 $('#my_dialog').dialog({ autoOpen: false , draggable : false , resizable : true , modal : true ,
closeText : '关闭对话框', });
例如”beforeClose”⽅法，当 对 话 框 将 要 关 闭 时 （当 单 击 关 闭 按 钮 或 调 ⽤dialog(‘close’)⽅法） ，会调⽤ beforeclose ⽅法。如果该函数返回 false，对话框将不会被关闭。关闭的对话框可以⽤ dialog(‘open’)重新打开。
$('#my_dialog').dialog({
autoOpen : false,
beforeClose : function(){
alert("你确定要关闭？"); //在关闭对话框前调⽤beforeClose出现弹窗
},
});
再看⼀个参数ui不为空的事件“resizeStop”，当结束拖拉对话框时，会调⽤ resizeStart ⽅法。其他的⼀些事件⽤法类似。
$('#my_dialog').dialog({
autoOpen : false,
resizeStop : function(e, ui) {//当结束拖拉对话框时，弹出此时对话框的宽和⾼
alert('size:' + ui.size.width + '\n' + 'originalSize:' + ui.originalSize.width);
}
});
下⾯介绍上⾯提到的对话框⽅法的第⼆种形式：dialog(‘action’, param)。
有⼀些简写⽅法：
//打开对话框
$('#my_dialog').dialog('open');
//关闭对话框
$('#my_dialog').dialog('close');
第⼆种是需要两个及两个以上参数：
⽅法返回值说明
dialog(‘option’, param)⼀般值获取 options 属性的值dialog(‘option’, param, value)jQuery 对象设置 options 属性的值$('#my_dialog').dialog('option','autoOpen') //获取autoOpen的值
$('#my_dialog').dialog('option','autoOpen','true'); //设置autoOpen的值
另外在dialog中还提供了on()还处理事件，例如使⽤on来监控对话框打开事件：
$('#my_dialog').on('dialogopen',function(){
alert('打开对话框');
});
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论