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);