artDialog学习之旅(一)
接口
配置参数
- content: {消息内容,支持HTML}
- title: {标题.默认:'提示'}
- lock: {是否锁定屏幕. 默认:false}
- width: {宽度,支持em等单位. 默认:'auto'}
- height: {高度,支持em等单位. 默认:'auto'}
- url: {iframe地址,存在content参数时候,此参数无效}
- x: {x坐标,可以使用关键字,如:left/right/center. 默认:'center'}
- y: {y坐标,可以使用关键字,如:top/bottom/center. 默认:'center'(并非绝对垂直居中，而是使用的黄金比例)}
- fixed: {是否启用静止定位. 默认:false}
- time: {多少秒自动关闭}
- style: {对话框风格扩展参数,写入自定义className,详情见皮肤css文件的定义,多个用空格隔开}
- yesText: {确定按钮文本. 默认:'确定'}
- noText: {取消按钮文本. 默认:'取消'}
- yesClose: {点击确定按钮是否同时关闭对话框. 默认:true}
- id: {给对话框定义id,对话框未关闭就不再会有同名对话框弹出. 例如定义id为'my2'，则内容容器id为'my2Content'}
形式
artDialog({ 配置参数 }, function(){ 确定按钮回调函数 }, function(){ 取消按钮回调函数 }, function(){ 对话框关闭回调函数 }) 如:artDialog(
{
content:'欢迎你来到对话框世界！',
lock:true,
style:'succeed noClose'
},
function(){
alert('你点了确定');
},
function(){
alert('你点了取消');
}
);
弹出页面事例，如：
$.dialog.open('export/packingInfo/list?id=' + id, {
esc : false,
lock : true,
title : 'Carton List - Edit',
width : '900px',
height : '500px',
close : function() {
window.location.reload();
}
});
在页面head设置默认配置，如：
// 设置对话框全局默认配置
(function(){
var d = art.dialog.defaults;
// 按需加载要用到的皮肤，数组第一个为默认皮肤
// 如果只使用默认皮肤，可以不填写skin
d.skin = ['default', 'chrome', 'facebook', 'aero'];
// 支持拖动
d.drag = true;
// 超过此面积大小的对话框使用替身拖动
d.showTemp = 100000;
})();
在js函数里面使用，如
function test(){
art.dialog({
lock: true,
content: '中断用户在对话框以外的交互，展示重要操作与消息',
yesFn: function(){
art.dialog({content: '再来一个锁屏', lock: true});
return false;
},
noFn: true
}
API 文档
| 名称 | 类型 | 默认值 | 描述 |
| 内容 | |||
| title | 字符串 | '提示' | 标题内容。为false不显示标题栏（需要皮肤文件支持） |
| 布尔 | |||
| content | 字符串 | null | 消息内容，如果传入的是一个JSON，还需要与tmpl参数配合解析模板 |
| 对象 | |||
| 按钮 | |||
| yesFn | 函数 | null | 确定按钮回调函数。 函数如果返回false将阻止对话框关闭；函数this指针指向内部api；如果传入true表示只显示有关闭功能的按钮；传入的第一个参数为对话框所在页面window对象（这个在穿越框架后有用） |
| 布尔 | |||
| noFn | 函数 | null | 取消按钮回调函数。 函数如果返回false将阻止对话框关闭；函数this指针指向内部api；如果传入true表示只显示有关闭功能的按钮；传入的第一个参数为对话框所在页面window对象（这个在穿越框架后有用） |
| 布尔 | |||
| yesText | 字符串 | '确定' | "确定按钮"文字 |
| noText | 字符串 | '取消' | "取消按钮"文字 |
| 尺寸 | |||
| width | 数值 | 'auto' | 设置内容固定宽度，可以指定单位。没有则对话框自动适配 |
| 字符串 | |||
| height | 数值 | 'auto' | 设置内容固定高度，可以指定单位。没有则对话框自动适配 |
| 字符串 | |||
| 位置 | |||
| fixed | 布尔 | false | 开启静止定位 |
| follow | 元素 | null | 让对话框依附在指定元素附近。如果是字符串则表示使用ID获取元素 |
| 字符串 | |||
| left | 数值 | 'center' | X轴的坐标。如果开启了fixed则原点以浏览器视口为基准。可以使用'left'、'center'、'right'这些关键字 |
| 字符串 | |||
| top | 数值 | 'center' | Y轴的坐标。如果开启了fixed则原点以浏览器视口为基准。可以使用'top'、'center'、'bottom'这些关键字 |
| 字符串 | |||
| 界面 | |||
| lock | 布尔 | false | 开启锁屏。中断用户对话框之外的交互，用于显示非常重要的操作/消息 |
| skin | 字符串 | 'default' | 自定义风格 |
| border | 布尔 | true | 是否显示边框。（需要皮肤文件支持） |
| icon | 字符串 | null | 定义消息图标。（需要皮肤文件支持） |
| 高级 | |||
| id | 字符串 | 自定义对话框ID属性。用途：1、防止重复弹出 2、返回已存在ID对话框的API接口 | |
| time | 数值 | null | 设置对话框显示时间。以秒为单位 |
| drag | 布尔 | true | 是否允许用户拖动对话框 |
| limit | 布尔 | true | 是否限制挪动与定位范围 |
| focus | 布尔 | true | 定位焦点到对话框中指定元素，默认定位到按钮上。如果传入字符串则使用ID获取元素 |
| 字符串 | |||
| 元素 | |||
| effect | 布尔 | true | 是否开启动画特效 |
| show | 布尔 | true | 是否显示。为false表示不显示对话框，后面可以通过控制接口show()恢复显示 |
| tmpl | 字符串 | null | 启用模板引擎拼接消息内容，还需要与content参数传入JSON才能生效 |
| esc | 布尔 | true | 是否允许Esc键关闭对话框 |
| window | 字符串 | 'self' | 指定窗口弹出对话框，可使用'top'、'parent'、'self'等关键字或者指定其他window对象。如果是'top'则表示让对话框在顶级页面弹出 |
| 对象 | |||
| initFn | 函数 | null | 对话框弹出后执行的函数 |
| closeFn | 函数 | null | 对话框关闭前执行的函数 |
控制接口
| 名称 | 返回值 | 描述 |
| close() | null | 关闭对话框 |
| show() | {Object} | 显示对话框 |
| hide() | {Object} | 隐藏对话框 |
| content() | {HTMLElement} | 获取消息内容容器对象 |
| content(value) | {Object} | 向消息容器中写入内容(innerHTML) |
| follow(element) | {Object} | 让对话框吸附到指定元素附近。（可传入对象的ID名称） |
| position(left, top) | {Object} | 重新定位对话框。无参数则居中定位 |
| size(width, height) | {Object} | 重新设定对话框大小。注意此时参数类型必须为数值 |
| focus(element) | {Object} | 定位焦点 |
自带的扩展方法
| 名称 | 描述 |
| art.dialog.alert(content) | 警告 |
| art.dialog.confirm(content, yesFn, noFn) | 确认 |
| art.dialog.prompt(content, yesFn, value) | 提问 |
| art.dialog.open(url, options) | 弹窗（iframe） |
| art.dialog.close() | open方法创建的iframe里可用此关闭对话框 |
| art.dialog.parent | open方法创建的iframe里可用此获取来源窗口的window对象 |
| art.dialog.tips(content, time) | 短暂提示 |
| art.dialog.load(url, options, cache) | Ajax加载内容 |
artDialog学习之旅(二)之扩展方法详解
| 名称 | 描述 | ||
|---|---|---|---|
| 核心方法 | |||
| art.dialog.top | 获取artDialog可用最高层window对象。这与直接使用window.top不同，它能排除artDialog对象不存在已经或者顶层页面为框架集的情况 这是iframe应用工具集中的核心方法，你可以用它来操作父页面对象（包括上面的对话框） | ||
| art.dialog.data(name, value) | 跨框架数据共享写入接口。 框架与框架之间以及与主页面之间进行数据交换是非常头疼的事情，常规情况下你必须知道框架的名称才能进行数据交换，如果是在复杂的多层框架下操作简直就是噩梦。 而data方法就是为了解决这个问题，你完全不用管框架层级问题，它可以写入任何类型的数据，而做到各个页面之间数据共享。 | ||
| art.dialog.data(name) | 跨框架数据共享读取接口。指定name即返回数据，任何引用了artDialog的页面都有效 | ||
| art.dialog.removeData(name) | 跨框架数据共享删除接口。删除指定名称的数据，任何引用了artDialog的页面都有效 | ||
| 异步数据对话框 | |||
| art.dialog.open(url, options, cache) | 创建一个iframe页面 参数: 地址, 配置参数, 缓存开关(默认true) | ||
| art.dialog.open.api | iframe页面获取open方法扩展方法。 (注意这个iframe中也必须引用artDialog脚本文件) | ||
| art.dialog.opener | iframe页面获取open方法触发来源页面window对象。 (注意这个iframe中也必须引用artDialog脚本文件) | ||
| art.dialog.close() | iframe页面关闭open方法创建的对话框的快捷方式。 close方法等同于： var api = art.dialog.open.api; api && api.close(); (注意这个iframe中也必须引用artDialog脚本文件) | ||
| art.dialog.load(url, options, cache) | Ajax加载内容 参数：地址, 配置参数, 缓存开关(默认true) | ||
| 基础交互对话框 | |||
| art.dialog.alert(content, callback) | 警告消息 (同时只允许一个alert) 参数: 内容, 对话框关闭后的回调函数 | ||
| art.dialog.confirm(content, ok, cancel) | 确认 (同时只允许一个confirm) 参数: 内容, 确定按钮回调函数, 取消按钮回调函数 | ||
| art.dialog.prompt(content, ok, value) | 提问 (同时只允许一个prompt) 参数: 内容, 确定按钮回调函数, 文本框默认值 | ||
| art.dialog.tips(content, time) | 短暂提示(同时只允许一个tips) 参数: 内容、显示时间(单位秒, 默认1.5) | ||
| 自定义 | |||
| art.dialog.through(options) | 创建一个普通可穿越框架的对话框 不鼓励直接使用window.top这样的方式穿越，这样可能因为对话框触发页面重置导致其创建的对象在内存中被清空而发生异常 | ||
- 顶层面需要引用了artDialog才能实现穿越框架
- chrome浏览器本地运行会有安全限制，请在服务器上查看本页面
- artDialog不支持怪异模式，请用主流网站采用的XHTML1.0或者HTML5的DOCTYPE申明，如：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
或者
<!DOCTYPE HTML>
获取artDialog可用顶层页面window对象[top]
art.dialog.top默认引用的是widnow.top（如果window.top是框架集、跨域、artDialog对象不存，否则可能为window.parent或者当前window）这里页面所有穿越的对话框最终是在这个window上。
var win = art.dialog.top;
win.document.title = '我修改了页面标题';
win.document.getElementById('testInput').value = 'hello world!';可穿越框架的标准对话框[through]
如果iframe刷新或者被关闭，它创建的对话框会自动回收，防止因内存清空而导致错误。不鼓励直接使用window.top.art.dialog()与art.dialog.top.art.dialog()这样的方式穿越框架，它们会带来潜在的错误。
var throughBox = art.dialog.through;
throughBox({
content: '我是一个普通的对话框，只是能穿越框架而已',
lock: true
});嵌入网页[open]
同域下能够自适应iframe大小，但chrome 浏览器本地运行会认为跨域而无法适应大小
open方法有如下这几个私有个功能
| 名称 | 类型 | 描述 | ||
|---|---|---|---|---|
| iframe内部静态方法 | ||||
| art.dialog.open.api | Object | 从iframe页面引用对话框扩展方法 | ||
| art.dialog.opener | object Window | 从iframe页面引用对话框触发页面的window | ||
| 扩展方法 | ||||
| iframe | HTMLElement | 引用open创建的iframe（4.0.1新增） | ||
其他扩展方法：API.html#API
一、使用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()方法中，init会等待iframe加载完毕后执行
init: function () {
var iframe = this.iframe.contentWindow;
var top = art.dialog.top;// 引用顶层页面window对象
var username = iframe.document.getElementById('login-form-username');
username.value = 'guest';
setTimeout(function () {
username.select();
}, 80);
top.document.title = '测试';
},
ok: 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;
},
cancel: 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://www.connect.renren.com/igadget/renren/index.html',
{title: '人人网', width: 320, height: 400});框架与框架、主页面数据共享[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片段',
ok: function(topWin){
art.dialog('hello world');
},
close: function(){
art.dialog.tips('close')
}
}, false);art.dialog.load('./ajaxContent/login.html', false);警告消息[alert]
art.dialog.alert('警察叔叔会请你喝茶！', function () {alert(0)});确认消息[confirm]
art.dialog.confirm('你确认删除操作？', function(){
var top = art.dialog.top,
input = document.getElementById('demoInput02'),
photo = top.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.top.document.getElementById('testInput');
if (input) input.value = data;
if (topVal) topVal.value = data;
}, '我是糖饼');提示消息[tips]
art.dialog.tips('提交成功！', 1.5);
扫一扫
1080
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
