artDialog教程01

artDialog是一个基于JavaScript编写的对话框组件，它拥有精致的界面与友好的接口，请看下面artDialog 对话框插件基本使用教程讲解：

快速入门

在页面head引入artDialog，注意如果文件带有skin参数将会无阻塞的方式自动加载对应的皮肤css文件，当然你仍然可以使用传统方式引用&ldquo;skins/&rdquo;目录下的css文件，二者选其一。 <script src="artDialog.js?skin=default"></script>如果项目采用 JQuery作为框架，则引用jQuery artDialog版本： <script src="jquery.artDialog.js?skin=default"></script>如果需要在iframe应用下提供 更好的支持，需要加上： <script src="artDialog.iframeTools.js"></script>

一、使用传统的参数

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

三、扩展方法

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

插件：框架应用工具

artDialog针对CMS类的框架应用提供了专属插件，如穿越框架、iframe、AJAX、跨框架传值操作等。

例： 使用open方法嵌入页面，并使用data方法在各个iframe间传递数据：

var val = document.getElementById('demoInput04-3').value;
art.dialog.data('test', val);
art.dialog.data('homeDemoPath', './_doc/');

// 此时 iframeA.html 页面可以使用 art.dialog.data('test') 获取到数据，如：
// document.getElementById('aInput').value = art.dialog.data('test');
art.dialog.open('./_doc/iframeA.html');

配置参数

名称	类型	默认值	描述
内容
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.121ask.com/thread-5614-1-1.html