artdialog html4,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

备注：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标签存放模板，如：

vartmpl = 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);returnfalse; }, 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);returnfalse; }, 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:'', lock:true});

锁屏 [lock & background & opacity]

art.dialog({ lock:true, background:'#600',// 背景色opacity:0.7, // 透明度content:'中断用户在对话框以外的交互，展示重要操作与消息', icon:'error', yesFn:function(){art.dialog({content:'再来一个锁屏', lock:true});returnfalse; }, 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:'禁止拖拽'});

控制接口