artDialog对话框组件使用方法

artDialog对话框组件

artDialog是一个基于javascript编写的对话框组件，它拥有精致的界面与友好的接口。



自适应内容
artDialog的特殊UI框架能够适应内容变化，甚至连外部程序动态插入的内容它仍然能自适应，因此你不必去考虑消息内容尺寸使用它。它的消息容器甚至能够根据宽度让文本居中或居左对齐——这一切全是XHTML+CSS原生实现。
完善的接口
它的接口完善，可以轻易与外部程序配合使用。如异步写入消息、控制位置、尺寸、显示与隐藏、关闭等。
细致的体验
如果不是在输入状态，它支持Esc快捷键关闭；可指定在元素附近弹出，让操作更便捷；智能给按钮添加焦点；黄金比例垂直居中；超大响应区域特别为ipad等触屏设备优化；预先缓存皮肤图片更快响应……
跨平台兼容
兼容：IE6+、Firefox、Chrome、Safari、Opera以及iPad等移动设备。并且IE6下也能支持现代浏览器的静止定位(fixed)、覆盖下拉控件、alpha通道png背景。



一、使用传统的参数

art.dialog(content, ok, cancel)
art.dialog('简单愉悦的接口，强大的表现力，优雅的内部实现', function(){alert('yes');});



二、使用字面量传参

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;
}
});
复制代码

更多配置参数用法请查阅API文档： http://www.planeart.cn/demo/artDialog/_doc/API.html#options



三、扩展方法

需要对弹出后的对话框操作？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();

更多扩展方法用法请查阅API文档： http://www.planeart.cn/demo/artDialog/_doc/API.html#API





配置参数

名称 类型 默认值 描述
内容
title String '消息' 标题内容
content String 'loading..' 消息内容。
1、如果传入的是HTMLElement类型，如果是隐藏元素会给其设置display:block以显示该元素，其他属性与绑定的事件都会完整保留，对话框关闭后此元素又将恢复原来的display属性，并且重新插入原文档所在位置
2、如果没有设定content的值则会有loading的动画
HTMLElement
按钮
ok Function null 确定按钮回调函数。
函数如果返回false将阻止对话框关闭；函数this指针指向内部api；如果传入true表示只显示有关闭功能的按钮
Boolean
cancel Function null 取消按钮回调函数。
函数如果返回false将阻止对话框关闭；函数this指针指向内部api；如果传入true表示只显示有关闭功能的按钮
对话框标题栏的关闭按钮其实就是取消按钮，只不过视觉不同罢了，点击同样触发cancel事件
Boolean
okVal String '确定' "确定按钮"文字
cancelVal String '取消' "取消按钮"文字
button Array null 自定义按钮。
配置参数成员：
name —— 按钮名称
callback —— 按下后执行的函数
focus —— 是否聚焦点
disabled —— 是否标记按钮为不可用状态（后续可使用扩展方法让其恢复可用状态）

示例：
参数如：[{name: '登录', callback: function () {}}, {name: '取消'}] 。注意点击按钮默认会触发按钮关闭动作，需要阻止触发关闭请让回调函数返回false
尺寸
width Number 'auto' 设置消息内容宽度，可以带单位。一般不需要设置此，对话框框架会自己适应内容。
如果设置为百分值单位，将会以根据浏览器可视范围作为基准，此时如果浏览器窗口大小被改变其也会进行相应的调整
String
height Number 'auto' 设置消息内容高度，可以带单位。不建议设置此，而应该让内容自己撑开高度。
如果设置为百分值单位，将会以根据浏览器可视范围作为基准，此时如果浏览器窗口大小被改变其也会进行相应的调整
String
位置
fixed Boolean false 开启静止定位。静止定位是css2.1的一个属性，它静止在浏览器某个地方不动，也不受滚动条拖动影响。（artDialog支持IE6 fixed）
follow HTMLElement null 让对话框依附在指定元素附近。
可传入元素ID名称，注意ID名称需要以“#”号作为前缀
String
left Number '50%' 相对于可视区域的X轴的坐标。
可以使用'0%' ~ '100%'作为相对坐标，如果浏览器窗口大小被改变其也会进行相应的调整
String
top Number '38.2%' 相对于可视区域的Y轴的坐标。
可以使用'0%' ~ '100%'作为相对坐标，如果浏览器窗口大小被改变其也会进行相应的调整
String
视觉
lock Boolean false 开启锁屏。
中断用户对话框之外的交互，用于显示非常重要的操作/消息，所以不建议频繁使用它，它会让操作变得繁琐
background String '#000' 锁屏遮罩颜色
opacity Number 0.7 锁屏遮罩透明度
icon String null 定义消息图标。可定义“skins/icons/”目录下的图标名作为参数名（不包含后缀名）
padding String '20px 25px' 内容与边界填充边距(即css padding)
交互
time Number null 设置对话框显示时间。以秒为单位
resize Boolean true 是否允许用户调节尺寸
drag Boolean true 是否允许用户拖动位置
esc Boolean true 是否允许用户按Esc键关闭对话框
高级
id String null 设定对话框唯一标识。用途：
1、防止重复弹出
2、定义id后可以使用art.dialog.list[youID]获取扩展方法
Number
zIndex Number 1987 重置全局zIndex初始值。
用来改变对话框叠加高度。比如有时候配合外部浮动层UI组件，但是它们可能默认zIndex没有artDialog高，导致无法浮动到artDialog之上，这个时候你就可以给对话框指定一个较小的zIndex值。
请注意这是一个会影响到全局的配置，后续出现的对话框叠加高度将重新按此累加。
init Function null 对话框弹出后执行的函数
close Function null 对话框关闭前执行的函数。函数如果返回false将阻止对话框关闭。
请注意这不是关闭按钮的回调函数，无论何种方式关闭对话框，close都将执行。
show Boolean true 是否显示对话框



扩展方法

名称 描述
close() 关闭对话框
show() 显示对话框
hide() 隐藏对话框
title(value) 写入标题。无参数则返回标题容器元素
content(value) 向消息容器中写入内容。参数支持字符串、DOM对象，无参数则返回内容容器元素
button(arguments) 插入一个自定义按钮。
配置参数成员：
name —— 按钮名称
callback —— 按下后执行的函数
focus —— 是否聚焦点
disabled —— 是否标记按钮为不可用状态（后续可使用扩展方法让其恢复可用状态）

示例：

button({
name: '登录',
focus: true,
callback: function () {}
}, {
name: '取消'
})

follow(element) 让对话框吸附到指定元素附近
position(left, top) 重新定位对话框
size(width, height) 重新设定对话框大小
lock() 锁屏
unlock() 解锁
time(val) 定时关闭（单位秒）



了解更多http://www.planeart.cn/demo/artDialog/index.html