对话框(dialog),是jQuery UI 非常重要的一个功能。它彻底的代替了JavaScript 的alert()、prompt()等方法,也避免了新窗口或页面的繁杂冗余。
一.开启多个dialog
只要设置不同的id 即可实现。二.修改dialog 样式
在弹出的dialog 对话框中,在火狐浏览器中打开Firebug 或者右击->查看 元素。可以看看dialog 的样式,对dialog 的标题背景进行修改。三.dialog()方法的属性
对话框方法有两种形式:1.dialog(options),options 是以对象键值对的形式 传参,每个键值对表示一个选项;2.dialog('action',param),action 是操作对 话框方法的字符串,param则是options 的某个选项。
position : 'left top'
});
height : 500,width : 500,minWidth : 300,minHeight : 300,maxWidth : 800,maxHeight : 600
});
show : true,hide : true
});
注意:设置true 后,默认为淡入淡出,如果想使用别的特效,可以使用以下表格中的字符串参数。
show : 'blind',hide : 'blind'
});
autoOpen : false,draggable : false,resizable : false,modal : true,closeText : '关闭'
});
四.dialog()方法的事件
除了属性设置外,dialog()方法也提供了大量的事件。这些事件可以给各种不同状态 时提供回调函数。这些回调函数中的this 值等于对话框内容的div 对象,不是整个对话框 的div。focus : function (e,ui) {
alert('获得焦点');
}
});
//当创建对话框时
$('#reg').dialog({
create : function (e,ui) {
alert('创建对话框');
}
});
//当将要关闭时
$('#reg').dialog({
beforeClose : function (e,ui) {
alert('关闭前做的事!');
return flag;
}
});
//关闭对话框时
$('#reg').dialog({
close : function (e,ui) {
alert('关闭!');
}
});
//对话框移动时
$('#reg').dialog({
drag : function (e,ui) {
alert('top:' + ui.position.top + '\n'
+ 'left:' + ui.position.left);
}
});
//对话框开始移动时
$('#reg').dialog({
dragStart : function (e,ui) {
alert('top:' + ui.position.top + '\n'
+ 'left:' + ui.position.left);
}
});
//对话框结束移动时
$('#reg').dialog({
dragStop : function (e,ui) {
alert('top:' + ui.position.top + '\n'
+ 'left:' + ui.position.left);
}
});
//调整对话框大小时
$('#reg').dialog({
resize : function (e,ui) {
alert('size:' + ui.size.width + '\n'
+ 'originalSize:' + ui.originalSize.width);
}
});
//开始调整对话框大小时
$('#reg').dialog({
resizeStart : function (e,ui) {
alert('size:' + ui.size.width + '\n'
+ 'originalSize:' + ui.originalSize.width);
}
});
//结束调整对话框大小时
$('#reg').dialog({
resizeStop : function (e,ui) {
alert('size:' + ui.size.width + '\n'
+ 'originalSize:' + ui.originalSize.width);
}
});
autoOpen : false
});
//打开对话框
$('#reg_a').click(function () {
$('#reg').dialog('open');
});
//关闭对话框
$('#reg').click(function () {
$('#reg').dialog('close');
});
//判断对话框打开或关闭状态
$(document).click(function () {
alert($('#reg').dialog('isOpen'));
});
//将指定对话框置前
$(document).click(function () {
$('#reg').dialog('movetoTop');
});
//获取某个options 的param 选项的值
var title = $('#reg').dialog('option','title');
alert(title);
//设置某个options 的param 选项的值
$('#reg').dialog('option','title','注册');
五.dialog 中使用on()
在dialog 的事件中,提供了使用on()方法处理的事件方法。alert('关闭');
});
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。