手把手教你开发一款属于自己的前端jQuery消息组件

320 阅读2分钟

开源地址

gitee.com/tech-famer/…

本套开源组件包括加载框、提示框、确认框、单行输入确认框、多行输入确认框、进度条等,使用说明见开源地址。

前言

在我们的工作过程当中,很多时候需要用到消息弹框,用来提示用户。浏览器自带的弹框过于简陋,不够美观,前端框架提供的组件样式固定,很难做到定制化。而现实的需求是,每个系统有自己的样式风格,找到一款完美匹配系统的消息弹框组件简直成了一种奢望。基于此,今天就手把手教大家如何开发一套属于自己的前端jQuery消息组件。

效果预览

Title - Google Chrome 2021-10-21 10-17-31.gif

开发步骤

一、制作纯html静态消息框,代码如下:

<div id="d_alertcover" class="d_cover" style="width:100%;height:9999px;background-color:rgba(0,0,0,0.2);overflow:hidden;z-index:99999999999999999999;position:fixed;left:0;top:0;">
	<div id="d_alert" style="overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.5); padding-top: 30px; position: relative; width: 300px; top: 150px; left: 533px; z-index: 9999; border-radius: 5px; box-shadow: rgba(0, 0, 0, 0.1) 0px 25px 45px; opacity: 1;">
		<div id="d_title" style="background: linear-gradient(to bottom, rgba(7,83,133,1), rgba(7,83,133,0.5));line-height:30px;font-size:12px;width:100%;height:30px;color:#ffffff;position:absolute;top:0;left:0;cursor:move;border-radius:5px 5px 0 0;">
			<span id="d_uploading" style="padding-left:10px;">
				提示
			</span>
			<span style="float:right;padding-right:12px;color:red;opacity:0.7;line-height:30px;font-family:&quot;微软雅黑&quot;;cursor:pointer;font-size:14px;font-weight:700;">
				X
			</span>
		</div>
		<div style="width: 100%;height: 100%;position: absolute;top:0;z-index:-1;">
			<div style="filter:blur(40px);height: 40%;width: 100%;position:absolute;top: 0;left: 0;background: #1b73bd;">
			</div>
			<div style="filter:blur(80px);height: 40%;width: 40%;position:absolute;bottom: 20px;left: 0;background: #f6d881;">
			</div>
		</div>
		<div style="min-height:70px;padding:20px;background-color:rgba(255,255,255,0.9);line-height:15px;position:relative;border-radius:0 0 5px 5px;">
			<div style="position:absolute;top:20%;left:30px;width:30px;height:30px;line-height:30px;text-align: center;font-size:30px;font-weight:700;color:#FB8200;">
				!
			</div>
			<div style="margin-left:20%;margin-top:4%;font-size:12px;color:#333;">
				测试
			</div>
			<div style="font-size:12px;color:#333;margin-top:20px;">
				<span id="d_ok" style="background:#4891C6;display:inline-block;width:30%;height:25px;color:#ffffff;text-align:center;line-height:25px;border-radius:2px;margin-left:85px;cursor:pointer;">
					确定
				</span>
			</div>
		</div>
		<div>
		</div>
	</div>
</div>

二、将完整的静态html拆分成头部、操作部、尾部几个部分代码片段,同时将html中写死的内容用占位符替换(如标题tip、消息内容msg等),如下:

var head = "<div id='d_id' style='overflow:hidden;display:none;border:1px solid rgba(255,255,255,0.5);padding-top:30px;;position:relative;width:300px;top:150px;left:150%;z-index:9999;border-radius:5px;box-shadow:0 25px 45px rgba(0,0,0,0.1);'>"+
		"	<div id='d_title'   style='background: linear-gradient(to bottom, rgba(7,83,133,1), rgba(7,83,133,0.5));line-height:30px;font-size:12px;width:100%;height:30px;color:#ffffff;position:absolute;top:0;left:0;cursor:move;border-radius:5px 5px 0 0;'>"+
		"		<span id='d_uploading' style='padding-left:10px;'>tip</span>"+
		"		<span style='float:right;padding-right:12px;color:red;opacity:0.7;line-height:30px;font-family:\"微软雅黑\";cursor:pointer;font-size:14px;font-weight:700;'>X"+
		"		</span>"+
		"	</div>"+
		"<div style=\"width: 100%;height: 100%;position: absolute;top:0;z-index:-1;\">\n" +
		"    <div style=\"filter:blur(40px);height: 40%;width: 100%;position:absolute;top: 0;left: 0;background: #1b73bd;\"></div>\n" +
		"    <div style=\"filter:blur(80px);height: 40%;width: 40%;position:absolute;bottom: 20px;left: 0;background: #f6d881;\"></div>\n" +
		"</div>"+
		"	<div style='min-height:70px;padding:20px;background-color:rgba(255,255,255,0.9);line-height:15px;position:relative;border-radius:0 0 5px 5px;'>";

	var aler = "		<div style='position:absolute;top:20%;left:30px;width:30px;height:30px;line-height:30px;text-align: center;font-size:30px;font-weight:700;color:#FB8200;'>!</div>"+
		"		<div style='margin-left:20%;margin-top:4%;font-size:12px;color:#333;'>msg</div>";
                
                
        var singilesuer = "<div style='font-size:12px;color:#333;margin-top:20px;'>"+
   "           <span id='d_ok' style='background:#4891C6;display:inline-block;width:30%;height:25px;color:#ffffff;text-align:center;line-height:25px;border-radius:2px;margin-left:85px;cursor:pointer;'>确定</span>"+
   "        </div>";


	var foot = "	</div>"+
		"<div>";

三、拓展jQuery的$函数增加messager对象alert函数,在alert函数内,将拆分的html片段占位符内容替换成真实值并将片段拼接成完整,拼接完整的html通过js代码动态添加到body元素内,同时为“关闭按钮”和“确认按钮”添加hover事件和click事件。在需要使用提示框的地方调用alert函数即可。完整代码如下:

;(function($){

   var head = "<div id='d_id' style='overflow:hidden;display:none;border:1px solid rgba(255,255,255,0.5);padding-top:30px;;position:relative;width:300px;top:150px;left:150%;z-index:9999;border-radius:5px;box-shadow:0 25px 45px rgba(0,0,0,0.1);'>"+
      "  <div id='d_title'   style='background: linear-gradient(to bottom, rgba(7,83,133,1), rgba(7,83,133,0.5));line-height:30px;font-size:12px;width:100%;height:30px;color:#ffffff;position:absolute;top:0;left:0;cursor:move;border-radius:5px 5px 0 0;'>"+
      "     <span id='d_uploading' style='padding-left:10px;'>tip</span>"+
      "     <span style='float:right;padding-right:12px;color:red;opacity:0.7;line-height:30px;font-family:"微软雅黑";cursor:pointer;font-size:14px;font-weight:700;'>X"+
      "     </span>"+
      "  </div>"+
      "<div style="width: 100%;height: 100%;position: absolute;top:0;z-index:-1;">\n" +
      "    <div style="filter:blur(40px);height: 40%;width: 100%;position:absolute;top: 0;left: 0;background: #1b73bd;"></div>\n" +
      "    <div style="filter:blur(80px);height: 40%;width: 40%;position:absolute;bottom: 20px;left: 0;background: #f6d881;"></div>\n" +
      "</div>"+
      "  <div style='min-height:70px;padding:20px;background-color:rgba(255,255,255,0.9);line-height:15px;position:relative;border-radius:0 0 5px 5px;'>";

   var aler = "      <div style='position:absolute;top:20%;left:30px;width:30px;height:30px;line-height:30px;text-align: center;font-size:30px;font-weight:700;color:#FB8200;'>!</div>"+
      "     <div style='margin-left:20%;margin-top:4%;font-size:12px;color:#333;'>msg</div>";

   var singilesuer = "<div style='font-size:12px;color:#333;margin-top:20px;'>"+
      "           <span id='d_ok' style='background:#4891C6;display:inline-block;width:30%;height:25px;color:#ffffff;text-align:center;line-height:25px;border-radius:2px;margin-left:85px;cursor:pointer;'>确定</span>"+
      "        </div>";

   var foot = "   </div>"+
      "<div>";

   var html = head+aler+foot;
   //遮罩层
   var cover = "<div id='d_cover' class='d_cover' style='width:100%;height:9999px;background-color:rgba(0,0,0,0.2);overflow:hidden;z-index:999999;position:fixed;left:0;top:0;'></div>";
   var animate = true;
   var height = $(window).height();
   var width =  $(window).width();
   var top = "150px";
   var left = (width/2 - 150) + "px";
   function moveIn($id){
     $id.css({left:left,top:top}).show();
   }
   
   function moveOut($id){
      $id.parent().remove();
   }

   //为组件添加事件
   function addEvent(id,time,callback,postCallback){
      if(document.getElementById(id) != null) return;
      $("body").append($(cover.replace("d_cover",id+"cover"))).css({"overflow":"hidden"});
      $("#"+id+"cover").append($(html));
      var $id = $("#"+id+"cover").find("#"+id);
      var $title = $id.find("#d_title");
      var $close = $title.find("span");
      var $ok = $id.find("#d_ok");
      var $cancel = $id.find("#d_cancel");
      moveIn($id);
      addHoverEvent($image,$ok,$cancel);
      if($ok){
        $ok.on("click",function(){
           moveOut($id);
        });
      }
      $close.bind("click", function(){
         moveOut($id);
      });
   }

   function addHoverEvent($close,$ok,$cancel){
      $($close[1]).hover(function(){
         $(this).animate({
            color:"red",
            opacity: '1'
         }, 10);
      },function(){
         $(this).animate({
            opacity: '0.7'
         }, 10);
      });
      $ok.hover(function(){
         $(this).css({"background":"#44A0C6"});
      },function(){
         $(this).css({"background":"#4891C6"});
      });
      $cancel.hover(function(){
         $(this).css({"background":"#44A0C6"});
      },function(){
         $(this).css({"background":"#4891C6"});
      });

   }

   $.messager  = {
      alert:function(tip,msg){
         html = head+aler+singilesuer+foot;
         html = html.replace("d_id","d_alert");
         if(tip != null){
            html = html.replace("tip",tip);
         }
         if(msg != null){
            html = html.replace("msg",msg);
         }
         addEvent("d_alert");
      }
   };
})(jQuery);

1)使用演示

$.messager.alert("提示","测试");

2)说明

拓展jQuery的$函数的功能,代码形如:

;(function($){

    $.test  = {
      test:function(){
         
      }
   };
})(jQuery);

这样的话我们就可已使用如下代码,调用$拓展的函数了:

$.test.test();

四、增加动画效果

为了增加组件的灵动性,可以为组件添加出入场动画。

1)制作出入场动画函数,拟从上下左右四个方向出入场飞入飞出

        var animate = true;
        /**
	 动画集合
	 */
	function rightIn($id){
		if(animate){
			$id.css({left:"150%",top:top}).show();
			$id.animate({left:left,top:top},500);
		}else{
			$id.css({left:left,top:top}).show();
		}
	}
	function rightOut($id){
		if(animate){
			$id.animate({left:"150%",top:top},500);
			$('body').css({"overflow":"auto"});
			setTimeout(function(){
				$id.parent().remove();
			},500);
		}else{
			$id.parent().remove();
		}
	}
	function leftIn($id){
		if(animate){
			$id.css({left:"-150%",top:top}).show();
			$id.animate({left:left,top:top},500);
		}else{
			$id.css({left:left,top:top}).show();
		}
	}
	function leftOut($id){
		if(animate){
			$id.animate({left:"-150%",top:top},500);
			$('body').css({"overflow":"auto"});
			setTimeout(function(){
				$id.parent().remove();
			},500);
		}else{
			$id.parent().remove();
		}
	}
	function topIn($id){
		if(animate){
			$id.css({left:left,top:"-150%"}).show();
			$id.animate({left:left,top:top},500);
		}else{
			$id.css({left:left,top:top}).show();
		}
	}
	function topOut($id){
		if(animate){
			$id.animate({left:left,top:"-150%"},500);
			$('body').css({"overflow":"auto"});
			setTimeout(function(){
				$id.parent().remove();
			},500);
		}else{
			$id.parent().remove();
		}
	}
	function bottomIn($id){
		if(animate){
			$id.css({left:left,top:"150%"}).show();
			$id.animate({left:left,top:top},500);
		}else{
			$id.css({left:left,top:top}).show();
		}
	}
	function bottomOut($id){
		if(animate){
			$id.animate({left:left,top:"150%"},500);
			$('body').css({"overflow":"auto"});
			setTimeout(function(){
				$id.parent().remove();
			},500);
		}else{
			$id.parent().remove();
		}
	}

2)随机选定上下左右方向出入场,修改出入场函数为动画函数。代码如下:

入场旧代码

moveIn($id);

入场新代码
var arr = ["left","top","right","bottom"];
var ani = arr[Math.round(Math.random()*3)];
eval(ani+"In($id)");
出场旧代码
if($ok){
    $ok.on("click",function(){
       moveOut($id);
    });
}
$close.bind("click", function(){
 moveOut($id);
});
入场新代码
if($ok){
    $ok.on("click",function(){
       eval(ani+"Out($id)");
    });
}
$close.bind("click", function(){
 eval(ani+"Out($id)");
});

五、其他组件如加载框、确认框等开发步骤类似

总结

开发一款jQuery组件其实并不复杂,先通过静态html画出具体效果,然后将静态html动态化,将动态化的html封装成jQuery拓展函数,一套定制化的jQuery组件就开发完成了。