功能： 支持锁定屏幕 (遮罩)、模拟 alert 和 confirm、多窗口弹出、静止定位、支持 Ese 键关闭对话框、定时关闭、自定义位置、拖动、鼠标调节窗口大小、换肤……
配置参数：
content: {消息内容,支持HTML}
title: {标题.默认:'提示'}
lock: {是否锁定屏幕. 默认:false}
width: {宽度,支持em等单位. 默认:'auto'}
height: {高度,支持em等单位. 默认:'auto'}
url: {iframe地址,存在content参数时候,此参数无效}
x: {x坐标,可以使用关键字,如:left/right/center. 默认:'center'}
y: {y坐标,可以使用关键字,如:top/bottom/center. 默认:'center'(并非绝对垂直居中，而是使用的黄金比例)}
fixed: {是否启用静止定位. 默认:false}
time: {多少秒自动关闭}
style: {对话框风格扩展参数,写入自定义className,详情见皮肤css文件的定义,多个用空格隔开}
yesText: {确定按钮文本. 默认:'确定'}
noText: {取消按钮文本. 默认:'取消'}
yesClose: {点击确定按钮是否同时关闭对话框. 默认:true}
id: {给对话框定义id,对话框未关闭就不再会有同名对话框弹出. 例如定义id为'my2'，则内容容器id为'my2Content'}
形式
- artDialog({ 配置参数 }, function(){ 确定按钮回调函数 }, function(){ 取消按钮回调函数 }, function(){ 对话框关闭回调函数 }) 如:artDialog(
- {
- content:'欢迎你来到对话框世界！',
- lock:true,
- style:'succeed noClose'
- },
- function(){
- alert('你点了确定');
- },
- function(){
- alert('你点了取消');
- }
- );
弹出页面事例，如：
- $.dialog.open('export/packingInfo/list?id=' + id, {
- esc : false,
- lock : true,
- title : 'Carton List - Edit',
- width : '900px',
- height : '500px',
- close : function() {
- window.location.reload();
- }
- });
在页面head设置默认配置，如：
// 设置对话框全局默认配置
(function(){
var d = art.dialog.defaults;
// 按需加载要用到的皮肤，数组第一个为默认皮肤
// 如果只使用默认皮肤，可以不填写skin
d.skin = ['default', 'chrome', 'facebook', 'aero'];
// 支持拖动
d.drag = true;
// 超过此面积大小的对话框使用替身拖动
d.showTemp = 100000;
})();
在js函数里面使用，如
API文档
- function test(){
- art.dialog({
- lock: true,
- content: '中断用户在对话框以外的交互，展示重要操作与消息',
- yesFn: function(){
- art.dialog({content: '再来一个锁屏', lock: true});
- return false;
- },
- noFn: true
- }
自带的扩展方法
扩展方法详解
| 名称 | 描述 | ||
|---|---|---|---|
| 核心方法 | |||
| art.dialog.top | 获取artDialog可用最高层window对象。这与直接使用window.top不同，它能排除artDialog对象不存在已经或者顶层页面为框架集的情况 这是iframe应用工具集中的核心方法，你可以用它来操作父页面对象（包括上面的对话框） |
||
| art.dialog.data(name, value) | 跨框架数据共享写入接口。 框架与框架之间以及与主页面之间进行数据交换是非常头疼的事情，常规情况下你必须知道框架的名称才能进行数据交换，如果是在复杂的多层框架下操作简直就是噩梦。 而data方法就是为了解决这个问题，你完全不用管框架层级问题，它可以写入任何类型的数据，而做到各个页面之间数据共享。 |
||
| art.dialog.data(name) | 跨框架数据共享读取接口。指定name即返回数据，任何引用了artDialog的页面都有效 | ||
| art.dialog.removeData(name) | 跨框架数据共享删除接口。删除指定名称的数据，任何引用了artDialog的页面都有效 | ||
| 异步数据对话框 | |||
| art.dialog.open(url, options, cache) | 创建一个iframe页面 参数: 地址, 配置参数, 缓存开关(默认true) |
||
| art.dialog.open.api | iframe页面获取open方法扩展方法。 (注意这个iframe中也必须引用artDialog脚本文件) |
||
| art.dialog.opener | iframe页面获取open方法触发来源页面window对象。 (注意这个iframe中也必须引用artDialog脚本文件) |
||
| art.dialog.close() | iframe页面关闭open方法创建的对话框的快捷方式。 close方法等同于： (注意这个iframe中也必须引用artDialog脚本文件) |
||
| art.dialog.load(url, options, cache) | Ajax加载内容 参数：地址, 配置参数, 缓存开关(默认true) |
||
| 基础交互对话框 | |||
| art.dialog.alert(content, callback) | 警告消息 (同时只允许一个alert) 参数: 内容, 对话框关闭后的回调函数 |
||
| art.dialog.confirm(content, ok, cancel) | 确认 (同时只允许一个confirm) 参数: 内容, 确定按钮回调函数, 取消按钮回调函数 |
||
| art.dialog.prompt(content, ok, value) | 提问 (同时只允许一个prompt) 参数: 内容, 确定按钮回调函数, 文本框默认值 |
||
| art.dialog.tips(content, time) | 短暂提示(同时只允许一个tips) 参数: 内容、显示时间(单位秒, 默认1.5) |
||
| 自定义 | |||
| art.dialog.through(options) | 创建一个普通可穿越框架的对话框 不鼓励直接使用window.top这样的方式穿越，这样可能因为对话框触发页面重置导致其创建的对象在内存中被清空而发生异常 |
||
文章点评