我的第一个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的插件提供了一个很好的方法,节省了时间和简化了开发,避免程序员从头开始编写每个组件.但是,插件也将一个不稳定因素引入代码中.一个好的插件节省了无数的开发时间,一个质量不好的插件会导致修复错 ...
随机推荐
- 在spring boot环境中使用fastjson + redis的高速缓存技术
因为项目需求,需要在spring boot环境中使用redis作数据缓存.之前的解决方案是参考的http://wiselyman.iteye.com/blog/2184884,具体使用的是Jackso ...
- Asp.NET MVC 之心跳/长连接
0x01 在线用户类,我的用户唯一性由ID和类型识别(因为在不同的表里) public class UserIdentity : IEqualityComparer<UserIdentity&g ...
- [.NET] 《Effective C#》快速笔记(三)- 使用 C# 表达设计
<Effective C#>快速笔记(三)- 使用 C# 表达设计 目录 二十一.限制类型的可见性 二十二.通过定义并实现接口替代继承 二十三.理解接口方法和虚方法的区别 二十四.用委托实 ...
- 详细解剖大型H5单页面应用的核心技术点
项目 Xut.js 阐述下开发中一个比较核心的优化技术点,这是一套平台代码,并非某一个插件功能或者框架可以直接拿来使用,核心代码大概是6万行左右(不包含任何插件) .这也并非一个开源项目,不能商业使用 ...
- Java Socket应用---通信是这样练成的
网络基础简介 Java 中网络相关 API 的应用 Java 中的 InetAddress 的应用 Test01.java package com.imooc; import java.n ...
- Unity SLua 如何调用Unity中C#方法
1.原理 就是通常在Lua框架中所说的,开放一个C#的web接口,或者叫做在Slua框架中注册函数. 2.作用 在Lua中调用C#中的方法,这个是在做热更新中很常用的一种方法,无论是slua,还是lu ...
- 欲练JS,必先攻CSS——前端修行之路(码易直播)
以下是直播大概内容的文字版: 感谢大家今天来到直播间收听本期的码易直播.今天我讲的主题是css,具体聊一下我大概的css学习历史,分享一些干货,希望这次分享对大家有所启发和帮助. 个人的css历史: ...
- Longest Palindromic Substring2015年6月20日
Given a , and there exists one unique longest palindromic substring. 自己的解决方案; public class Solution ...
- 前端架构之路:使用Vue.js开始第一个项目
Vue.js做为目前前端最热门的库之一,为快速构建并开发前端项目多了一种思维模式.本文通过一个简单的实例开始上手Vue.js开发. 一.技术准备 笔者建议在开始项目前,对以下两个技术点进行了解. ...
- How To Configure VMware fencing using fence_vmware_soap in RHEL High Availability Add On(RHEL Pacemaker中配置STONITH)
本文主要简单介绍一下如何在RHEL 7 Pacemaker中配置一个fence_vmware_soap类型的STONITH设备(仅供测试学习). STONITH是Shoot-The-Other-Nod ...