artdialog弹出方式

artDialog是一个精巧的web对话框组件，压缩后只有十多KB，并且不依赖其他框架。

在页面head引入artDialog，注意如果文件带有skin参数将会无阻塞的方式自动加载对应的皮肤css文件，当然你仍然可以使用传统方式引用“skins/”目录下的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>

配置参数

配置全局默认设置:

(function (config) { config[‘lock‘] = true; config[‘fixed‘] = true; config[‘yesText‘] = ‘yes‘; config[‘noText‘] = ‘no‘; // [more..] })(art.dialog.defaults);

配置参数范例

内容 [content]

1. 传入字符串

art.dialog({ content: ‘我支持HTML‘ });

运行»

2. 传入HTMLElement

备注：1、元素不是复制而是完整移动到对话框中，所以原有的事件与属性都将会保留 2、如果隐藏元素被传入到对话框，会设置display:block属性显示该元素 3、对话框关闭的时候元素将恢复到原来在页面的位置，style display属性也将恢复

art.dialog({ content: document.getElementById(‘demoCode_content_DOM‘), id: ‘EF893L‘ });

运行»

3. 高级应用：传入Object并使用“tmpl”模板参数生成内容

备注：拼接字符串是一个比较无趣的活儿，而artDialog内部使用一个微型模板引擎解析自身UI框架，你可以通过tmp参数继续使用它格式化内容。模板支持原生的javascript语法，可进行条件判断。推荐你尝试使用type="text/tmpl"的script标签存放模板，如：

var tmpl = document.getElementById(‘tmpl_demoCode_content‘).innerHTML; art.dialog({ content: { code: 0, users: [‘糖饼‘, ‘月月鸟‘, ‘水水‘, ‘丽丽‘, ‘花花‘, ‘大叔‘], me: ‘糖饼‘, web: ‘http://www.planeart.cn‘ }, tmpl: tmpl });

运行»

标题 [title]

art.dialog({ title: ‘hello world!‘ });

运行»

确定取消按钮 [yesFn & noFn]

备注：回调函数this指向扩展接口，如果返回false将阻止对话框关闭

art.dialog({ content: ‘如果定义了回调函数才会出现相应的按钮‘, yesFn: function () { this.title(‘3秒后自动关闭‘).time(3); return false; }, noText: ‘关闭‘, noFn: true //为true等价于function(){} });

运行»

自定义按钮 [button]

备注：回调函数this指向扩展接口，如果返回false将阻止对话框关闭；button参数对应的控制接口名称也是"button"

art.dialog({ id: ‘testID‘, content: ‘hello world!‘, button: [ { name: ‘同意‘, callback: function () {this.content(‘你同意了‘).time(2); return false; }, focus: true }, { name: ‘不同意‘, callback: function () {alert(‘你不同意‘) } }, { name: ‘无效按钮‘, disabled: true }, { name: ‘关闭我‘ } ] });

运行»

定时关闭的消息 [time]

art.dialog({ time: 2, content: ‘两秒后关闭‘ });

运行»

防止重复弹出 [id]

art.dialog({ id: ‘testID‘, content: ‘再次点击运行看看‘ }); art.dialog({id: ‘testID‘}).title(‘3秒后关闭‘).time(3);

运行»

定义消息图标 [icon]

内置图标：alert、succeed、error、confirm

art.dialog({ icon: ‘succeed‘, content: ‘我可以定义消息图标哦‘ });

运行»

内容与边界填充边距 [padding]

有时候并不需要默认的内容填充边距，如展示图片与视频

art.dialog({ padding: 0, title: false, content: ‘<img src="./images/photo.jpg" width="379" height="500" />‘, lock: true });

运行»

锁屏 [lock & background & opacity]

art.dialog({ lock: true, background: ‘#600‘, // 背景色 opacity: 0.7, // 透明度 content: ‘中断用户在对话框以外的交互，展示重要操作与消息‘, icon: ‘error‘, yesFn: function () { art.dialog({content: ‘再来一个锁屏‘, lock:true}); return false; }, noFn: true });

运行»

跟随元素 [follw]

1、标准形式

art.dialog({ follow: document.getElementById(‘followTestBtn‘), content: ‘让对话框跟着某个元素，一个元素同时只能出现一个对话框‘ });

运行»

2、使用简写形式 （已经绑定onclick事件，注意此返回值不再是对话框控制接口）

art(‘#demoCode_follow_a‘).dialog({ content: ‘让对话框跟着某个元素，一个元素同时只能出现一个对话框‘ });

元素触发 运行»

自定义坐标 [left & top]

art.dialog({ left: 100, top: ‘60%‘, content: ‘我改变坐标了‘ });

运行»

创建一个右下角浮动的消息窗口

art.dialog({ id: ‘msg‘, title: ‘公告‘, content: ‘hello world!‘, width: 320, height: 240, left: ‘100%‘, top:‘100%‘, fixed: true, drag: false, resize: false })

运行»

设置大小 [width & height]

art.dialog({ width: ‘20em‘, height: 55, content: ‘尺寸可以带单位‘ });

运行»

创建一个全屏对话框

art.dialog({ width: ‘100%‘, height: ‘100%‘, left: ‘0%‘, top: ‘0%‘, fixed: true, resize: false, drag: false })

运行»

静止定位 [fixed]

art.dialog({ fixed: true, content: ‘请拖动滚动条查看‘ });

运行»

不许拖拽 [drag & resize]

art.dialog({ drag: false, resize: false, content: ‘禁止拖拽‘ });

运行»

控制接口

备注：控制接口返回值都是this，因此你可以使用链式编程风格。

控制接口范例

控制接口可以在对话框初始化后控制对话框，需要有一定的javascript基础，这里不做过多演示。

获取控制接口：直接引用控制接口

var dialog = art.dialog({ title: ‘我是对话框‘, content: ‘我是初始化的内容‘ }); dialog.content(‘对话框内容被控制接口改变了‘).title(‘提示‘);

运行»

获取控制接口：使用对话框ID

art.dialog({ id: ‘KDf435‘, title: ‘警告‘, content: ‘我是初始化的内容‘ }); art.dialog.list[‘KDf435‘].content(‘对话框内容被控制接口改变了‘).time(2);

运行»

获取控制接口：this引用

art.dialog({ title: ‘警告‘, content: ‘我是初始化的内容‘, yesFn: function () { this.content(‘你点了确定按钮‘).position(‘50%‘, null).lock().time(2); return false; }, initFn: function () { this.content(‘对话框内容被控制接口改变了‘); } });

运行»

演示四

关闭页面所有对话框

var list = art.dialog.list; for (var i in list) { list[i].close(); };

运行»

按钮接口演示

备注：回调函数如果返回false将阻止对话框关闭

var dialog = art.dialog({ title: ‘警告‘, content: ‘点击管理按钮将让删除按钮可用‘, width: ‘20em‘, button: [{ name: ‘管理‘, callback: function () { this.content(‘我更改了删除按钮‘).button({ name: ‘删除‘, disabled:false }); return false; }, focus: true }] }); dialog.button( { name: ‘删除‘, callback: function () {alert(‘remove‘) }, disabled: true } )

运行»

改变关闭方式

art.dialog({ id: ‘show-hide‘, content: ‘关闭后阻止对话框被删除，只隐藏对话框‘, closeFn: function () {this.hide(); return false; } }).show();

运行»

AJAX高级应用：执行HTML片段中特殊script标签

HTML片段中的<script type="text/dialog"></script>标签包裹的javascript将会在对话框中执行，其this指向对话框控制接口，代码在闭包内执行，不会影响全局，这样可以进一步实现内容模块化。

(本例子使用了AJAX，需要在服务器上运行。可打开 ./ajaxContent/login.html查看源码中的自定义脚本)

var dialog = art.dialog({id: ‘N3690‘}); // jQuery ajax $.ajax({ url: ‘./ajaxContent/login.html‘, success:function (data) { dialog.content(data); }, cache: false });

运行»

扩展：iframe应用工具集

框架集页面无法覆盖第三方元素，不过可以使用一个iframe套住框架集页面就可以正常使用，见下面演示文档