一、artDialog是什么

二、artDialog的使用

三、配置参数

配置全局默认设置

(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

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

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

  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]

  art.dialog({ content: '如果定义了回调函数才会出现相应的按钮', yesFn: function () { this.title('3秒后自动关闭').time(3); return false; }, noText: '关闭', noFn: true //为true等价于function(){} });
  备注：回调函数this指向扩展接口，如果返回false将阻止对话框关闭。

• 自定义按钮 [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: '关闭我' } ] });
  备注：回调函数this指向扩展接口，如果返回false将阻止对话框关闭；button参数对应的控制接口名称也是"button"。

• 定时关闭的消息 [time]

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

• 防止重复弹出 [id]

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

• 定义消息图标 [icon]

  art.dialog({ icon: 'succeed', content: '我可以定义消息图标哦' });
  内置图标：alert、succeed、error、confirm

• 内容与边界填充边距 [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: '禁止拖拽' });

四、控制接口

控制接口范例

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

  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指向对话框控制接口，代码在闭包内执行，不会影响全局，这样可以进一步实现内容模块化。
  var dialog = art.dialog({id: 'N3690'}); // jQuery ajax $.ajax({ url: './ajaxContent/login.html', success:function (data) { dialog.content(data); }, cache: false });
  (本例子使用了AJAX，需要在服务器上运行。)

五、扩展：iframe应用工具集

－－－－－－－－－－－－－－－－－－－－－－－分割线－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－

感谢作者整理。