在 artDialog 窗口中追加最大化、最小化按钮

发布时间:2016/4/15 0:38:57 浏览量:1129

这些天做一个项目,使用了 artDialog 作为弹出窗口,将部分页面嵌入到窗口中,感觉操作起来还比较方便,但 artDialog 没有提供窗口最大化和最小化,这就比较烦人了,没办法,自己扩展吧

首先,我研究了一下,artDialog 的窗口关闭按钮,源码如下:

/*
* artDialog 4.1.6
* file:artDialog.source.js
*/
artDialog.fn = artDialog.prototype = {
/*
* 其他代码
*/
    close: function () {
        if (this.closed) return this;
       
        var that = this,
            DOM = that.DOM,
            wrap = DOM.wrap,
            list = artDialog.list,
            fn = that.config.close,
            follow = that.config.follow;
       
        that.time();
        if (typeof fn === 'function' && fn.call(that, window) === false) {
            return that;
        };
       
        that.unlock();
       
        // 置空内容
        that._elemBack && that._elemBack();
        wrap[0].className = wrap[0].style.cssText = '';
        DOM.title.html('');
        DOM.content.html('');
        DOM.buttons.html('');
       
        if (artDialog.focus === that) artDialog.focus = null;
        if (follow) follow.removeAttribute(_expando + 'follow');
        delete list[that.config.id];
        that._removeEvent();
        that.hide(true)._setAbsolute();
       
        // 清空除this.DOM之外临时对象,恢复到初始状态,以便使用单例模式
        for (var i in that) {
            if (that.hasOwnProperty(i) && i !== 'DOM') delete that[i];
        };
       
        // 移除HTMLElement或重用
        _box ? wrap.remove() : _box = that;
       
        return that;
    }
/*
* 其他代码
*/
}

然后仔细找了一下,发现关闭按钮是通过 html 模板定义的,定义同样在 artDialog.source.js 文件中,代码如下:

artDialog._templates =
'<div class="aui_outer">'
+    '<table class="aui_border">'
+        '<tbody>'
+            '<tr>'
+                '<td class="aui_nw"></td>'
+                '<td class="aui_n"></td>'
+                '<td class="aui_ne"></td>'
+            '</tr>'
+            '<tr>'
+                '<td class="aui_w"></td>'
+                '<td class="aui_c">'
+                    '<div class="aui_inner">'
+                    '<table class="aui_dialog">'
+                        '<tbody>'
+                            '<tr>'
+                                '<td colspan="2" class="aui_header">'
+                                    '<div class="aui_titleBar">'
+                                        '<div class="aui_title"></div>'
+                                            '<a class="aui_close" onclick="javascript:/*artDialog*/;">'//href paul mod
+                                            '\xd7'
+                                        '</a>'
+                                    '</div>'
+                                '</td>'
+                            '</tr>'
+                            '<tr>'
+                                '<td class="aui_icon">'
+                                    '<div class="aui_iconBg"></div>'
+                                '</td>'
+                                '<td class="aui_main">'
+                                    '<div class="aui_content"></div>'
+                                '</td>'
+                            '</tr>'
+                            '<tr>'
+                                '<td colspan="2" class="aui_footer">'
+                                    '<div class="aui_buttons"></div>'
+                                '</td>'
+                            '</tr>'
+                        '</tbody>'
+                    '</table>'
+                    '</div>'
+                '</td>'
+                '<td class="aui_e"></td>'
+            '</tr>'
+            '<tr>'
+                '<td class="aui_sw"></td>'
+                '<td class="aui_s"></td>'
+                '<td class="aui_se"></td>'
+            '</tr>'
+        '</tbody>'
+    '</table>'
+'</div>';

这里,我们发现 aui_close 样式被定义为关闭按钮

于是,修改这里的代码,追加两个 div 变成下边的代码:

artDialog._templates =
'<div class="aui_outer">'
+    '<table class="aui_border">'
+        '<tbody>'
+            '<tr>'
+                '<td class="aui_nw"></td>'
+                '<td class="aui_n"></td>'
+                '<td class="aui_ne"></td>'
+            '</tr>'
+            '<tr>'
+                '<td class="aui_w"></td>'
+                '<td class="aui_c">'
+                    '<div class="aui_inner">'
+                    '<table class="aui_dialog">'
+                        '<tbody>'
+                            '<tr>'
+                                '<td colspan="2" class="aui_header">'
+                                    '<div class="aui_titleBar">'
+                                        '<div class="aui_title"></div>'
+                                            '<div class="aui_min" state="false"></div>'
+                                            '<div class="aui_max" state="false"></div>'
+                                            '<a class="aui_close" onclick="javascript:/*artDialog*/;">'//href paul mod
+                                            '\xd7'
+                                        '</a>'
+                                    '</div>'
+                                '</td>'
+                            '</tr>'
+                            '<tr>'
+                                '<td class="aui_icon">'
+                                    '<div class="aui_iconBg"></div>'
+                                '</td>'
+                                '<td class="aui_main">'
+                                    '<div class="aui_content"></div>'
+                                '</td>'
+                            '</tr>'
+                            '<tr>'
+                                '<td colspan="2" class="aui_footer">'
+                                    '<div class="aui_buttons"></div>'
+                                '</td>'
+                            '</tr>'
+                        '</tbody>'
+                    '</table>'
+                    '</div>'
+                '</td>'
+                '<td class="aui_e"></td>'
+            '</tr>'
+            '<tr>'
+                '<td class="aui_sw"></td>'
+                '<td class="aui_s"></td>'
+                '<td class="aui_se"></td>'
+            '</tr>'
+        '</tbody>'
+    '</table>'
+'</div>';

在这里,我追加了两个 div ,样式分别定义为 aui_max 和 aui_min,具体样式请自行到相应的样式文件中修改,比如定义按钮图片之类的,这里就不细说了

在定义完成后,弹出新的窗口时,这两个按钮已经出现了,现在,我们需要对我们定义的按钮进行事件追加了

首先,我们在 close 方法附近追加一下代码,来作为最大化的方法实现

   

max: function () {
        var that = this,
            DOM = that.DOM;
        var border = jQuery(DOM.content[0]); // 获取 artDialog 窗口的 iframe 对象
        var max = jQuery(DOM.max[0]);        // 获取最大化按钮对象
        if (max.attr('state') == 'false') {  // 判断是否已最大化
            max.attr('_width', border.width());   // 记录当前窗口定义的宽度
            max.attr('_height', border.height()); // 记录当前窗口定义的高度
            max.attr('state', 'true');            // 修改最大化按钮状态为真
            this.position(0, 0);                  // 将窗口移动到左上角
            this.size('100%', '100%');            // 修改窗口大小
        } else {
            jQuery(DOM.border[0]).parent().parent().css('width', (max.attr('_width') * 1 + 30) + 'px');  // 修改窗口最外层 div 定义的宽度,这个 div 是窗口外层的样式窗口,比我们定义的窗口宽上 30 像素,根据使用的皮肤不同有所区别
            this.size(max.attr('_width') + 'px', max.attr('_height') + 'px');  // 将窗口大小按照已记录的宽和高进行设置
            this.position('50%', '50%');       // 将窗口居中
            max.attr('state', 'false');        // 设置最大化状态为假
            max.removeAttr('_width');          // 删除已记录的宽
            max.removeAttr('_height');         // 删除已记录的高
        }
        return that;
    }

注意实际添加代码的时候,要在最后加个逗号哦,毕竟是写在 artDialog.fn 的定义对象里的内容

这里我实现的思路是这样的,首先在最大化、最小化按钮中设置一个属性 state,表示窗口是否已经最大化或最小化

然后在点击按钮的时候判断一下,如果没有则最大化,否则则还原

在事件实现方法定义完成后,我发现点击按钮并没有发生什么,所以,我们还需要将事件和方法进行关联起来,于是再次查阅代码,发现以下定义:

// 同样在 artDialog.fn 定义中
    // 事件代理
    _addEvent: function () {
        var resizeTimer,
            that = this,
            config = that.config,
            isIE = 'CollectGarbage' in window,
            DOM = that.DOM;

        // 窗口调节事件
        that._winResize = function () {
            resizeTimer &amp;&amp; clearTimeout(resizeTimer);
            resizeTimer = setTimeout(function () {
                that._reset(isIE);
            }, 40);
        };
        _$window.bind('resize', that._winResize);

        // 监听点击
        DOM.wrap
        .bind('click', function (event) {
            var target = event.target, callbackID;

            if (target.disabled) return false; // IE BUG

            if (target === DOM.close[0]) {
                that._click(config.cancelVal);
                return false;
            } else {
                callbackID = target[_expando + 'callback'];
                callbackID &amp;&amp; that._click(callbackID);
            };

            that._ie6SelectFix();
        })
        .bind('mousedown', function () {
            that.zIndex();
        });
    },

于是追加代码变成以下内容

 

  // 事件代理
    _addEvent: function () {
        var resizeTimer,
            that = this,
            config = that.config,
            isIE = 'CollectGarbage' in window,
            DOM = that.DOM;

        // 窗口调节事件
        that._winResize = function () {
            resizeTimer &amp;&amp; clearTimeout(resizeTimer);
            resizeTimer = setTimeout(function () {
                that._reset(isIE);
            }, 40);
        };
        _$window.bind('resize', that._winResize);

        // 监听点击
        DOM.wrap
        .bind('click', function (event) {
            var target = event.target, callbackID;

            if (target.disabled) return false; // IE BUG

            if (target === DOM.close[0]) {
                that._click(config.cancelVal);
                return false;
            } else if (target === DOM.max[0]) {
                that.max();
            } else if (target === DOM.min[0]) {
                that.min();
            } else {
                callbackID = target[_expando + 'callback'];
                callbackID &amp;&amp; that._click(callbackID);
            };

            that._ie6SelectFix();
        })
        .bind('mousedown', function () {
            that.zIndex();
        });
    },

于是发现事件被关联成功了,最后,由于不是所有窗口都需要最大化和最小化,所以在 artDialog.fn 定义中,修改 _init 定义的方法,追加以下内容

        config.min ? DOM.min.show() : DOM.min.hide();
        config.max ? DOM.max.show() : DOM.max.hide();

修改 artDialog.defaults 定义的对象追加以下内容

    min: null,
    max: null,

这样,窗口在打开时默认是没有最大化和最小化的,在我们需要弹出的定义中设置一下 max 、min 属性就可以显示并实现最大化、最小化了

art.dialog.open(url,{
   max : true,
   min : true
},false);




网友回复
总数:0 当前页:1 / 0 首页 上页 下页 末页
回复

品码堂 (关于我们

桂ICP备13004001号