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: '<div class="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: '20px 25px', // 內容與邊界填充距離
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);
return this;
};
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 () {
opt.close && opt.close.call(this, here);
aConfig.close = $.noop;
api.close();
});
return false;
}
};
for (var i in opt) {
if (config[i] === undefined) config[i] = opt[i];
};
return artDialog.through(config);
};
artDialog.alert = function (content, callback) {
return artDialog.through({
id: 'Alert',
fixed: true,
content: content,
ok: true,
close: callback
});
};
artDialog.warn = function (content, callback) {
return artDialog.through({
id: 'Warn',
title: '警告',
icon: 'warning',
fixed: true,
lock: true,
content: content,
ok: true,
close: callback
});
};