简易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)右 ...
随机推荐
- JS获取地址栏中的链接URL参数
function getUrlParam(name){ var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&am ...
- Delphi中使用OLE方法操作Excel
首先创建 Excel 对象,使用ComObj: var ExcelApp: Variant; ExcelApp := CreateOleObject( ′Excel.Application′ ); 注 ...
- poj 3311（状态压缩DP）
poj 3311(状态压缩DP) 题意:一个人送披萨从原点出发,每次不超过10个地方,每个地方可以重复走,给出这些地方之间的时间,求送完披萨回到原点的最小时间. 解析:类似TSP问题,但是每个点可以 ...
- .Net iTextSharp 生成pdf
拿别人例子 public ActionResult index() { var ms = new MemoryStream(); #region CreatePDF Document document ...
- hdu4285-circuits
题意 一个 \(n\times m\) 的方格纸,有一些格子不能走.给出一个 \(k\) ,求有多少种方案,用 \(k\) 个不相交,不嵌套 的环覆盖所有可以走的格子.\(n,m\le 12\) . ...
- P3216 [HNOI2011]数学作业
题目描述 小 C 数学成绩优异,于是老师给小 C 留了一道非常难的数学作业题: 给定正整数 N 和 M ,要求计算Concatenate (1 .. N) Mod M 的值,其中 Concatenat ...
- P2303 [SDOi2012]Longge的问题
题目描述 Longge的数学成绩非常好,并且他非常乐于挑战高难度的数学问题.现在问题来了:给定一个整数N,你需要求出∑gcd(i, N)(1<=i <=N). 输入输出格式 输入格式: 一 ...
- 内容显示在HTML页面底端的一些处理方式
1.概要: 手机页面底端有时候需要显示版权信息,诸如一行文字或者一个背景图片,但是页面的滚动长度未知,需要考虑两个问题 当页面高度小于屏幕高度时候: 希望最后一行信息显示在屏幕底端,同时也就是页面底端 ...
- 【BZOJ2962】序列操作（线段树）
[BZOJ2962]序列操作(线段树) 题面 BZOJ 题解 设\(s[i]\)表示区间内选择\(i\)个数的乘积的和 考虑如何向上合并? \(s[k]=\sum_{i=0}^klson.s[i]*r ...
- 数据挖掘领域经典分类算法 —— C4.5算法（附python实现代码）
目录 理论介绍 什么是分类 分类的步骤 什么是决策树 决策树归纳 信息增益 相关理论基础 计算公式 ID3 C4.5 python实现 参考资料 理论介绍 什么是分类 分类属于机器学习中监督学习的一种 ...