封装一个简单的模态组件

2016-01-10

前言

最近在翻新7月份一个项目的代码，确实感觉现在的水平提升了不止一个档次啊^_ ^，之前花了一个近1500行代码完成的交互效果，现在几百行就搞定，而且不依赖三方的UI组件。我现在的编码有自己的设计模式，像模态这些通用的功能我习惯整理在util模块里，其他模块里如果需要调用new一个对象即可。今天不介绍整个util模块的代码，就拎一个模态组件和大家分享一下，如果觉得不错就拿去用吧。真的很不建议为了实现一个简单的功能去网上下一个重量级的UI组件，而且还不好维护，倒不如自己手写一个。

演示一下效果

myAlert

这里写图片描述

细心的同学会发现这个alert是没有关闭按钮的，为什么呢？因为它是定时关闭的，而且结合淡入淡出的动画体验效果会很好哦。

myConfirm

这里写图片描述

这个就比较常见了，不过这种样式我还是很喜欢的，简洁美，有没有 ^ _ ^

上代码吧

css样式

css样式就70行，大可以直接注释一下打包到你的base.css里。

/*模态窗口*/
.myMask{
	position: fixed;
	width: 100%;
	height: 100%;
	z-index: 9999;
	background: rgba(0,0,0,0.4);
	background: rgb(0,0,0)\9;
	filter:alpha(opacity=0.4)\9;
	top: 0;
	display: none;
}
.hide{
	display: none;
}
.modal{
	position: absolute;
	top: 30%;
	left: 0;
	right: 0;
	margin:auto;
	z-index: 10000;
	width: 360px;
	height: 120px;
	background:#fff;
}
.modal.myConfirm{
	height: 150px;
}
.modal>h2{
	text-align: left;
	background: rgb(238,34,102);
	color: #fff;
	height: 40px;
	line-height: 40px;
	padding-left: 20px;
	font-size: 13px;
}
.modal>p{
	padding: 10px 20px;
	padding-top: 20px;
	padding-left:25px;
	font-size: 13px;
	color: #777;
}
.confirmBtns{
	position: absolute;
	bottom: 0;
	height: 40px;
	font-size: 0;
	width: 100%;
	border-top: 1px solid #eee;
}
.confirmBtns>a{
	display: inline-block;
	vertical-align: top;
	font-size: 12px;
	width: 50%;
	height: 100%;
	text-align: center;
	color: #888;
	line-height: 40px;
	box-sizing:border-box;
	-webkit-box-sizing:border-box;
}
.confirmBtns>a:hover{
	background-color:rgb(255,251,237);
	color: #666;
}
.confirmBtns>a.first{
	border-right: 1px solid #eee;
}

JavaScript代码

定义组件

/**
 * [通用工具模块]
 * @param  {[type]} $    [JQuery对象]
 * @param  {[type]} self [单例上下文]
 * @return {[type]}      [公开方法]
 */
Module_util:function($,self){
	var _wraper=$('#wrap'),//内容容器
	return{
		/**
		 * [myAlert description]
		 * @param  {[type]} $txt [description]
		 * @return {[type]}      [description]
		 */
		myAlert:function($txt){
			/*创建DOM结构*/
			_wraper.append('<div class="myMask" id="myMask"></div>');
			$('#myMask').html('<div id="myAlert" class="modal myAlert hide"><h2 id="alertTitle">温馨提示</h2><p>哎呀*_*，您<span id="alertTxt">'+$txt+'</span></p></div>');
			/*绑定功能*/
			$('#myMask').fadeIn();
			$('#myAlert').show();
			/*延迟800ms后关闭并销毁DOM*/
			window.setTimeout(function(){
				$('#myMask').fadeOut();
				$('#myAlert').remove();
				$('#myMask').remove();
			},800);
		},
		/**
		 * [myConfirm 确认框组件]
		 * @param  {[type]} $title  [确认框标题]
		 * @param  {[type]} $txt    [确认的内容]
		 * @param  {[type]} $sureCallback   [确定的回调函数]
		 * @param  {[type]} $cancelCallback [取消的回到函数]
		 * @return {[type]}         [void]
		 */
		myConfirm:function($title,$txt,$sureCallback,$cancelCallback){
			/*创建DOM结构*/
			_wraper.append('<div class="myMask" id="myMask"></div>');
			$('#myMask').html('<div id="myConfirm" class="modal myConfirm hide"><h2 id="confirmTitle">'+$title+'</h2><p>您确定要<span id="confirmTxt">'+$txt+'</span> ?</p><div class="confirmBtns"><a href="javascript:void(0)" id="confirmYes" class="first">确定</a><a href="javascript:void(0)" id="confirmNo">取消</a></div></div>');
			/*绑定功能*/
			$('#myMask').fadeIn();
			$('#myConfirm').show();
			/*确认回调*/
			$('#confirmYes').on('click',function(){
				if($sureCallback){
					$sureCallback();
					$('#myMask').fadeOut();
					$('#myConfirm').remove();
					$('#myMask').remove();
				}
			});
			/*取消回调*/
			$('#confirmNo').on('click',function(){
				if($cancelCallback){
					$cancelCallback();
					$('#myMask').fadeOut();
					$('#myConfirm').remove();
					$('#myMask').remove();
				}
			});
		}
	}
}

如何调用

/**
 * [操作模块]
 * @param  {[type]} $    [JQuery对象]
 * @param  {[type]} self [单例上下文]
 * @return {[type]}      [公开方法]
 */
Module_operate:function($,self){
	var util=new self.Module_util($,self);
	/**
	 * [deleteSome 批量删除]
	 * @return {[type]} [description]
	 */
	function deleteSome(){
		artWrap.on('click','#btn-selectd-delete',function(){
			var selectArray=$('.shop-product-item.checked');
			if(selectArray.length===0){
				util.myAlert('请先选择要删除的商品');
			}else{
				util.myConfirm('删除提示','删除这些商品吗',function(){
					selectArray.remove();
					shopCheckProduct();
					countTotal();
				},function(){
					return false;
				});
			}
		});
	}
	return{
		/*对外暴露的模块初始化接口*/
		init:{
			/*加载批量删除功能*/
			deleteSome();
			//........
		}
	}
}

好了，上面只是代码的片段，如果看不懂可以出门右转往前翻我的那篇《我的JavaScript设计模式》的文章，或者给我留言，我会尽快回复＾＿＾