简易jQuery插件
之前写过jQuery插件的笔记
我一直觉得前面讲了一大堆闭包和三种插件封装模式有点冗余，那篇笔记我直到记录到后面才发现这事情很简单，想来想去还是觉得网上的一些文章把事情搞复杂了，其实这件事情很简单，所以我想按照自己的方式重新把这个问题阐述一遍。
我觉得学东西学的活的人都会从结果去倒推，比如说有些人学习音乐，先去练习演奏大量的曲目，然后再回来推敲这些曲子的作曲手法，这样更能事半功倍，而如果你从一开始就去研究作曲手法你可能连视奏能力都没有达到要求，这样做只会浪费时间。所以这篇博文的思路也是从结果倒推，要学习如何封装jQuery插件，首先要明白如何使用jQuery插件。
jQuery插件的使用方法非常简单，如果你用的足够多你就会发现其中的共性，简单来说就是以下3点：
1.插件都依赖于id
2.插件初始化的方法一般都是调用插件方法
3.插件方法的参数一般都是一个Object
我们以jQuery UI的datepicker为例，我们要把一个input输入框变成一个datepicker，方法如下：
<html>
<head>
<title>how to use datepicker plugin</title>
<link rel="stylesheet" type="text/css" href="./css/jquery-ui.min.css" />
</head>
<body>
<!--input依赖于id-->
<input type="text" id="datepicker1" readonly />
<input type="text" id="datepicker2" readonly /> <script src="./js/jquery-1.11.3.min.js"></script>
<script src="./js/jquery-ui.min.js"></script>
<script>
$(function () {
//调用插件方法初始化插件
//参数为Object类型
$("#datepicker1").datepicker({
minDate:0,
onSelect:function(e){
alert("Hello,Datepicker!");
}
}); //不带参数的datepicker初始化
$("#datepicker2").datepicker();
});
</script>
</body>
</html>
我们来总结一下就是，jQuery插件的使用方法一般来说就是
$("#id-selector").pluginFunctionName({
prop: value,
method: function(){
//method code
}
});
弄清楚了这一点，那么我们就可以追本溯源地去编写jQuery插件了
首先我们要搞清楚编写插件时要具备的代码环境，这个环境不过多赘述，如有不懂请参看我开头提到的之前写的博文
<html>
<head>
<title>plugin</title>
</head>
<body>
<div id="plugin"></div> <script src="./js/jquery-1.11.3.min.js"></script>
<script>
$(function () {
$.fn.myPlugin = function () {
//在这里编写插件
}
}); $(function(){
//在这里调用插件方法
$("#plugin").myPlugin();
});
</script>
</body>
</html>
然后接下来要讲的是重点，我们一步一步来变化我们刚才写的代码
1.既然前面说到调用插件时有一个Object作为参数，这个Object设置了插件的很多内容，那么我们就把这个Object理解为一个设置项，即option，所以myPlugin这个方法要有一个options形参
<html>
<head>
<title>plugin</title>
</head>
<body>
<div id="plugin"></div> <script src="./js/jquery-1.11.3.min.js"></script>
<script>
$(function () {
$.fn.myPlugin = function (options) {
}
}); $(function(){
$("#plugin").myPlugin();
});
</script>
</body>
</html>
2.但是我们有时候调用插件的时候并不会带参数，而这个时候插件也能生效，这是因为插件的开发者们往往会事先写好一个Object作为默认的参数，当插件被调用时没有带参数，这个Object就会生效，我们将这个Object称为defaults
<html>
<head>
<title>plugin</title>
</head>
<body>
<div id="plugin"></div> <script src="./js/jquery-1.11.3.min.js"></script>
<script>
$(function () {
$.fn.myPlugin = function (options) {
//设置defaults object
var defaults = {
Event:"click",
msg:"Hello World!"
};
}
}); $(function(){
$("#plugin").myPlugin();
});
</script>
</body>
</html>
3.可是又有一些时候我们在调用插件的时候又会设置options里的一部分，而options的另一部分不设置，比如上面这个例子，我在调用myPlugin的时候如果写成这样
$("#plugin").myPlugin({ msg: "Ahhhhh~" });
我们只设置了msg，而Event被我们忽略了，那这个时候Event还是需要一个默认值，或者说，干脆就采用defaults里的那个click，
在这种情况下，我们使用jQuery提供的extend()方法来解决，它的作用是将两个不同的Object对象进行合并(Merge)
<html>
<head>
<title>plugin</title>
</head>
<body>
<div id="plugin"></div> <script src="./js/jquery-1.11.3.min.js"></script>
<script>
$(function () {
$.fn.myPlugin = function (options) {
//设置defaults object
var defaults = {
Event:"click",
msg:"Hello World!"
}; //合并defaults和options
var options = $.extend(defaults, options);
}
}); $(function(){
$("#plugin").myPlugin();
});
</script>
</body>
</html>
4.在上述步骤后我们需要预先设置好一些变量，比如获取this对，或者更进一步对插件进行事件绑定
<html>
<head>
<title>plugin</title>
</head>
<body>
<div id="plugin"></div> <script src="./js/jquery-1.11.3.min.js"></script>
<script>
$(function () {
$.fn.myPlugin = function (options) {
//设置defaults object
var defaults = {
Event:"click",
msg:"Hello World!"
}; //合并defaults和options
var options = $.extend(defaults, options); //获取this，对本例来说就是 $("#plugin")
var $this = $(this); //进行事件绑定
$this.on(options.Event, function(e){
alert(options.msg);
});
}
}); $(function(){
$("#plugin").myPlugin();
});
</script>
</body>
</html>
最后这个简易的插件就算是完成了，我们可以带参数和不带参数来试一试
<html>
<head>
<title>simple node plugin example</title>
</head>
<body>
<div id="hello">click me to say "Hello,World!"</div>
<div id="bye">touch me to say "Goodbye,World!"</div> <script src="./js/jquery-1.11.3.min.js"></script>
<script>
$(function () {
$.fn.myPlugin = function (options) {
var defaults = {
Event:"click",
msg:"Hello World!"
};
var options = $.extend(defaults, options);
var $this = $(this);
$this.on(options.Event, function(e){
alert(options.msg);
});
}
}); $(function(){
$("#hello").myPlugin();
$("#bye").myPlugin({Event:"mouseover",msg:"Goodbye,World!"});
});
</script>
</body>
</html>
然而这里还有一个问题，如果我们想要插件多一些DOM层次呢？比如Bootstrap的panel面板，有title，有content，而且点击title能够切换显示隐藏，这应该怎么写呢？
其实思路也很简单，无非就是获取到这个插件最外层（也就是id那一层）的子节点，然后对这些子节点进行绑定，我自己试着写了一个简单的panel插件，个人认为简单易懂，所以直接贴上来，不作解释。
<html>
<head>
<title>multi node plugin example</title>
<style>
.panel{width:350px;}
</style>
</head>
<body>
<div class="panel" id="test">
<div class="title">
<p>I am Title,click me to show the content</p>
</div>
<div class="content">
<p>I am Content</p>
<p>I wanna say</p>
<p>Hello,World!</p>
</div>
</div> <script src="./js/jquery-1.11.3.min.js"></script>
<script>
$(function () {
$.fn.panel = function (options) {
var defaults = {
titleFontColor:"red",
titleBackgroundColor:"#eeeeee",
contentFontColor:"blue",
contentBackgroundColor:"#e5e5e5"
};
var options = $.extend(defaults, options); var $this = $(this);
var $title = $this.children("div.title");
var $content = $this.children("div.content"); $title.css({ color: options.titleFontColor, background:options.titleBackgroundColor });
$content.css({ color: options.contentFontColor, background:options.contentBackgroundColor }); $title.on("click", function(){
$content.toggle();
});
}
}); $(function(){
$("#test").panel({contentFontColor:"#000000"});
});
</script>
</body>
</html>
相信看完这篇文章后，你就能完全理解如何去编写一个jQuery插件了！
简易jQuery插件的更多相关文章
- 40 个让你的网站更加友好的 jQuery 插件
一个插件的基本功能是执行一个含有元素集合的函数数组.每个方法和jQuery核心组成一个插件,如.fadeOut()或.addClass().一个jQuery插件是一个基本的可以扩充jQuery 原型对 ...
- 40个让你的网站屌到爆的jQuery插件
一 个插件的基本功能是执行一个含有元素集合的函数数组.每个方法和jQuery核心组成一个插件,如.fadeOut()或.addClass().一个 jQuery插件是一个基本的可以扩充jQuery 原 ...
- 常用JQuery插件
虽然自己也写过插件,但JQuery插件种类的繁多,大多时候,我还是使用别人写好的插件,这些都是我用了同类插件里较为不错的一些,今天就整理一下公开放出来. UI: jquery.HooRay(哈哈,自己 ...
- 一些常用的jQuery插件
1. X-editable 这个插件能够让你在页面上创建可编辑的元素.它能够使用任何引擎(bootstrap.jquery-ui.jquery),并且包含弹出式和内联模式. 2. Garlic.js ...
- JQuery插件使用之Validation 快速完成表单验证的几种方式
JQuery的Validation插件可以到http://plugins.jquery.com/上去下载.今天来分享一下,关于这个插件的使用. 简易使用 这第一种方式可谓是傻瓜式的使用,我们只需要按照 ...
- 8个超实用的jQuery插件应用
自jQuery诞生以来,jQuery社区都在不断地.自发地为jQuery创建许许多多功能不一的插件应用,很多jQuery插件非常实用,对我们的前端开发帮助相当大,不仅可以更完美的完成指定功能,而且节省 ...
- 自己写jquery插件之模版插件高级篇(一)
需求场景 最近项目改版中,发现很多地方有这样一个操作(见下图gif动画演示),很多地方都有用到.这里不讨论它的用户体验怎么样. 仅仅是从复用的角度,如果每个页面都去写text和select元素,两个b ...
- JQuery插件定义
一:导言 有些WEB开发者,会引用一个JQuery类库,然后在网页上写一写$("#"),$("."),写了几年就对别人说非常熟悉JQuery.我曾经也是这样的人 ...
- BootStrap_04之jQuery插件（导航、轮播）、以及Less
1.列偏移与列排序: ①列偏移:控制列出现的位置,某列偏移后,后序列会随之偏移--只能右偏移: col-lg/md/sm/xs-offset-*; ②列排序:控制某一列的位置,该列可以左(pull)右 ...
随机推荐
- 1003 我要通过！| PAT (Basic Level) Practice
1003 我要通过! (20 分) "答案正确"是自动判题系统给出的最令人欢喜的回复.本题属于 PAT 的"答案正确"大派送 -- 只要读入的字符串满足下列条件 ...
- C51学习笔记
转自:http://blog.csdn.net/gongyuan073/article/details/7856878 单片机C51学习笔记 一, C51内存结构深度剖析 二, reg51.头 ...
- C++编译与链接（1）-编译与链接过程
大家知道计算机使用的一系列的1和0 那个一个C++语言程序又是如何从一个个.h和.cpp文件变成包含1和0的可执行文件呢? 可以认为有以下的几个环节 源程序->预处理->编译和优化-> ...
- PHP qq第三方登录，install时，报Not Found
最近在学习qq的第三方登录,先在慕课网中观看了相关视频,懂了原理. 然后进行操作时,在下载好SDK后,在../install/install.html中,配置了相关的openid,oppkey,cal ...
- （暂时弃坑）（半成品）ACM数论之旅18---反演定理 第二回 Mobius反演（莫比乌斯反演）（(づ￣3￣)づ天才第一步，雀。。。。）
莫比乌斯反演也是反演定理的一种 既然我们已经学了二项式反演定理 那莫比乌斯反演定理与二项式反演定理一样,不求甚解,只求会用 莫比乌斯反演长下面这个样子(=・ω・=) d|n,表示n能够整除d,也就是d ...
- Java容器深入浅出之HashSet、TreeSet和EnumSet
Java集合中的Set接口,定义的是一类无顺序的.不可重复的对象集合.如果尝试添加相同的元素,add()方法会返回false,同时添加失败.Set接口包括3个主要的实现类:HashSet.TreeSe ...
- Qss 样式表的尝试
QLineEdit{ border:1px solid #137eb6; padding:2px; background-color:#F5F5F5; } QToolTip{ border:1px s ...
- DPM(Deformable Parts Model)
DPM(Deformable Parts Model) Reference: Object detection with discriminatively trained partbased mode ...
- BZOJ5118 Fib数列2（矩阵快速幂）
特殊矩阵的幂同样满足费马小定理. #include<iostream> #include<cstdio> #include<cmath> #include<c ...
- mybatis plugin作为一款优秀的mybatis跳转插件
阅读目录: 1. 简介2. 下载mybatis plugin插件3. 安装mybatis plugin插件4. 启动并验证5.说明1. 简介 mybatis plugin作为一款优秀的mybatis跳 ...