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

其他 2018-07-01 05:19:35 阅读次数: 0

这些天做一个项目，使用了 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 && 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 && 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 && 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 && 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);

欢迎大家对本文进行补充，最小化实现这里就不再贴了

猜你喜欢

转载自blog.csdn.net/superwfei/article/details/50481631
今日推荐
基于大语言模型的开源知识库问答系统 MaxKB GitHub Star 数量突破 5,000 个！
美国拟限制 AI 大模型出口中国和俄罗斯
苹果将与 OpenAI 达成协议，将 ChatGPT 应用于 iPhone
openKylin 社区生态委员会第六次会议圆满召开
阿里云正式发布通义千问 2.5
Python 3.13 发布首个 Beta：实验性自由线程模式和 JIT、改进交互式解释器
Stack Overflow 拿我的代码去训练 AI 大模型，还封了我的账号
Pop!_OS 的 COSMIC 桌面完成 App Store 上架工作
《2024 年一季度互联网投融资运行情况》研究报告
报告：Django 仍然是 74% 开发者的首选
15 年前上了“FFmpeg 耻辱柱”，今天他还得谢谢咱——腾讯QQPlayer一雪前耻？
TIOBE 5 月榜单：Fortran “复活”进入 Top 10
周排行
记一下去大梅沙的准备（2018-05-26）
Spring 注解 事务
基于HTTP协议的客户端缓存
阿里云rds 备份和还原
[PHP] 几个拖慢 PHP 程序/API 运行速度的点
python 代码风格------------PEP8规则
js控制json生成菜单——自制菜单（一）
将字符串: 'k:1|k1:2|k2:3|k3:4 ' ,处理成 python 字典: {'k':1, 'k1':2, ...}
微信小程序转支付宝小程序
Qt551.窗口滚动条
每日归档
更多
2024-05-13(18)
2024-05-12(0)
2024-05-11(38)
2024-05-10(38)
2024-05-09(35)
2024-05-08(42)
2024-05-07(14)
2024-05-06(40)
2024-05-05(0)
2024-05-04(7)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022