简易JS插件开发,本文效果是一个简单的弹出层,意在记录插件的封装Demo。

完整源码压缩包:demo.rar

效果图(如下):

Js插件开发插图

插件脚本:

/** * 节点配置属性方式配置参数:专业的做法是配置到,每一个需要初始化为插件的那个html标签的属性上面(这个属性的value必须是标准的json字符串), * 这样做的好处是,当存在多个需要初始化为插件的标签时,可以配置各自想要的参数 * 例如:<div data-setting=”{param1:1,param2:2}”></div> * Created by TonyZeng on 2016/7/6. *//**前面的这个分号,用于避免其他插件没有分号闭合导致在压缩代码后导致语法的错误。*/;(function($){/**这里相当于一个构造函数,当new Demo(demo)时,就会传递参数过来 * 不过,我们没有采用new的方式来初始化插件,我们定义了一个init方法来初始化,在init方法中,我们用的其实也就是这个 * 构造函数来初始化,init里面用each来循环初始化,将div节点对象(this)指针作为参数传入构造函数的参数列表 */varDemo=function(demo){varself=this;//保存节点对象,(获取自定义配置)getSetting方法会用它来获取节点里面的属性,比如自定义配置属性 this.demo = demo; //默认配置 this.setting = {“maskDivId”: “xxx”, “showDivId”: “xxx”, “closeButtonId”: “xxx”}; //用自定义配置merge默认配置 $.extend(this.setting, this.getSetting()); //事件绑定 $(“.demo”).bind(“click”, function (e) { self.showdiv(); //阻止事件冒泡出现(冒泡事件) e.stopPropagation(); }); $(“#” + this.setting.closeButtonId).bind(“click”, function (e) { self.hidediv(); //阻止事件冒泡出现(冒泡事件) e.stopPropagation(); } ); }; Demo.prototype = { //获取自定义配置 getSetting: function () { var setting = this.demo.attr(“data-setting”); //如果这个节点属性存在,并且不为空的话就转成json对象传出去 if (setting && setting != null) { return $.parseJSON(setting); } else { return {}; } }, showdiv: function () { document.getElementById(this.setting.showDivId).style.display = “block”; document.getElementById(this.setting.maskDivId).style.display = “block”; }, hidediv: function () { document.getElementById(this.setting.showDivId).style.display = none; document.getElementById(this.setting.maskDivId).style.display = none; } }; //(当页面有多个地方需要初始化成插件时)为了避免用new的方式来初始化插件的繁琐,我们用一个init方法来专门处理初始化 Demo.init = function (list) { //这个this指向Demo插件对象 var _this_ = this; //用each循环初始化传入的元素为插件 list.each(function () { //这个this指向each循环里面的元素对象 new _this_($(this)); }); }; //全局注册 window[“Demo”] = Demo;})(jQuery);$(function () { Demo.init($(“.demo”));});

HTML:

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”><htmlxmlns=“http://www.w3.org/1999/xhtml”><head><title>DIV CSS遮罩层</title><linktype=“text/css”rel=“stylesheet”href=“demo.css”rel=“external nofollow”/></head><body><inputid=“btnshow”class=“demo”type=“button”value=“Show”data-setting={“maskDivId”:”mask”,”showDivId”:”show”,”closeButtonId”:”btnclose”}/><divid=“mask”>遮罩层</div><divid=“show”><inputid=“btnclose”type=“button”value=“Close”/></div><scripttype=“text/javascript”src=“jquery.js”></script><scripttype=“text/javascript”src=“demo.js”></script></body></html>

Css:

#mask { display: none; position: absolute; top: 0%; left: 0%; width: 100%; height: 100%; background-color: black; z-index:; -moz-opacity: 0.7; opacity: .70; filter: alpha(opacity=70);}#show { display: none; position: absolute; top: 25%; left: 22%; width: 53%; height: 49%; padding: 8px; border: 8px solid #E8E9F7; background-color: white; z-index:; overflow: auto;}

发表回复

您的电子邮箱地址不会被公开。