我最喜欢的jQuery插件模板
我使用jQuery已经有相当长的时间了,并且我会常常为它写一些插件(plugin)。我尝试过用不同的方式去写,现在这个模板是我最喜欢的:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
|
;( function ($) { // multiple plugins can go here ( function (pluginName) { var defaults = { color: 'black' , testFor: function (div) { return true ; } }; $.fn[pluginName] = function (options) { options = $.extend( true , {}, defaults, options); return this .each( function () { var elem = this , $elem = $(elem); // heres the guts of the plugin if (options.testFor(elem)) { $elem.css({ borderWidth: 1, borderStyle: 'solid' , borderColor: options.color }); } }); }; $.fn[pluginName].defaults = defaults; })( 'borderize' ); })(jQuery); //下面是用法 $( 'div' ).borderize(); $( 'div' ).borderize({color: 'red' }); |
以下是我喜欢这种模板的原因
1. 你仍然可以访问里面的默认选项,即便它被重写了(简单地通过父属性的访问)
2. 通过修改pluginName即可更改插件的名字。(这种方式对代码压缩也非常有利)
第#1点非常强大,比如说我们希望复写这个方法,但是仍然希望保留原来的方法,我们可以看下面的例子:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
$( '.borderize' ).borderize({ testFor: function (elem) { var $elem = $(elem); if (elem.is( '.inactive' )) { return false ; } else { // calling "parent" function return $.fn.borderize.defaults.testFor.apply( this , arguments); } } }); We can even do this with regular properties like this var someVarThatMayBeSet = false ; /* code ... */ $( '.borderize' ).borderize({ color: someVarThatMayBeSet ? 'red' : $.fn.borderize.defaults.color }); |
你有更好的模板吗?欢迎回复。
我最喜欢的jQuery插件模板的更多相关文章
- 过去几个月出炉的30款最喜欢的 jQuery 插件
在这篇文章中,我们收集了一些在过去的几个月里最喜欢的 jQuery 插件.为了使您更容易搜索到自己喜欢的 jQuery 插件,我们已经对插件进行了分类: 页面布局插件,图片和视频插件,滑块和画廊,排版 ...
- jQuery 插件模板
1.为每一个DOM对象创建一个插件对象 模板定义: (function($) { $.pluginName = function(element, options) { var defaults = ...
- 关于jquery插件模板的两个案例
/** * jquery tips 提示插件 jquery.tips.js v0.1beta * * 使用方法 * $(selector).tips({ //selector 为jquery选择器 * ...
- JQuery插件模板
(function($){ $.fn.插件名 = function(settings){ var defaultSettings = { } /* 合并默认参数和用户自定义参数 */settings ...
- 简记 jQuery 插件模板
/** * @lisence jquery plugin demo v1.0.0 * * author: Jeremy Yu * * description: * this is a jquery p ...
- jQuery插件编写及链式编程模型小结
JQuery极大的提高了我们编写JavaScript的效率,让我们可以愉快的编写代码,做出各种特效.大多数情况下,我们都是使用别人开发的JQuery插件,今天我们就来看看如何把我们常用的功能做出JQu ...
- 2014年50个程序员最适用的免费JQuery插件
有用的jQuery库是设计师和开发者之间一个非常熟悉的短语.这是现在互联网中最流行的JavaScript函数库之一.每个设计师和开发人员都应该知道它的重要性,而且熟悉它的功能和特点. jQuery几乎 ...
- jQuery插件编写及链式编程模型
jQuery插件编写及链式编程模型小结 JQuery极大的提高了我们编写JavaScript的效率,让我们可以愉快的编写代码,做出各种特效.大多数情况下,我们都是使用别人开发的JQuery插件,今天我 ...
- 前端模板文件化jQuery插件 $.loadTemplates
工作中使用前端模板引擎,如 artTemplate.jsRender,来替代拼接字符串. 可是直接把模板写在页面上会带来页面臃肿,模板无法重用,与 ASP.NET等后端语言语法冲突等问题. 所以将多个 ...
随机推荐
- activiti设置流程变量
public static void mian(String args[]){ ProcessEngine processEngine = ProcessEngine.getDefaultProce ...
- 分享:Oracle 系统变量函数用法说明
在Oracle数据库中,Oracle系统变量函数是经常会使用到的函数,分享下Oracle系统变量函数的用法. Oracle函数多种多样,系统变量函数就是其中之一,介绍三种最常见的系统变量函数. Ora ...
- modelsim编译Xilinx器件库的另一种方法(节省时间)
以前在用modelsim对Xilinx进行器件库编译时,我用的比较多的是直接在ISE中编译器件库,感觉很方便简单,就是编译时间有点长.自从前段时间,在自己电脑装MathType,360杀毒软件将它视为 ...
- .NET MVC+ EF+LINQ 多表联查VIEW显示列表
1.VIEW 页面显示代码 <link href="~/Content/bootstrap.css" rel="stylesheet" /> < ...
- angular学习笔记(三十一)-$location(1)
本篇介绍angular中的$location服务的基本用法,下一篇介绍它的复杂的用法. $location服务的主要作用是用于获取当前url以及改变当前的url,并且存入历史记录. 一. 获取url的 ...
- cocos2dx+lua注册事件函数详解 事件
coocs2dx 版本 3.1.1 registerScriptTouchHandler 注册触屏事件 registerScriptTapHandler ...
- 【驱动】LCD驱动(FrameBuffer)分析
背景知识 在多媒体的推动下,彩色LCD越来越多地应用到嵌入式系统中,PDA和手机等大多都采用LCD作为显示器材,因此LCD的应用很有实际意义! LCD工作的硬件需求:要使一块LCD正常的显示文字或图像 ...
- 【转】Android的root原理
转自知乎:https://www.zhihu.com/question/21074979 @Kevin @张炬 作者:Kevin链接:https://www.zhihu.com/question/21 ...
- Lintcode: Subarray Sum 解题报告
Subarray Sum 原题链接:http://lintcode.com/zh-cn/problem/subarray-sum/# Given an integer array, find a su ...
- Oracle 项目中 SQL 脚本更新方式
DECLARE hasVersion ); dbVersion ); BEGIN ) INTO hasVersion FROM ELB_SETTINGS E WHERE E.KEY='dbVersio ...