我最喜欢的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等后端语言语法冲突等问题. 所以将多个 ...
随机推荐
- JS 在 IE9 中出现奇怪的错误(参数是必选项 argument not optional)
最近发现之前运行正常的网站,在 IE9 下会报这个错误.网上查了一下,发现是跟我的方法名字有关... 我起了一个叫做 addFilter 名字的方法,但是很不巧,IE9 里也有一个这个名字的方法,所以 ...
- [100]find&xargs命令
打算把基础命令常用选项做个总结. find命令参数 - 命令格式 find . -type f -name '*.txt' - 命令参数 find #查找文件 -type #指定类型 f 文件 d 目 ...
- pc客户端网页录音和压缩
web录音的功能,也就是怎么使用 getUserMedia 音频上传 栗子中最后返回的是Blob数据 return new Blob([dataview], { type: type }) 因为对ht ...
- Python Socket网络编程详解
Socket 简介 socket通常也称作"套接字",用于描述IP地址和端口,是一个通信链的句柄,应用程序通常通过"套接字"向网络发出请求或者应答网络请求. s ...
- android笔记---百度地图api应用 (二) 获取公交路线的详细信息
package com.example.bdtest; import com.baidu.mapapi.MKEvent; import com.baidu.mapapi.MKPlanNode; imp ...
- angular学习笔记(三十)-指令(4)-transclude
本篇主要介绍指令的transclude属性: transclude的值有三个: 1.transclude:false(默认值) 不启用transclude功能. 2.transclude:true 启 ...
- 找个些有用的网站(CSS生成)
http://www.shejidaren.com/css-button-generator-and-beautifucl-style-sheet.html
- 【Socket】linux高性能网络服务程序
1.mystery引入 1)高性能的网络服务程序分为单线程重复式网络服务.多进程网络服务 .多线程网络服务.线程池网络服务和IO多路复用网络服务等 2)单线程重复式是最基本的一种TCP服务模式,其实现 ...
- 2017年研究生数学建模竞赛-E题 MATLAB 作战区域道路示意图
MATLAB 画区域作战图 clear load('output_path1.mat') k = 1:130; gplot(edge(k,k),loc(k,:),'c-') title('作战区域道路 ...
- 使用一层神经网络训练mnist数据集
import numpy as np import tensorflow as tf from tensorflow.examples.tutorials.mnist import input_dat ...