Chinaunix首页 | 论坛 | 博客
  • 博客访问: 266468
  • 博文数量: 99
  • 博客积分: 3010
  • 博客等级: 中校
  • 技术积分: 1270
  • 用 户 组: 普通用户
  • 注册时间: 2009-03-20 13:27
文章分类

全部博文(99)

文章存档

2011年(1)

2010年(21)

2009年(77)

我的朋友

分类: Java

2009-04-01 22:11:01

  首先我们先写一个jquery的匿名函数以下为引用的内容:




这是一个最基本的写法 ,还没有做成 插件形式,主要就是让表格隔行换色。

这里我们可以发现 这个函数几乎没有什么通用性,下面我们来对她进行扩展。

 

以下为引用的内容:


$('#cnjquery').alterColor(); 

这样样子有点插件的意思了,但是我们会发现一个问题 这样写,不能链式操作,

也就是 $('#cnjquery').alterColor().find("????")等

为什么呢?因为jquery在执行每个方法的时候 都会返回一个jquery对象 也就是我们只要加一个返回值就可以了


以下为引用的内容:
 


现在我们看到可以链式操作了 到了这里我们的插件算是基本完成了,但是还有一个小小问题

也就是插件的参数都是死的 ,我们没有办法动态修改他的参数,这样应用起来就太不方便了,没有办法还需要继续改造


以下为引用的内容:

$(function(){
  $.fn.alertColor = function(options) {
  var defaults = {
  odd : "red",
  even : "blue"
  };
  var o = $.extend(defaults, options);
  return this.each(function() {
  $('tbody tr:odd', this).removeClass(o.even).addClass(o.odd);
  $('tbody tr:even', this).removeClass(o.odd).addClass(o.even);
  return this;
 }) 
  }

  $('#cnjquery').alertColor({ odd : "cs"});
 // 或者 $('#cnjquery').alertColor({ odd : "red" , even : "blue"});
 // 或者 $('#cnjquery').alertColor();

})





哈哈哈我们的换色表格插件终于完成了,赶快动作做一下吧。

阅读(483) | 评论(0) | 转发(1) |
给主人留下些什么吧!~~