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

完整源码压缩包：demo.rar

效果图（如下）：

插件脚本：

/**
 * 节点配置属性方式配置参数：专业的做法是配置到，每一个需要初始化为插件的那个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）指针作为参数传入构造函数的参数列表
     */
    var Demo = function (demo) {
        var self = 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">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>DIV CSS遮罩层</title>
    <link type="text/css" rel="stylesheet" href="demo.css"/>
</head>
<body>
<input id="btnshow" class="demo" type="button" value="Show"
       data-setting='{"maskDivId":"mask","showDivId":"show","closeButtonId":"btnclose"}'/>
<div id="mask">遮罩层</div>
<div id="show">
    <input id="btnclose" type="button" value="Close"/>
</div>
<script type="text/javascript" src="jquery.js"></script>
<script type="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;
}

Js插件开发的更多相关文章

  1. [js插件开发教程]一步步开发一个可以定制配置的隔行变色小插件

    隔行变色功能,不用js,直接用css伪类就可以做,这个实例可以作为js插件开发很好的入门级实例.本文实现的隔行变色包括以下功能: 1,支持2种常用结构共存( div元素 和 表格类型 ) 2,一个页面 ...

  2. [js插件开发教程]实现一个比较完整的开源级选项卡插件

    在这篇文章中,我实现了一个基本的选项卡功能:请猛击后面的链接>>   [js插件开发教程]原生js仿jquery架构扩展开发选项卡插件. 还缺少两个常用的切换(自动切换与透明度渐变),当然 ...

  3. react.js插件开发,x-dailog弹窗浮层组件

    react.js插件开发,x-dailog弹窗浮层组件 我认为,每一个组件都应该有他自带的样式和属性事件回调配置.所以我会给x-dialog默认一套简单的样式,和各种默认的配置项.所有react插件示 ...

  4. [js插件开发教程]原生js仿jquery架构扩展开发选项卡插件

    jquery插件一般是这么干的: $.fn.插件名称 = function(){}, 把插件的名称加在.fn上,在源码里面实际上是扩展到构造函数的原型对象上,如果你没看过jquery的源代码,或者你曾 ...

  5. [js插件开发教程]定制一个手风琴插件(accordion)

    本文带来一个垂直方向的手风琴插件开发,可以定制的功能如下: contentClass : 'panel', //面板样式navClass : 'nav', //导航样式activeClass : 'a ...

  6. 分享我对JS插件开发的一些感想和心得

    本文阅读目录: •起因•如何开发一个轻量级的适用性强的插件•总结 起因 如果大家平时做过一些前端开发方面的工作,一定会有这样的体会:页面需要某种效果或者插件的时候,我们一般会有两种选择: 1.上网查找 ...

  7. js插件开发的一些感想和心得

    起因 如果大家平时做过一些前端开发方面的工作,一定会有这样的体会:页面需要某种效果或者插件的时候,我们一般会有两种选择:1.上网查找相关的JS插件,学习其用法2.自己造轮子,开发插件. 寻找存在的插件 ...

  8. Vue.js插件开发

    Vue.js插件是为应用添加全局功能的一种强大而且简单的方式.插件的用途很广泛,从全局组件,到为应用添加一些额外的功能.如路由(Vue Router),存储在应用程序里的不可变数据(Vuex). 一般 ...

  9. Vue.js 插件开发详解

    前言 随着 Vue.js 越来越火,Vue.js 的相关插件也在不断的被贡献出来,数不胜数.比如官方推荐的 vue-router.vuex 等,都是非常优秀的插件.但是我们更多的人还只停留在使用的阶段 ...

随机推荐

  1. 又见Bug

    文章转载自「开发者圆桌」一个关于开发者入门.进阶.踩坑的微信公众号 作为一名开发者,如何解决遇到的问题.异常或Bug,是开发者必须要面对的,尽管问题很多,情况复杂,但还是有方法和技巧可寻的. 问题无非 ...

  2. Node.js web快速入门 -- KoaHub.js

    介绍 KoaHub.js -- 基于 Koa.js 平台的 Node.js web 快速开发框架.可以直接在项目里使用 ES6/7(Generator Function, Class, Async & ...

  3. 唐伯猫的 sql server 2008 的安装和操作记录

    在服务器win 2008 server r2 上安装sql 首先下载sql  server 2008  ,云盘有存储sql,很多论坛也有下载SQLEXPRADV_x64_CHS.exe 双击sql s ...

  4. 算法模板——Trie树

    实现功能——实现对于不同字符串以及之前出现过的字符串的识别,对于单个长度为L的字符串,复杂度为O(L); 代码不难懂,直接上(在识别字符串方面,个人觉得其好处远远大于hash识别——1.理论上都是O( ...

  5. ASP.NET MVC创建视图过程

    MvcHandler.ProcessRequest()   (1)获取Action执行结果:context2.Result ActionExecutedContext context2 = this. ...

  6. php从气象局获取天气预报并保存到服务器

    思路:1.打开网页时读取中国气象网的接口得到每个城市的该日json:2.解析并保存到mysql:3.客户端访问mysql得到数据集. 所包含的技巧: 进度条.flush()问题.mysql.xml.p ...

  7. Parallel.For 你可能忽视的一个非常实用的重载方法

    说起Parallel.For大家都不会陌生,很简单,不就是一个提供并行功能的for循环吗? 或许大家平时使用到的差不多就是其中最简单的那个重载方法,而真实情况 下Parallel.For里面有14个重 ...

  8. 无图无定位新版css步骤条兼容ie6+

    <ul class="ui-step list-unstyled"> <li class="step-item"><b class ...

  9. [python爬虫]爬取学校教务处成绩

    学校教务处网站 登陆窗口 表单数据 观察登陆窗口和提交的表单数据可知只要将账号.密码.验证码正确赋值提交即可模拟登陆. 账号和密码都有,问题的关键就在验证码上. 右键验证码图片审查观察源码如下图: 刚 ...

  10. 请一定记得升级java虚拟机

    对于吃货出身又需要保持体重的我,出门一定要带男票,因为这样就可以把见到的好吃的都买给他吃,就当是自己吃了[汗].偶尔做梦还是会梦到自己一个角落里偷吃东西,听到有脚步声,抬起头,大哭起来:“我饿了.”  ...