1 关键的对象关系
art = jQuery = $
function artDialog() {...}
artDialog.fn = artDialog.prototype =artDialog.fn._init.prototype
jQuery.fn = jQuery.prototype = jQuery.fn.init.prototype
jQuery.extend = jQuery.fn.extend
$.fn.dialog = $.fn.artDialog
window.artDialog = $.dialog = $.artDialog = artDialog
2 默认配置
artDialog.defaults = {
//消息内容
content: '<divclass="aui_loading"><span>loading..</span></div>',
title:'\u6d88\u606f', // 标题.默认'消息'
button:null, //自定义按钮
ok:null, //确定按钮回调函数
cancel:null, //取消按钮回调函数
init:null, //对话框初始化后执行的函数
close:null, //对话框关闭前执行的函数
okVal:'\u786E\u5B9A', // 确定按钮文本.默认'确定'
cancelVal: '\u53D6\u6D88', //取消按钮文本. 默认'取消'
width:'auto', //内容宽度
height:'auto', //内容高度
minWidth:96, //最小宽度限制
minHeight:32, //最小高度限制
padding: '20px25px', // 内容与边界填充距离
skin:'', //皮肤名(预留接口,尚未实现)
icon:null, //消息图标名称
time:null, //自动关闭时间
esc:true, //是否支持Esc键关闭
focus:true, //是否支持对话框按钮自动聚焦
show:true, //初始化后是否显示对话框
follow:null, //跟随某元素(即让对话框在元素附近弹出)
path:_path, //artDialog路径
lock:false, //是否锁屏
background:'#000', //遮罩颜色
opacity:.7, //遮罩透明度
duration:300, //遮罩透明度渐变动画速度
fixed:false, //是否静止定位
left:'50%', //X轴座标
top:'38.2%', //Y轴座标
zIndex:1987, //对话框叠加高度值(重要：此值不能超过浏览器最大限制)
resize:true, //是否允许用户调节尺寸
drag:true //是否允许用户拖动位置
};
3 获取某对话框
artDialog.get = function (id) {
return id === undefined
? artDialog.list
: artDialog.list[id];
};
iframeTools.source.js学习
var _top = artDialog.top // 引用顶层window对象；
artDialog.parent = _top; // 兼容v4.1之前版本，未来版本将删除此；
_topDialog = _top.artDialog; // 顶层window对象的artDialog对象；
artDialog.data // 跨框架数据共享接口，保存在顶层框架下面；
artDialog.through = _proxyDialog // 跨框架普通对话框
artDialog.open // 弹出窗口
artDialog.open.api // 引用open方法扩展方法
artDialog.opener // 引用open方法触发来源页面window
artDialog.open.origin = artDialog.opener; //兼容v4.1之前版本，未来版本将删除此
artDialog.close // 关闭对话框
artDialog.alert // 警告对话框
artDialog.confirm // 确认对话框
artDialog.prompt // 输入提示对话框
artDialog.tips // 短暂提示对话框
// 获取源窗口
var winOpener = (art.dialog.opener == window)&& window.opener ||art.dialog.opener;
// 关闭窗口
var api = art.dialog.open.api;
api && api.close() ||window.close();
JavaScript闭包写法的优势：隐藏实现细节，不污染window对象；
例如：
// 变量a的获取细节被隐藏，这样不会污染window对象；
var a = function() {
// do something
return 1;
}();
// 逻辑表达式特殊应用
a && alert("a=" +a);
// 创建自己的API并隐藏了实现细节，这样不会污染window对象；
;(function(p1, p2) {
// do something
// 将自己的对象赋值到window
window.xxx = xxx;
alert(p1 + "-" + p2);
})(1, 2);
常见的对话框实现
结合iframetools.source.js提供的默认实现；
建议使用时候同时导入jquery.artDialog.source.js和iframetools.source.js，由于默认实现的alert是一个警告消息框，这里可以自己去覆盖掉；
artDialog.shake = function () {
var style =this.DOM.wrap[0].style,
p = [4, 8, 4, 0, -4, -8, -4, 0],
fx = function () {
style.marginLeft = p.shift() + 'px';
if (p.length <= 0) {
style.marginLeft = 0;
clearInterval(timerId);
};
};
p =p.concat(p.concat(p));
timerId =setInterval(fx, 13);
returnthis;
};
artDialog.notice = function (options) {
var opt =options || {},
api, aConfig, hide, wrap, top,
duration = 800;
var config ={
id: 'Notice',
left: '100%',
top: '100%',
fixed: true,
drag: false,
resize: false,
follow: null,
lock: false,
init: function(here){
api = this;
aConfig = api.config;
wrap = api.DOM.wrap;
top = parseInt(wrap[0].style.top);
hide = top + wrap[0].offsetHeight;
wrap.css('top', hide + 'px')
.animate({top: top + 'px'}, duration, function () {
opt.init && opt.init.call(api,here);
});
},
close: function(here){
wrap.animate({top: hide + 'px'}, duration, function () {