artDialog4.1.7 摘自网络

jquery.artDialog.source.js学习

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
 });
};

http://demo.jb51.net/js/2011/artDialog/_doc/labs.html