Js插件开发
简易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插件开发的更多相关文章
- [js插件开发教程]一步步开发一个可以定制配置的隔行变色小插件
隔行变色功能,不用js,直接用css伪类就可以做,这个实例可以作为js插件开发很好的入门级实例.本文实现的隔行变色包括以下功能: 1,支持2种常用结构共存( div元素 和 表格类型 ) 2,一个页面 ...
- [js插件开发教程]实现一个比较完整的开源级选项卡插件
在这篇文章中,我实现了一个基本的选项卡功能:请猛击后面的链接>> [js插件开发教程]原生js仿jquery架构扩展开发选项卡插件. 还缺少两个常用的切换(自动切换与透明度渐变),当然 ...
- react.js插件开发,x-dailog弹窗浮层组件
react.js插件开发,x-dailog弹窗浮层组件 我认为,每一个组件都应该有他自带的样式和属性事件回调配置.所以我会给x-dialog默认一套简单的样式,和各种默认的配置项.所有react插件示 ...
- [js插件开发教程]原生js仿jquery架构扩展开发选项卡插件
jquery插件一般是这么干的: $.fn.插件名称 = function(){}, 把插件的名称加在.fn上,在源码里面实际上是扩展到构造函数的原型对象上,如果你没看过jquery的源代码,或者你曾 ...
- [js插件开发教程]定制一个手风琴插件(accordion)
本文带来一个垂直方向的手风琴插件开发,可以定制的功能如下: contentClass : 'panel', //面板样式navClass : 'nav', //导航样式activeClass : 'a ...
- 分享我对JS插件开发的一些感想和心得
本文阅读目录: •起因•如何开发一个轻量级的适用性强的插件•总结 起因 如果大家平时做过一些前端开发方面的工作,一定会有这样的体会:页面需要某种效果或者插件的时候,我们一般会有两种选择: 1.上网查找 ...
- js插件开发的一些感想和心得
起因 如果大家平时做过一些前端开发方面的工作,一定会有这样的体会:页面需要某种效果或者插件的时候,我们一般会有两种选择:1.上网查找相关的JS插件,学习其用法2.自己造轮子,开发插件. 寻找存在的插件 ...
- Vue.js插件开发
Vue.js插件是为应用添加全局功能的一种强大而且简单的方式.插件的用途很广泛,从全局组件,到为应用添加一些额外的功能.如路由(Vue Router),存储在应用程序里的不可变数据(Vuex). 一般 ...
- Vue.js 插件开发详解
前言 随着 Vue.js 越来越火,Vue.js 的相关插件也在不断的被贡献出来,数不胜数.比如官方推荐的 vue-router.vuex 等,都是非常优秀的插件.但是我们更多的人还只停留在使用的阶段 ...
随机推荐
- 更改Debian Linux里面的EDT时区为CST时区
Debian按默认安装,设置的是EDT时区.这样跟我们的系统就都对不上,因此得 改回CST. 只需要两步即可: 使用vi编辑/etc/timezone,把timezone文件的内容更改为:Asia/S ...
- 【2-26】string/math/datetime类的定义及其应用
一string类 (1)字符串.Length Length作用于求字符串的长度,返回一个int值 (2)字符串.TrimStart(); TrimStart():可删除前空格,返回一个stri ...
- inline元素的margin与padding
替换元素与非替换元素 替换元素(replaced element):所谓替换元素就是浏览器根据元素的标签和属性,来决定元素具体显示什么内容.比如说:img标签的src属性的值用来读取图片信息并且显示出 ...
- C++ 构造函数或析构函数调用虚函数
构造函数和析构函数中的虚函数 在执行基类构造函数时,对象的派生类部分是未初始化的.实际上,此时对象还不是一个派生类对象. 为 了适应这种不完整,编译器将对象的类型视为在构造或析构期间发生了变化.在基类 ...
- iOS程序进入后台,延迟指定时间退出
程序进入后台,延迟指定时间退出 正常程序退出后,会在几秒内停止工作:要想申请更长的时间,需要用到beginBackgroundTaskWithExpirationHandlerendBackgroun ...
- TensorBoard:Visualizing Learning 学习笔记
为了更方便的理解.调试和优化TF程序,我们可以使用TensorBoard(可视化工具).可以使用TensorBoard查看graph,绘制图表执行过程中的定量指标.TensorBoard是完全可配置的 ...
- python + selenium <二>
应用Webdriver,实现自动化 #coding:gbk from selenium import webdriver import os from selenium.webdriver.suppo ...
- 用一个jsp实现对数据库发访问
<%@ page language="java" import="java.util.*" pageEncoding="gb2312" ...
- go-common-pool设计原理分析
common-pool: 对于一些对象的频繁创建会带来很大的系统开销,并且需要对对象数量进行控制来降低资源消耗,比如数据库连接,线程等 common-pool采用了缓存思想来解决这个问题,预先把一些对 ...
- 混合拉普拉斯分布(LMM)推导及实现
作者:桂. 时间:2017-03-21 07:25:17 链接:http://www.cnblogs.com/xingshansi/p/6592599.html 声明:欢迎被转载,不过记得注明出处哦 ...