artDialog说明文档-jquery插件
artDialog说明文档
artDialogapi风格统一，有一定前端开发经验的同学通过阅读文档5分钟即可上手。
引入文件
在页面head引入artDialog样式与脚本文件:
<linkhref="./skins/default.css"rel="stylesheet"/>
<scriptsrc="./artDialog.min.js"></script>
如果使用jquery，引用jquery.artDialog.min.js即可，调用时请把'art'前缀替换成'$'。
调用方式
artDialog有两种调用方式，第一种是最简单的直接传入参数方式；第二种拥有更多的可选项，参见配置参数。
art.dialog(content,[ok],[cancel])
art.dialog('artDialog:ILoveYou!',function(){alert('Thankyou!')});
运行
art.dialog(options)
art.dialog({
title:'欢迎',
content:'欢迎使用artDialog对话框组件！',
ok:function(){
this
.title('警告')
.content('请注意artDialog两秒后将关闭！')
.lock()
.time(2000);
returnfalse;
}
});
运行
扩展接口
除了上述两种调用方式之外，artDialog还提供一些接口方便异步操作，比如实现外部程序更新对话框内容、关闭窗口等。这是属于高级操作，详情参见接口。
若无特别说明，扩展方法均支持链式调用。
配置参数
title
概述
(默认值:"message")标题内容
类型
String
示例
art.dialog({
title:'helloworld!'
});
运行
content
概述
(默认值:"<divclass="d-loading"><span>loading..</span></div>")设置消息内容。
如果传入的是HTMLElement类型，如果是隐藏元素会给其设置display:block以显示该元素，其他属性与绑定的事件都会完整保留，对话框关闭后此元素又将恢复原来的display属性，并且重新插入原文档所在位置
类型
String,HTMLElement
示例
art.dialog({
content:'helloworld!'
});
运行
art.dialog({
content:document.getElementById('options-content-demo-element'),
id:'EF893L'
});
运行
ok
概述
确定按钮。
回调函数this指向art.dialog对象，执行完毕默认关闭对话框，若返回false则阻止关闭
类型
Function
示例
art.dialog({
ok:function(){
this.content('helloworld!');
returnfalse;
}
});
运行
cancel
概述
取消按钮。
取消按钮也等同于标题栏的关闭按钮。回调函数this指向art.dialog对象，执行完毕默认关闭对话框，若返回false则阻止关闭
类型
Function
示例
art.dialog({
cancel:function(){
alert('关闭');
}
});
运行
okValue
概述
(默认值:"ok")确定按钮文本
类型
String
示例
art.dialog({
okValue:'猛击我',
ok:function(){
this.content('helloworld!');
returnfalse;
}
});
运行
cancelValue
概述
(默认值:cancel)取消按钮文本
类型
String
示例
art.dialog({
cancelValue:'取消我',
cancel:function(){
alert('关闭');
}
});
运行
button
概述
自定义按钮组。
回调函数this指向art.dialog对象，执行完毕默认关闭对话框，若返回false则阻止关闭
类型
Array
选项
value
按钮显示文本
callback
(可选)按钮点击后的回调函数。回调函数this指向art.dialog对象，执行完毕默认关闭对话框，若返回false则阻止关闭
focus
(默认值:true)是否聚焦
width
(可选)设置按钮CSSwidth值
disabled
(默认值:false)是否禁用
id
(默认值:与value一致)唯一标识
示例
art.dialog({
button:[
{
value:'同意',
callback:function(){
this
.content('你同意了')
.button({
id:'button-disabled',
value:'我变成有效按钮了',
disabled:false
});
returnfalse;
},
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.1position的一个属性，它能固定在浏览器某个地方，也不受滚动条拖动影响。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
概述
(默认值:"20px25px")设置消息内容与消息容器的填充边距，即stylepadding属性
类型
String
示例
art.dialog({
content:'helloworld',
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(){
returnconfirm('确定关闭对话框吗');
}
});
运行
visible
概述
(默认值:true)是否显示对话框
类型
Boolean
示例
vardialog=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'
});
vardialog=art.dialog.get('demo-get');
dialog.title('hello').content('ILoveYou!');
运行
closed
概述
对话框是否已经关闭。注意：这是一个属性，对话框若关闭其值为true
示例
vardialog=art.dialog();
dialog.close();
alert(dialog.closed);
运行
close()
概述
关闭对话框
示例
vardialog=art.dialog({
content:'helloworld!'
});
if(confirm('关闭对话框吗')){
dialog.close();
};
运行
visible()
概述
把隐藏的对话框显示
示例
vardialog=art.dialog({
visible:false
});
dialog.visible();
运行
hidden()
概述
隐藏对话框
示例
vardialog=art.dialog();
dialog.hidden();
运行
title(value)
概述
设置对话框标题
参数
value
标题内容
示例
vardialog=art.dialog({
title:'请等待..'
});
dialog.title('欢迎使用');
运行
content(value)
概述
设置消息内容
参数
value
消息内容
示例
vardialog=art.dialog();
dialog.content('加载完成！');
运行
button(button,[button],..)
概述
添加或者修改一个或者多个按钮
参数
button
按钮配置
选项
value
按钮显示文本
callback
(可选)按钮点击后的回调函数。回调函数this指向art.dialog对象，执行完毕默认关闭对话框，若返回false则阻止关闭
focus
(默认值:true)是否聚焦
width
(可选)设置按钮CSSwidth值
disabled
(默认值:false)是否禁用
id
(默认值:与value一致)唯一标识
示例
修改按钮与新增按钮：
vardialog=art.dialog({
button:[{
value:'增加一个按钮',
focus:true,
callback:function(){
this.button({
value:'关闭我'
});
returnfalse;
}
},{
id:'button',
value:'提交(5)',
width:'8em',
callback:function(){
alert(0);
returnfalse;
},
disabled:true
}]
});
vari=5;
vartimer=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
元素
示例
vardialog=art.dialog();
dialog.follow(document.getElementById('api-follow-demo-runCode'));
运行
size(width,height)
概述
指定对话框内容尺寸
参数
width
内容宽度
height
内容高度
示例
vardialog=art.dialog();
dialog.size('20em',60);
运行
lock()
概述
开启锁屏遮罩
示例
vardialog=art.dialog();
dialog.lock();
运行
unlock()
概述
关闭锁屏遮罩
示例
vardialog=art.dialog({
lock:true
});
dialog.unlock();
运行
time(value)
概述
设置对话框显示时间，超过时间自动关闭(单位：毫秒)
参数
value
毫秒
示例
vardialog=art.dialog();
dialog.time(2000);