artDialog 是一个轻巧且高度兼容的 javascript 对话框组件,可让你的网页交互拥有桌面软件般的用户体验。其支持锁定屏幕(遮罩)、模拟 alert 和 confirm、多窗口弹出、静止定位、支持 Ese 键关闭对话框、定时关闭、自定义位置、拖动、鼠标调节窗口大小、换肤等。其项目主页为:http://aui.github.io/artDialog/.
优点
兼容主流浏览器
支持IE6和IE6+, Firefox, chrome, Opera, Safari
自适应内容
无需预设高宽, 对话框自适应消息内容的大小 (包括按钮),并且支持消息框大小拖动调节
智能消息对齐
如果设置了对话框宽度,文本会自动居中或者居左对齐
容错
如果定义的宽度高度小于内容大小不会出现错位,
智能定位
使用自定义坐标的时候智能修正位置,确保其在可视范围 (适用于弹出菜单)
拖动流畅
不会粘住鼠标也不会拖出浏览器视口导致无法控制
轻巧
js压缩后不到8KB (在js内嵌了核心兼容布局CSS的情况下)
制订皮肤
九宫格布局, 钩子完善,制作皮肤相当简易, 内置IE6 png 32透明和定位解决方案。
IE6无抖动静止定位
在IE6下可实现与现代浏览器一样完美静止定位效果
IE6遮盖下拉控件支持
支持 IE6 下覆盖下拉控件 (注:半透明皮肤不支持)
调用方法
1、使用传统的参数
art.dialog(content, ok, cancel)
art.dialog('简单愉悦的接口,强大的表现力,优雅的内部实现', function(){alert('yes');});
2、使用字面量传参
art.dialog(options)
var dialog = art.dialog({
title: '欢迎',
content: '欢迎使用artDialog对话框组件!',
icon: 'succeed',
follow: document.getElementById('btn2'),
ok: function(){
this.title('警告').content('请注意artDialog两秒后将关闭!').lock().time(2);
return false;
}
});
3、扩展方法
artDialog 的扩展方法可以对弹出后的对话框操作。例如在 ajax 异步操作中,我们可以先定义一个变量引用对话框返回的扩展方法:
var myDialog = art.dialog();// 初始化一个带有loading图标的空对话框
jQuery.ajax({
url: 'http://web5.qq.com/content?id=1',
success: function (data) {
myDialog.content(data);// 填充对话框内容
}
});
如果需要使用程序控制关闭,可以使用"close"方法关闭对话框:
myDialog.close();
默认配置参数
artDialog.defaults = {
content: '
title: '\u6d88\u606f', // 标题. 默认'消息'
button: null, // 自定义按钮
ok: null, // 确定按钮回调函数
cancel: null, // 取消按钮回调函数
init: null, // 对话框初始化后执行的函数
close: null, // 对话框关闭前执行的函数
okVal: '\u786E\u5B9A', // 确定按钮文本. 默认'确定'
cancelVal: '\u53D6\u6D88', // 取消按钮文本. 默认'取消'
width: 'auto', // 内容宽度
height: 'auto', // 内容高度
minWidth: 96, // 最小宽度限制
minHeight: 32, // 最小高度限制
padding: '20px 25px', // 内容与边界填充距离
skin: '', // 皮肤名(预留接口,尚未实现)
icon: null, // 消息图标名称
time: null, // 自动关闭时间
esc: true, // 是否支持Esc键关闭
focus: true, // 是否支持对话框按钮自动聚焦
show: true, // 初始化后是否显示对话框
follow: null, // 跟随某元素(即让对话框在元素附近弹出)
path: _path, // artDialog路径
lock: false, // 是否锁屏
background: '#000', // 遮罩颜色
opacity: .7, // 遮罩透明度
duration: 300, // 遮罩透明度渐变动画速度
fixed: false, // 是否静止定位
left: '50%', // X轴坐标
top: '38.2%', // Y轴坐标
zIndex: 1987, // 对话框叠加高度值(重要:此值不能超过浏览器最大限制)
resize: true, // 是否允许用户调节尺寸
drag: true // 是否允许用户拖动位置
};
参考资料