artDialog( http://www.planeart.cn/demo/artDialog/_doc/API.html)
2013-01-24 20:18
501 查看
artDialogiframe Tools
返回首页|在框架中演示本页面
如果顶层面引用了artDialog,对话框会穿越出框架在父页面弹出
chrome浏览器本地运行会有安全限制,请在服务器上查看本页面
artDialog只能运行在W3C标准页面下,需要页面有声明<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">或者<!DOCTYPE HTML>(jQuery版本则无此限制)
获取artDialog可用顶层页面window对象[parent]
art.dialog.parent方法可以理解为widnow.top,但art.dialog.parent已经排除了框架集、跨域、artDialog对象不存在的情况,最终给出一个安全可用的window对象,这里页面所有穿越的对话框最终是在这个window上。你可以用此作为前缀去操作对话框穿越框架后所在页面的对象var win = art.dialog.parent; win.document.title = '我修改了页面标题'; win.document.getElementById('testInput').value = 'hello world!';
运行»
可穿越框架的标准对话框[through]
不鼓励直接使用window.top这样的方式穿越,这样可能因为对话框触发页面重置导致其产生所有的对象在内存中被清空,而让对话框无法关闭,所以你应该用这个安全的方法创建自定义对话框。var throughBox = art.dialog.through; throughBox({ content: '我是一个普通的对话框,只是能穿越框架而已', lock: true });
运行»
嵌入网页[open]
同域下能够自适应iframe大小,但chrome 浏览器本地运行会认为跨域而无法适应大小open方法有如下这几个私有个功能
名称 | 类型 | 描述 |
---|---|---|
iframe内部静态方法 | ||
art.dialog.open.api | Object | 从iframe页面引用对话框控制接口 |
art.dialog.open.origin | object Window | 从iframe页面引用对话框触发页面的window |
控制接口 | ||
iframe | HTMLElement | 引用open创建的iframe(4.0.1新增) |
一、使用iframe内部脚本控制对话框
请打开 login_iframe.html查看源码art.dialog.open('login_iframe.html', {title: '提示'});
运行»
二、在外部对iframe进行控制
对iframe控制需要用到open私有的this.iframe控制接口:art.dialog.open('login_iframe_2.html', { title: '登录', // 在open()方法中,initFn会等待iframe加载完毕后执行 initFn: function () { var iframe = this.iframe.contentWindow; var parent = art.dialog.parent;// 引用顶层页面window对象 var username = iframe.document.getElementById('login-form-username'); username.value = 'guest'; setTimeout(function () { username.select(); }, 80); parent.document.title = '测试'; }, yesFn: function () { var iframe = this.iframe.contentWindow; if (!iframe.document.body) { alert('iframe还没加载完毕呢') return false; }; var form = iframe.document.getElementById('login-form'), username = iframe.document.getElementById('login-form-username'), password = iframe.document.getElementById('login-form-password'); if (check(username) && check(password)) form.submit(); return false; }, noFn: true }); // 表单验证 var check = function (input) { if (input.value === '') { inputError(input); input.focus(); return false; } else { return true; }; }; // 输入错误提示 var inputError = function (input) { clearTimeout(inputError.timer); var num = 0; var fn = function () { inputError.timer = setTimeout(function () { input.className = input.className === '' ? 'login-form-error' : ''; if (num === 5) { input.className === ''; } else { fn(num ++); }; }, 150); }; fn(); };
运行»
三、跨域访问
跨域访问无法自适应大小,也无法进行父页面与子页面数据交换art.dialog.open('http://zhihu.com/', {title: '知乎', width: 860, height: 500});
运行»
框架与框架、主页面数据共享[data & removeData]
框架与框架之间以及与主页面之间进行数据交换是非常头疼的事情,常规情况下你必须知道框架的名称才能进行数据交换,如果是在复杂的多层框架下操作简直就是开发人员噩梦,而这样的问题在CMS多框架应用中十分常见。在artDialog中这一切完全被简化,它有一个简单易用的数据共享接口,可以共享任意类型的数据供各个框架页面读取,它与页面名称、层级毫无关系。相关原理
请打开 iframeA.html源码查看范例。由于art.dialog.open方法打开的iframe加剧了框架的层级的复杂性,所以请特别重视这个data方法!
art.dialog.data('test', document.getElementById('demoInput04-3').value); art.dialog.open('iframeA.html', null, false); // 此时 iframeA.html 页面可以使用 art.dialog.data('test') 获取到数据,如: // document.getElementById('aInput').value = art.dialog.data('test');
运行» (请输入测试文字)
Ajax[load]
特别说明:第三个参数为ajax缓存开关,默认为true。由于浏览器限制,ajax需要在服务端运行才能正确运行本例子。一、加载网页片段
art.dialog.load('./ajaxContent/content.html', { title: '远程载入HTML片段', yesFn: function(topWin){ art.dialog('hello world'); }, closeFn: function(){ art.dialog.tips('close') } }, false);
运行»
art.dialog.load('./ajaxContent/login.html', false);
运行»
二、加载JSON结合模板生成结构
特别说明:这里是用JSON数据+模板引擎拼接HTML代码,推荐此代替常规的iframe拼接页面,它比iframe快多了art.dialog.load('./ajaxContent/content.json', { title: '使用JSON拼接模板', tmpl: '\ <% if (code === 0) { %>\ <p>当前用户:<a href="<%=web%>" title="<%=web%>"><%=me%></a></p>\ <p>\ 所有用户:\ <% for (i = 0; i < users.length; i++) { %>\ <%=i + 1%>.<%=users[i]%> \ <% } %>\ </p>\ <% } else { %>\ <p>哦,服务器出错了,错误代码:<%=code%><p>\ <% } %>\ ' }, true);
运行»
警告消息[alert]
art.dialog.alert('警察叔叔会请你喝茶!');
运行»
确认消息[confirm]
art.dialog.confirm('你确认删除操作?', function(){ var parent = art.dialog.parent, input = document.getElementById('demoInput02'), photo = parent.document.getElementById('photo'); if (input) input.parentNode.removeChild(input); if (photo) photo.innerHTML = '<img src="images/lixiaolong.png" />'; }, function(){ art.dialog.tips('你取消了操作'); });
运行»
点运行按钮删掉我
提问消息[prompt]
特别说明:回调函数第一个参数为输入的值art.dialog.prompt('你的名字是什么?', function(data){ // data 代表输入数据; var input = document.getElementById('demoInput03'), topVal = art.dialog.parent.document.getElementById('testInput'); if (input) input.value = data; if (topVal) topVal.value = data; }, '我是糖饼');
运行»
提示消息[tips]
art.dialog.tips('提交成功!', 1.5);
运行»
http://www.planeart.cn/demo/artDialog/index.html
相关文章推荐
- 二、nodejs图片处理(gm) api: https://www.npmjs.com/package/gm 及 MD5加密:http://nodejs.cn/doc/node/crypto.html#crypto_crypto_createhash_algorithm
- 微信支付开发若干问题总结,API搞死人(谢谢ζั͡ޓއއއ๓http://www.thinkphp.cn/code/1620.html)血淋淋的教训,第二次栽这里了
- http://www.debian.org/doc/manuals/debian-faq/ch-pkg_basics.zh-cn.html
- birt报表学习手册http://www.birthome.cn/birt_api/index.html
- 提升 web 应用程序的性能---http://www.ibm.com/developerworks/cn/web/wa-webappperformance/index.html
- NOKIA各机型相对应操作系统平台及屏幕参数http://www.nokiacn.net/thread-213829-1-1.html
- (转自http://www.eact.com.cn/blog/html/30/5230-64253.html)【软件应用】如何执行vbs脚本文件
- http://www.cncode.com/article/article_9_1.html
- http://www.oracle.com/technetwork/cn/articles/hunter-rac11gr2-iscsi-3-092230-zhs.html#30
- nginxhttp://www.nginx.cn/2181.html
- 微软在全国高校举办Silverlight大赛: http://www.msuniversity.edu.cn/static/silverlight/index.html
- 使用c#在vs2005下写的换桌面图片的小程序(from: http://www.wangchao.net.cn/bbsdetail_26766.html)
- 撰写压力测试计划书与压力测试报告 -http://www.zxbc.cn/html/20081105/67465.html
- 破解激活Win10无风险?激活后删除激活工具无影响===http://www.pconline.com.cn/win10/693/6932077_all.html#content_page_4
- SQLSERVER中,数据库同步的实现(转摘于:http://www.linux-cn.com/html/database/sqlserver/20070603/47479.html)
- 友好日记本(http://www.kindtools.com/cn/index.html)
- 纯div+css实现下拉菜单 http://www.zhangmeigong.cn/post/xiala.html
- JS+CSS仿265上下层的移动(上移,下移)(原文网址:http://www.csrcode.cn/html/txdm/tcys/3271.htm)
- SqlServer 监控数据库连接数方法(转自:http://www.cnblogs.com/alphacn/archive/2010/07/19/1780572.html)
- osgi入门文章 转载http://www.ibm.com/developerworks/cn/education/opensource/os-eclipse-osgi/index.html