我的第一个jQuery插件--表格隔行变色
虽然网上有大量的插件供我们去使用,但不一定有一款适合你的,必要的时候还是要自己动手去敲的。下面,开始我的第一个插件...
参考《锋利的JQuery》,JQuery为开发插件增设了俩个方法:$.extend(object), $.fn.extend(object).
这篇博文对插件制作的讲解挺好的,就是有点长,但值得玩味:http://blog.csdn.net/guorun18/article/details/49819715
下面谈一个我对插件的(片面)理解:
插件分俩种:
·类级别组件开发:
---即给JQuery命名空间下添加新的全局函数,也称静态方法。形式如下:
jQuery.myPlugin = function (){
//do something
};
例如:$.ajax(options); $.type();
·对象级别组件开发
---挂在JQuery原型下的方法,通过选择器获取的JQuery对象实例能共享该方法,称为动态方法。形式如下:
//$.fn == $.prototype
$.fn.myPlugin = function () {
//do somthing
};
例如:.addClass(); .attr();
同时,插件也要保持JQuery链式调用的特性,链式调用的形式如下:
$.fn.myPlugin = function (){
return this.each(function (){ //return实现链式调用
//do something
});
};
----------------------------------以上就是插件机制---------------------------------
下面实现一个简单的表格隔行变色插件:
//为了更好的兼容性,前面有个分号
(function($){
$.fn.tableUI = function(options){
var defaults = {
evenRowClass:"evenRow",
oddRowClass:"oddRow",
activeRowClass:"activeRow",
clickRowClass:"clickRow"
}
var options = $.extend(defaults, options);//$.extend(option...)返回一个对象.
//为了实现链式调用,用return返回对象
return this.each(function(){
//缓存this
var thisTable = $(this);
$(thisTable).find("tr:even").addClass(options.evenRowClass);
$(thisTable).find("tr:odd").addClass(options.oddRowClass);
$(thisTable).find("tr").bind("mouseover",function(){
$(this).removeClass(options.clickRowClass).addClass(options.activeRowClass);
});
$(thisTable).find("tr").bind("mouseout",function(){
$(this).removeClass(options.clickRowClass).removeClass(options.activeRowClass);
});
$(thisTable).find("tr").bind("click",function(){
$(this).addClass(options.clickRowClass);
});
});
};
})(jQuery);
鉴于本人初次编写插件,但还是要分享一下此刻所感所悟,未来看到肯定会觉得头脑简单吧。
首先利用this传递DOM元素对象,可以看做是插件最外层的元素,然后通过JQuery提供的查询(find)方法匹配内部元素对象,将匹配到的元素配合设置的属性(options)一步一步实现想要的功能。
ps:options的类名应提前写好css样式,以备使用。
我的第一个jQuery插件--表格隔行变色的更多相关文章
- 用JQuery实现表格隔行变色和突出显示当前行
用JQuery实现表格隔行变色和突出显示当前行 上源码 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "htt ...
- JavaScript例子2-使一个特定的表格隔行变色
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- jquery插件之表格隔行变色并鼠标滑过高亮显示
该插件乃本博客作者所写,目的在于提升作者的js能力,也给一些js菜鸟在使用插件时提供一些便利,老鸟就悠然地飞过吧. 此插件旨在实现表格隔行变色,且鼠标移动在表格的某一行上时,该行能高亮显示.整体代码如 ...
- jQuery 表格隔行变色插件
jQuery提供了用于扩展jQuery功能的方法,即jQuery.fn.extend()方法和jQuery.extend()方法. 基本的JS框架代码如下: ;(function($) { $.fn. ...
- 做了一个jquery插件,使表格的标题列可左右拉伸
示例下载 插件名称命名为:jquery.tableresize.js,代码如下: /* Writen by mlcactus, 2014-11-24 这是我封装的一个jquery插件,能够使table ...
- jquery实现html表格隔行变色
效果图 实现代码: 通过css控制样式,利用jquery的addClass方法实现 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Trans ...
- Jquery 类似新浪微博,鼠标移到头像,用浮动窗口显示用户信息,已做成一个jquery插件
请注意!!!!! 该插件demo PHP 的 demo下载 C#.NET的demo下载 需要如下图, 1.鼠标移动到头像DIV时,Ajax获取数据,并让浮动DIV显示出来. 2.鼠标可以移动到上面浮 ...
- 如何写一个jquery插件
本文总结整理一下如何写一个jquery插件?虽然现今各种mvvm框架异常火爆,但是jquery这个陪伴我们成长,给我们带来很多帮助的优秀的库不应该被我们抛弃,写此文章,作为对以往欠下的笔记的补充, ...
- 你真的需要一个jQuery插件吗
jQuery的插件提供了一个很好的方法,节省了时间和简化了开发,避免程序员从头开始编写每个组件.但是,插件也将一个不稳定因素引入代码中.一个好的插件节省了无数的开发时间,一个质量不好的插件会导致修复错 ...
随机推荐
- easyUI中datagrid的使用
easyUI中的datagrid数据表格经常被用到,结合项目中的使用情况,总结一下datagrid使用中需要注意的一些问题.使用datagrid展示数据,需要在html.css.js中都要编写代码,h ...
- 【正常向】CODEVS上分黄金
白银上分黄金失败=.= 在之前有很认真的写了一波排序,所以排序并不是很怂,还是那个理,现阶段学习的都是比较简单的排序,都是所谓的冒泡排序啊,桶排序这类,至于插排和选择排序,再往后又是什么快拍就很尬了. ...
- bzoj4800 [Ceoi2015]Ice Hockey World Championship
Description 有n个物品,m块钱,给定每个物品的价格,求买物品的方案数. Input 第一行两个数n,m代表物品数量及钱数 第二行n个数,代表每个物品的价格 n<=40,m<=1 ...
- express4.x的使用
①.安装 npm install -g express ②.创建应用 express [目录] 会在目录下生成 node_modules, 存放所有的项目依赖库.(每个项目管理自己的依赖,与Ma ...
- 基于python的知乎开源爬虫 zhihu_oauth使用介绍
今天在无意之中发现了一个知乎的开源爬虫,是基于Python的,名字叫zhihu_oauth,看了一下在github上面star数还挺多的,貌似文档也挺详细的,于是就稍微研究了一下.发现果然很好用啊.就 ...
- ConcurrentHashMap、HashTable、HashMap的区别
HashTable与ConcurrentHashMap: 相同点:都是线程安全的,可以在多线程的环境下运行.key和value都不能为null 区别:性能上的差异.HashTable每次操作对象都会锁 ...
- Bootstrap Flat UI的select下拉框显示不出来 问题解决
Bootstrap Flat UI的select下拉框显示不出来?看这里,恰巧今天我也遇到了这个问题: 点击Messages后并没有出现下拉列表,然而官网的index.html却能显示出来. 经过一番 ...
- Java AOP (2) runtime weaving 【Java 切面编程 (2) 运行时织入】
接上一篇 Java AOP (1) compile time weaving [Java 切面编程 (1) 编译期织入] Dynamic proxy 动态代理 Befor talking abou ...
- [linux 整理] linux启动过程3
本文介绍linux启动过程的第三步 busybox--------------------> rc init busybox位置即内容 busybox/init/init.c 1.各种设置信号 ...
- 分布式缓存技术redis学习—— 深入理解Spring Redis的使用
关于spring redis框架的使用,网上的例子很多很多.但是在自己最近一段时间的使用中,发现这些教程都是入门教程,包括很多的使用方法,与spring redis丰富的api大相径庭,真是浪费了这么 ...