自己动手Jquery插件
最近Web应用程序中越来越多地用到了JQuery等Web前端技术。这些技术框架有效地改善了用户的操作体验,同时也提高了开发人员构造丰富客户 端UI的效率。JQuery本身提供了丰富的操作,但是,有时候我们需要根据我们自己的业务和系统特色(风格)构造一些我们常用的前端UI组件,而 JQuery的插件给了我们一个较好的方式来构造这些UI组件,方便我们日后反复重用这些组件。
网上也有很多关于JQuery插件的文章,我也搜了一些,但是,这些文档太过离散,没有有效地组织并充分说明JQuey插件该如何编写,并且有哪几种形式,什么情况下使用哪种形式。下面,我将说明JQuery插件常用的写法,以及这些插件的常用场景。
一、插件的几种写法
首先,在具体说明编写插件之前,我们先假定一个使用场景:有一个HTML页面(或.aspx页面),页面上放置了一个5行3列的表格,即:<table></table>标记,具体代码如下:
<table id="newTable">
<tr>
<td>1</td><td>1</td><td>1</td>
</tr>
<tr>
<td>1</td><td>1</td><td>1</td>
</tr>
<tr>
<td>1</td><td>1</td><td>1</td>
</tr>
<tr>
<td>1</td><td>1</td><td>1</td>
</tr>
<tr>
<td>1</td><td>1</td><td>1</td>
</tr>
</table>
我要实现的功能是:鼠标移到表格的某一行时,当前行高亮显示,其他行正常。
OK,结合这个场景,我们进一步探讨如何利用JQuery插件实现上述功能。常用的JQuery插件有如下几种写法:
1. 对JQuery自身的扩展插件
顾名思义,这种插件是对JQuery自身的方法库进行扩展的。在使用的时候通过$.MethodName()的方式直接使用。
插件代码示例:
$.extend({
handleTableUI : function(table){
var thisTable = $("#" + table); $(thisTable).find("tr").bind("mouseover", function () {
$(this).css({ color: "#ff0011", background: "blue" });
});
$(thisTable).find("tr").bind("mouseout", function () {
$(this).css({ color: "#000000", background: "white" });
});
}
});
示 例说明:当要对JQuery自身进行扩展的时候,需要采用$.extend();的形式进行开发,JQuery的extend()方法为我们提供了扩展 JQuery自身的方式,在extend()方法中,我们采用{...}的形式编写具体的方法体。其中,最重要的是要定义我们自己的扩展方法,如示例中的 handleTableUI。定义的方式是:方法名 : function(参数){ 方法体 }。通过此种方式我们就可以定义JQuery自己的扩展方法,而且这个方法可以在web页面通过智能提示显示出来。页面中调用的代码如下:
<script type="text/javascript">
$(document).ready(function () {
$.handleTableUI("newTable");
});
</script>
2. 对HTML标记或页面元素进行扩展
使用这种插件的扩展方式,在使用此插件时,需要首先引用经过JQuery包装的页面元素,如:$("#tableId").Method()。
插件代码示例:
(function ($) {
$.fn.setTableUI = function(options){
var defaults = {
evenRowClass:"evenRow",
oddRowClass:"oddRow",
activeRowClass:"activeRow"
}
var options = $.extend(defaults, options);
this.each(function(){
var thisTable=$(this);
$(thisTable).find("tr").bind("mouseover", function () {
$(this).css({ color: "#ff0011", background: "blue" });
});
$(thisTable).find("tr").bind("mouseout", function () {
$(this).css({ color: "#000000", background: "white" });
});
});
};
})(jQuery);
示例说明:当要对页面元素进行JQuery扩展时,需要采用(function($){...})(JQuery);的方式进行开发。在“...”处,定义我们自己的方法,定义方式是:$.fn.自定义方法名 = function(参数){...};的形式定义扩展方法的具体内容。在页面调用的时候不同于对JQuery自身的扩展。具体调用代码如下:
<script type="text/javascript">
$(document).ready(function () {
$("#newTable").setTableUI();
});
</script>
3. 不要用在页面显式调用JQuery的方法,而是通过直接添加JQuery插件脚本引用,即可实现对该插件的调用。
一 般,如果需要用到一些全局的JQuery插件,即:插件的方法不需要显式调用,而是引用脚本即可;同时,这种插件一般对整个Web页面起到全局配置或设置 的作用,如:对<body></body>内部的内容进行整体布局,此时可以采用脚本引用的方式实现。
插件代码示例:
(function ($) {
$.tableUI = { set: function () {
var thisTable = $("table");
$(thisTable).find("tr").bind("mouseover", function () {
$(this).css({ color: "#ff0011", background: "blue" });
});
$(thisTable).find("tr").bind("mouseout", function () {
$(this).css({ color: "#000000", background: "white" });
});
}
};
//此处需要进行自调用
$(function () {
$.tableUI.set();
});
})(jQuery);
示例说明:如果上面这段代码在my.plugin.js文件中,那么,我们只需要在页面上添加对此脚本文件的引用即可,引用方式为:<script src="Scripts/my.plugin.js" type="text/javascript"></script> ,当然,在所有要用到JQuery的地方,需要首先添加对JQuery库脚本的引用。在引用型插件的代码中,最主要的就是在插件中要主动调用自己所写的插件方法,上面代码中有注释的地方。否则,我们写的插件代码将不会起作用。
二、插件的基本要点
在编写插件的时候,我们需要记住这些要点,虽然不照着这么做不会影响使用,但是要是你的插件是不规范的代码,那何必花苦心思去写插件。
jQuery插件的文件名推荐命名为jquery.[插件名].js,以免和其他JavaScript库插件混淆。例如命名为jquery.color.js。
所有的对象方法都应当附加到jQuery.fn对象上,而所有的全局函数都应当附加到jQuery对象本身上。
在插件内部,this指向的是当前通过选择器获取的jQuery对象,而不像一般的方法那样,例如click()方法,内部的this指向的是DOM元素。
可以通过this.each来遍历所有元素。
所有的方法或函数插件,都应当以分号结尾,否则压缩的时候可能出现问题。为了更稳妥些,甚至可以在插件头部先加上一个分号,以免他人的不规范代码给插件带来影响。具体方法可以参考后面的代码。
插件应该返回一个jQuery对象,以保证插件的可链式操作。除非插件需要返回的是一些需要获取的量,例如字符串或者数组等。
避免在插件内部使用$作为jQuery对象的别名,而应使用完整的jQuery来表示。这样可以避免冲突。当然,也可以利用闭包这种技巧来回避这个问题,使插件内部继续使用$作为jQuery的别名。很多插件都是这么做的,本教程也会利用这种形式。
自己动手Jquery插件的更多相关文章
- 动手Jquery插件
自己动手Jquery插件 最近Web应用程序中越来越多地用到了JQuery等Web前端技术.这些技术框架有效地改善了用户的操作体验,同时也提高了开发人员构造丰富客户 端UI的效率.JQuery本身提供 ...
- 自己动手写插件底层篇—基于jquery移动插件实现
序言 本章作为自己动手写插件的第一篇文章,会尽可能的详细描述一些实现的方式和预备知识的讲解,随着知识点积累的一点点深入,可能到了后期讲解也会有所跳跃.所以,希望知识点不是很扎实的读者或者是初学者,不要 ...
- 自己动手开发jQuery插件
因为工作需要,所以这几天琢磨了一下关于jQuery插件开发的问题,经过一天鏖战,终于完成自己动手做的第一个jQuery插件,对于俺这种见了css就蛋疼菊紧的人来说,一天时间8小时,保守估计有5个小时在 ...
- 自己动手写jQuery插件---Tip(提示框)
对jQuery相信很多同学和我一样平时都是拿来主义,没办法,要怪只能怪jQuery太火了,各种插件基本能满足平时的要求.但是这毕竟不是长久之道,古人云:“授之以鱼,不如授之以渔”. 为了方便之前没有接 ...
- 自己动手开发jQuery插件全面解析 jquery插件开发方法
jQuery插件的开发包括两种: 一种是类级别的插件开发,即给jQuery添加新的全局函数,相当于给jQuery类本身添加方法.jQuery的全局函数就是属于jQuery命名空间的函数,另一种是对象级 ...
- 自己写jquery插件之模版插件高级篇(一)
需求场景 最近项目改版中,发现很多地方有这样一个操作(见下图gif动画演示),很多地方都有用到.这里不讨论它的用户体验怎么样. 仅仅是从复用的角度,如果每个页面都去写text和select元素,两个b ...
- SlipHover,能感知鼠标方向的图片遮罩效果jQuery插件
接上一篇博文,介绍完jQuery插件开发后这里上一个自己的作品,也是初次实践,小有成就的感觉. 话说这个插件年前就写好了,然后挂到GitHub,然后就偷偷看着Google Analysis心中暗自激动 ...
- 开发一个jQuery插件——多级联动菜单
引言 开发中,有好多地方用到联动菜单,以前每次遇到联动菜单的时候都去重新写,代码重用率很低,前几天又遇到联动菜单的问题,总结了下,发现可以开发一个联动菜单的功能,以后想用的时候就方便多了.项目中每个页 ...
- 全屏滚动-jQuery插件实现
全屏滚动 <---很久没写了,这段忙了点,以后还是每周尽量写点东西---> 在很多情况下,我们需要页面的全屏滚动,尤其是移动端.今天简要的介绍一下全屏滚动的知识. 一.全屏滚动的原理 1. ...
随机推荐
- 关于 IIS 上的 Speech 设置
在之前的开发过程中,发现在 微软各个版本的Speech中(从sdk5.1 到 最新的 Speech PlatFarme V11),在本地可以生成音频文件,但是在IIS上却生成无法生成完整的文件. 调试 ...
- bin(x) 将整数x转换为二进制字符串
>>> a 122 >>> b 344 >>> c = bin(a) >>> d = bin(b) >>> c ...
- POJ 2375 Cow Ski Area[连通分量]
题目链接:http://poj.org/problem?id=2375题目大意:一片滑雪场,奶牛只能向相邻的并且不高于他当前高度的地方走.想加上缆车是的奶牛能从低的地方走向高的地方,求最少加的缆车数, ...
- MyEclipse使用自己的JDK和Tomcat
配置tomcat:window-->preferences-->myeclipse-->servers-->tomcat-->选一个-->右边选择一的tomcat的 ...
- PHP file_get_contents() 函数
定义和用法 file_get_contents() 函数把整个文件读入一个字符串中. 和 file() 一样,不同的是 file_get_contents() 把文件读入一个字符串. file_get ...
- 交叉编译 小米路由器mini 的 python(MIPS)
看了很多文章,要么说的是用opkg安装python,要么说的是小米路由器的交叉编译,就是没有mini的.学习了这篇文章(http://me.deepgully.com/post/56389167868 ...
- float 和 real
用于表示浮点数值数据的大致数值数据类型.浮点数据为近似值:因此,并非数据类型范围内的所有值都能精确地表示. 注意: real 的 SQL-92 同义词为 float(24). 数据类型 范围 存储 ...
- BZOJ_1610_[Usaco2008_Feb]_Line连线游戏_(计算几何基础+暴力)
描述 http://www.lydsy.com/JudgeOnline/problem.php?id=1610 给出n个点,问两两确定的直线中,斜率不同的共有多少条. 分析 暴力枚举直线,算出来斜率放 ...
- POJ 3020 Antenna Placement 解题报告
题意就不说了,求二部图最大匹配. 问题是怎么建图…… 给定的条件中,h<40,w<10,所以笔者直接默认所有情况的地图都是40*10,当然,超出范围的便是空城o. 然后给城市编号.一个城市 ...
- 白书P60 - 硬币问题
白书P60 - 硬币问题 完全背包.DP #include <iostream> #include <cstdio> #include <cstring> usin ...