我的第一个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的插件提供了一个很好的方法,节省了时间和简化了开发,避免程序员从头开始编写每个组件.但是,插件也将一个不稳定因素引入代码中.一个好的插件节省了无数的开发时间,一个质量不好的插件会导致修复错 ...
随机推荐
- [内存管理]linux内存管理 之 内存节点和内存分区
Linux支持多种硬件体系结构,因此Linux必须采用通用的方法来描述内存,以方便对内存进行管理.为此,Linux有了内存节点.内存区.页框的概念,这些概念也是一目了然的. 内存节点:主要依据CPU访 ...
- apache配置多个虚拟目录站点
错误的做法 网上查了几个资料,做法如下:比如想配置两个www.web1.com www.web2.com站点 打开httpd.conf ,然后添加: <VirtualHost *:80> ...
- CKEditor不借助CKFinder实现图片上传(.net版 ashx实现)
参考博客:http://blog.csdn.net/mydwr/article/details/8669594 本人版本:4.4.6 打开文件:ckeditor/plugins/image/dialo ...
- TP5常用命令符操作
ThinkPHP5常用命令符操作 1. 模块自动生成指令: 默认会读取应用目录application下面的build.php作为自动 生成的定义文件,如果你的定义文件位置不同,则需要使用 ...
- 新年伊始,.net菜鸟入院的第一篇随笔
学习.net有半年了,大二一年都是微软校园的负责人,但是因为根本没有系统的学习过编程的知识,所以一直都是活动负责人的身份,忙忙碌碌也没有什么收获,大三一狠心就退了,想能够踏踏实实的敲敲代码,手上的学习 ...
- Numpy的使用
Numpy的主要功能: 可以观察以上的规律,会发现,代码类型的简写,计量都是以8作为起始1的. # -*- coding: utf-8 -*- #向量相加-Python def pythonsum(n ...
- Lamp环境搭建Linux CentOS6.5编译安装mysql5.6
经典web开发组合Lamp环境搭建之mysql安装详解 安装前准备 通过rpm命令检查centos上是否已经安装mysql,然后卸载已经存在的mysql版本 [root@localhost src]# ...
- 使用Nginx实现Tomcat集群负载均衡
概述 要解决的问题 环境准备以及问题解决思路 配置 测试 小结 一.概述 使用Nginx主要是来解决高并发情况下的负载均衡问题. 二.要解决的问题 1.最主要是负载均衡请求分发. 2.文件上传功能,只 ...
- jeesz分布式架构集成阿里云oss存储
1. 服务接口定义 /** * 文件上传 1:头像 2:显示图片 3:个人封面 :4:基础图片 * @param request * @param response * @param ...
- python基础:各种类型的转换
1.str转dict #借助eval,dict str="{"data":"123","result":"ok" ...