artDialog说明文档-jquery插件
artDialog说明文档
artDialog api 风格统一，有一定前端开发经验的同学通过阅读文档5分钟即可上手。
引入文件
在页面 head 引入 artDialog 样式与脚本文件:
<link href="./skins/default.css" rel="stylesheet" />
<script src="./artDialog.min.js"></script>
如果使用jquery，引用jquery.artDialog.min.js即可，调用时请把 'art' 前缀替换成 '$'。
调用方式
artDialog 有两种调用方式，第一种是最简单的直接传入参数方式；第二种拥有更多的可选项，参见 配置参数。
art.dialog(content, [ok], [cancel])
art.dialog('artDialog: I Love You!', function () {alert('Thank you!')});
运行
art.dialog(options)
art.dialog({
title: '欢迎',
content: '欢迎使用artDialog对话框组件！',
ok: function () {
this
.title('警告')
.content('请注意artDialog两秒后将关闭！')
.lock()
.time(2000);
return false;
}
});
运行
扩展接口
除了上述两种调用方式之外，artDialog 还提供一些接口方便异步操作，比如实现外部程序更新对话框内容、关闭窗口等。这是属于高级操作，详情参见 接口。
若无特别说明，扩展方法均支持链式调用。
配置参数
title
概述
(默认值: "message") 标题内容
类型
String
示例
art.dialog({
title: 'hello world!'
});
运行
content
概述
(默认值: "<div class="d-loading"><span>loading..</span></div>") 设置消息内容。
如果传入的是 HTMLElement 类型，如果是隐藏元素会给其设置display:block以显示该元素，其他属性与绑定的事件都会完整保留，对话框关闭后此元素又将恢复原来的display属性，并且重新插入原文档所在位置
类型
String, HTMLElement
示例
art.dialog({
content: 'hello world!'
});
运行
art.dialog({
content: document.getElementById('options-content-demo-element'),
id: 'EF893L'
});
运行
ok
概述
确定按钮。
回调函数 this 指向 art.dialog 对象，执行完毕默认关闭对话框，若返回 false 则阻止关闭
类型
Function
示例
art.dialog({
ok: function () {
this.content('hello world!');
return false;
}
});
运行
cancel
概述
取消按钮。
取消按钮也等同于标题栏的关闭按钮。回调函数 this 指向 art.dialog 对象，执行完毕默认关闭对话框，若返回 false 则阻止关闭
类型
Function
示例
art.dialog({
cancel: function () {
alert('关闭');
}
});
运行
okValue
概述
(默认值: "ok") 确定按钮文本
类型
String
示例
art.dialog({
okValue: '猛击我',
ok: function () {
this.content('hello world!');
return false;
}
});
运行
cancelValue
概述
(默认值: cancel) 取消按钮文本
类型
String
示例
art.dialog({
cancelValue: '取消我',
cancel: function () {
alert('关闭');
}
});
运行
button
概述
自定义按钮组。
回调函数 this 指向 art.dialog 对象，执行完毕默认关闭对话框，若返回 false 则阻止关闭
类型
Array
选项
value
按钮显示文本
callback
(可选) 按钮点击后的回调函数。回调函数 this 指向 art.dialog 对象，执行完毕默认关闭对话框，若返回 false 则阻止关闭
focus
(默认值: true) 是否聚焦
width
(可选) 设置按钮 CSS width 值
disabled
(默认值: false) 是否禁用
id
(默认值: 与 value 一致) 唯一标识
示例
art.dialog({
button: [
{
value: '同意',
callback: function () {
this
.content('你同意了')
.button({
id: 'button-disabled',
value: '我变成有效按钮了',
disabled: false
});
return false;
},
focus: true
},
{
value: '不同意',
callback: function () {
alert('你不同意')
}
},
{
id: 'button-disabled',
value: '无效按钮',
disabled: true
},
{
value: '关闭我'
}
]
});
运行
width
概述
(默认值: "auto") 设置对话框 内容 宽度。
一般情况下无需设置此值，对话框会自适应内容宽度
类型
Number, String
示例
art.dialog({
width: 460
});
运行
art.dialog({
width: '20em'
});
运行
height
概述
(默认值: "auto") 设置对话框 内容 高度。
一般情况下无需设置此值，对话框会自适应内容宽度
类型
Number, String
示例
art.dialog({
height: 460
});
运行
art.dialog({
height: '20em'
});
运行
fixed
概述
(默认值: false) 开启固定定位。
固定定位是 css2.1 position 的一个属性，它能固定在浏览器某个地方，也不受滚动条拖动影响。IE6 与 部分移动浏览器对其支持不好，内部会转成绝对定位
类型
Boolean
示例
art.dialog({
fixed: true,
content: '请拖动滚动条查看'
});
运行
follow
概述
让对话框依附在指定元素附近
类型
HTMLElement
示例
art.dialog({
follow: document.getElementById('options-follow-demo-runCode'),
content: '让对话框跟着某个元素，一个元素同时只能出现一个对话框'
});
运行
lock
概述
(默认值: false) 开启锁屏遮罩。
中断用户对话框之外的交互，用于显示非常重要的操作/消息。建议只在适合的时候使用它。遮罩的颜色与透明度可在皮肤CSS中设置。
类型
Boolean
示例
art.dialog({
lock: true
});
运行
padding
概述
(默认值: "20px 25px") 设置消息内容与消息容器的填充边距，即 style padding 属性
类型
String
示例
art.dialog({
content: 'hello world',
padding: 0
})
运行
id
概述
设定对话框唯一标识。
作用：
可防止重复 ID 对话框弹出
可后续使用 art.dialog.get(id) 获取某个对话框的接口
类型
String
示例
art.dialog({
id: 'id-demo',
content: '再次点击运行看看'
});
art.dialog.get('id-demo').title('8888888888');
运行
zIndex
概述
(默认值: 1987) 重置全局 zIndex 初始值，用来改变对话框叠加高度。
比如有时候配合外部浮动层UI组件，但是它们可能默认 zIndex 没有 artDialog 高，导致无法浮动到 artDialog 之上，这个时候你就可以给对话框指定一个较小的 zIndex 值。 请注意这是一个会影响到全局的配置，后续出现的对话框叠加高度将重新按此累加。
类型
Number
示例
art.dialog({
zIndex: 87
});
运行
initialize
概述
对话框初始化完成后执行的函数。
回调函数 this 指向 art.dialog 对象
类型
Function
示例
art.dialog({
initialize: function () {
this.content('对话框初始化完成');
}
});
运行
beforeunload
概述
对话框关闭前执行的函数。
回调函数 this 指向 art.dialog 对象，执行完毕默认关闭对话框，若返回 false 则阻止关闭
类型
Function
示例
art.dialog({
beforeunload: function () {
return confirm('确定关闭对话框吗');
}
});
运行
visible
概述
(默认值: true) 是否显示对话框
类型
Boolean
示例
var dialog = art.dialog({
visible: false,
id: 'visible-demo'
});
confirm('显示对话框吗') ? dialog.visible() : dialog.hidden();
运行
time
概述
设置对话框显示时间，超过时间自动关闭 (单位：毫秒)
类型
Number
示例
art.dialog({
time: 2000
});
运行
接口
art.dialog.get(id)
概述
根据 id 获取 art.dialog 对象。注意：这是一个静态方法
参数
id
对话框 id
返回值
如果存在 id 参数则返回 art.dialog 对象，否则返回页面所有 art.dialog 对象数组
示例
art.dialog({
id: 'demo-get'
});
var dialog = art.dialog.get('demo-get');
dialog.title('hello').content('I Love You!');
运行
closed
概述
对话框是否已经关闭。注意：这是一个属性，对话框若关闭其值为 true
示例
var dialog = art.dialog();
dialog.close();
alert(dialog.closed);
运行
close()
概述
关闭对话框
示例
var dialog = art.dialog({
content: 'hello world!'
});
if (confirm('关闭对话框吗')) {
dialog.close();
};
运行
visible()
概述
把隐藏的对话框显示
示例
var dialog = art.dialog({
visible: false
});
dialog.visible();
运行
hidden()
概述
隐藏对话框
示例
var dialog = art.dialog();
dialog.hidden();
运行
title(value)
概述
设置对话框标题
参数
value
标题内容
示例
var dialog = art.dialog({
title: '请等待..'
});
dialog.title('欢迎使用');
运行
content(value)
概述
设置消息内容
参数
value
消息内容
示例
var dialog = art.dialog();
dialog.content('加载完成！');
运行
button(button, [button], ..)
概述
添加或者修改一个或者多个按钮
参数
button
按钮配置
选项
value
按钮显示文本
callback
(可选) 按钮点击后的回调函数。回调函数 this 指向 art.dialog 对象，执行完毕默认关闭对话框，若返回 false 则阻止关闭
focus
(默认值: true) 是否聚焦
width
(可选) 设置按钮 CSS width 值
disabled
(默认值: false) 是否禁用
id
(默认值: 与 value 一致) 唯一标识
示例
修改按钮与新增按钮：
var dialog = art.dialog({
button: [{
value: '增加一个按钮',
focus: true,
callback: function () {
this.button({
value: '关闭我'
});
return false;
}
}, {
id: 'button',
value: '提交 (5)',
width: '8em',
callback: function () {
alert(0);
return false;
},
disabled: true
}]
});
var i = 5;
var timer = setInterval(function () {
i--;
dialog.button({
id: 'button',
value: '提交 (' + i + ')',
disabled: true
});
if (i === 0) {
clearInterval(timer);
dialog.button({
id: 'button',
value: '提交',
disabled: false
});
};
}, 1000);
运行
follow(element)
概述
让对话框依附在指定元素附近
参数
element
元素
示例
var dialog = art.dialog();
dialog.follow(document.getElementById('api-follow-demo-runCode'));
运行
size(width, height)
概述
指定对话框内容尺寸
参数
width
内容宽度
height
内容高度
示例
var dialog = art.dialog();
dialog.size('20em', 60);
运行
lock()
概述
开启锁屏遮罩
示例
var dialog = art.dialog();
dialog.lock();
运行
unlock()
概述
关闭锁屏遮罩
示例
var dialog = art.dialog({
lock: true
});
dialog.unlock();
运行
time(value)
概述
设置对话框显示时间，超过时间自动关闭 (单位：毫秒)
参数
value
毫秒
示例
var dialog = art.dialog();
dialog.time(2000);