开发前端组件怎么写,js封装组件及调用

时间:2022-05-22 阅读:32 评论:0 作者:老李

开源地址

https://gitee.com/tech-famer/farmer-messager

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

前言

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

效果预览开发前端组件怎么写

开发步骤一、制作纯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:"微软雅黑";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组件就开发完成了。

本文链接: https://www.liaier.com/1193.html 转载请注明出处!

相关文章 是不是在找它?!
评论区 交流一下吧!

共有0条评论来说两句吧...

欢迎 发表评论: