jquery插件的开发
- - CSDN博客推荐文章插件的概念大家并不陌生了，插件可以很方便我们进行代码开发，大大节约了我们的开发时间. 以前我用jquery都是自己洗一大把的代码，复用性不高维护也不方便. 因此自己学着开发了2个简单的jquery插件. 下面先看下jquery插件的分类. jQuery开发分为两种：. 类级别你可以理解为拓展jquery类，最明显的例子是$.ajax(...),相当于静态方法.
jquery插件的开发
标签：
jquery
插件
开发
| 发表时间：2012-05-10 22:24 | 作者：chenwill3
出处：http://blog.csdn.net
插件的概念大家并不陌生了，插件可以很方便我们进行代码开发，大大节约了我们的开发时间。以前我用jquery都是自己洗一大把的代码，复用性不高维护也不方便。因此自己学着开发了2个简单的jquery插件。下面先看下jquery插件的分类
jQuery开发分为两种：
1 类级别
类级别你可以理解为拓展jquery类，最明显的例子是$.ajax(...),相当于静态方法。
开发扩展其方法时使用$.extend方法
2 对象级别
对象级别则可以理解为基于对象的拓展，如$("#table").changeColor(...); 这里这个changeColor呢，就是基于对象的拓展了。
开发扩展其方法时使用$.fn.extend方法
针对这2种插件，我做了2个小例子一个是表格的隔行变色，一个是点击按钮输出一个对话框。其中表格隔行变色应该是最常见的了，开发插件要注意插件的可链性，记得要返回一个this
1.先看个简单的例子，这个例子就是类级别的插件。可以新建一个js文件把下面的代码写进去
$.extend({
showAlert:function(username){
alert("你好,"+username);
}
}); 使用的时候分别引入jquery开发库和这个js
2.表格的隔行变色，这个例子就是对象级别的插件
//插件的编写格式如下,
;(function(){
$.fn.extend({
//插件的方法名称
"beautifultable":function(options){
//设置默认值
options=$.extend({
odd:"odd",
even:"even",
selected:"selected"
},options);
$("tbody>tr:odd",this).addClass(options.odd);
$("tbody>tr:even",this).addClass(options.even);
$("tbody>tr",this).click(function(){
//判断表格的颜色是否是选中状态，这里主要因为表格选中和没选中样式是不同的
var hasSelected=$(this).hasClass(options.selected);
//表格样式的切换
$(this)[hasSelected?"removeClass":"addClass"](options.selected);
});
$("tbody>tr:has(:checked)",this).addClass(options.selected);
return this;
}
});
})(jQuery); 先看下效果图一睹为快吧
下面是全部的代码
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/colortable.js"></script>
<script type="text/javascript" src="js/myalert.js"></script>
<script type="text/javascript">
$(document).ready(function(){
//调用编写好的jquery插件
$("#mytab").beautifultable();
$("#dialog").click(function(){
$.showAlert("乔布斯");
});
});
</script>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>jquery插件的使用</title>
<style type="text/css">
table{
border-collapse: collapse;
}
.odd
{
background-color: #FEB930;
}
.even
{
background-color:#FFDDBB;
}
.selected
{
background-color: #00ff00;
}
</style>
</head>
<body>
<table width="600" border="1" id="mytab">
<thead>
<tr>
<td>选择</td>
<td>学号</td>
<td>姓名</td>
<td>年龄</td>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox" name="son" value="1"/></td>
<td>2899010502</td>
<td>乔布斯</td>
<td>22</td>
</tr>
<tr>
<td><input type="checkbox" name="son" value="2"/></td>
<td>2890901053</td>
<td>乔丹</td>
<td>21</td>
</tr>
<tr>
<td><input type="checkbox" name="son" value="3"/></td>
<td>2789010503</td>
<td>蔡依林</td>
<td>21</td>
</tr>
<tr>
<td><input type="checkbox" name="son" value="4"/></td>
<td>2890901053</td>
<td>郑爽</td>
<td>21</td>
</tr>
<tr>
<td><input type="checkbox" name="son" value="3"/></td>
<td>2599010523</td>
<td>李俊清</td>
<td>21</td>
</tr>
</tbody>
</table><br><br>
<div>
<input type="button" value="你好乔布斯" id="dialog"/>
</div>
</body>
</html> 简单吧，代码我已经上传上去了。如果有什么看不明白的可以给我写评论，我会为大家解答。
作者：chenwill3 发表于2012-5-10 22:24:43 原文链接
阅读：5 评论：0 查看评论
相关 [jquery 插件 开发] 推荐：
js/jQuery插件开发及规范
- - JavaScript - Web前端 - ITeye博客当我们画出了UI之后就可以正式编写jQuery插件代码了，不过在着之前我们还需要对jQuery插件开发的一些规范性有一些了解. 这是来自jQuery官方的插件开发规范要求，使用这种编写方式有什么好处呢. c) 兼容jQuery操作符'$'和'jQuery'. 我们知道这段代码在被解析时会形同如下代码：.
深入理解jQuery插件开发
- - 博客 - 伯乐在线英文原文： Extraordinary Thougths ，编译： 伯乐在线—— 戴嘉华. 如果你看到这篇文章，我确信你毫无疑问会认为jQuery是一个使用简便的库. jQuery可能使用起来很简单，但是它仍然有一些奇怪的地方，对它基本功能和概念不熟悉的人可能会难以掌握. 但是不用担心，我下面已经把代码划分成小部分，做了一个简单的指导.
jquery 插件
- - JavaScript - Web前端 - ITeye博客 jQuery插件的开发包括两种：. 一种是类级别的插件开发，即给jQuery添加新的全局函数，相当于给jQuery类本身添加方法. jQuery的全局函数就是属于jQuery命名空间的函数，另一种是对象级别的插件开发，即给jQuery对象添加方法. 下面就两种函数的开发做详细的说明. 1 、类级别的插件开发.
Web开发者必备的20款超赞jQuery插件
- Frank Cai - CSDN博客推荐文章 jQuery的易扩展性吸引了来自全球的开发者来共同编写jQuery插件. jQuery插件不仅能够增强网站的可用性，有效地改善用户体验，还可以大大减少开发时间. 现在的jQuery插件很多，可以根据您的项目需要来选择. 这里为您介绍20款非常不错的插件. Lettering.js是一个轻量经的、易于使用的jQuery插件，可创造出极具个性的网页排版，是2010年最佳jQuery插件之一.
快速开发 jQuery 插件的 10 大技巧
- - 开源中国社区最新新闻在开发过很多 jQuery 插件以后，我慢慢的摸索出了一套开发jQuery插件比较标准的结构和模式. 这样我就可以 copy & paste 大部分的代码结构，只要专注最主要的逻辑代码就行了. 使用相同的设计模式和架构也让修复bug或者二次开发更容易. 一套经过验证的架构可以保证我的插件不出大的问题，不论插件简单还是复杂.
9 个单页面网站开发必备的 jQuery 插件
- - ITeye资讯频道单页面网站作为简单快捷、易于维护的页面设计方案，越来越受到工作室、作品集或者个人博客类网站用户的青睐，我们可以使用不同的特效来使得页面更加的丰富和炫动. 今天我们将介绍几款可以作为单页面开发的jQuery插件，帮助大家快速简便的实现一个单页面的网站设计，希望大家喜欢. 使用这个插件，可以帮助你快速搭建一个滚动的页面导航，如果你需要比较简单直接的方式开发一个单页面的网站，这个插件是一个不错的选择.
50个WEB开发人员需要的jQuery插件
- - Jackchen Design 1984jQuery插件是很多前端开发人员和网页设计师都会设计的东西. 这些插件大大的缩短了工作时间，调高了设计开发人员的效率. 精力的缩减对于开发人员来说是绝对需要的. 那么除了需要你有好的用户体验的经验还要学会去搜集优秀的插件以备未来使用. 今天我们要分享出来的就是一些非常优秀的jQuery插件. 去了解这些插件带来的体验和便捷.
最佳6款用于移动网站开发的 jQuery 图片滑块插件
- - 博客园_梦想天空 随着智能手机的普及，越来越多的用户喜欢通过手机中浏览网页. 今天这篇文章为大家推荐最佳6款用于移动应用的. jQuery 图片滑块插件，这些插件很好的处理了触屏事件，效果平滑，帮助你构建用户体验良好的移动网站. PhotoSwipe 是一款免费的. jQuery 图片库插件，支持 iPhone, iPad, Android, Blackberry 等各种移动设备.
为设计师和开发者提供的10个超棒 jQuery 插件
- - 开源中国社区最新新闻Zoomooz是一款制作网页元素变焦的jQuery插件，它可以制作像Prezi幻灯片和缩放图片或者其他细节. MediaElement.js不是为现代浏览器提供一个HTML5播放器和为老版本的浏览器提供一个完全独立的Flash播放器的插件，而是升级与自己定义的Flash和Sliverlight插件来模仿HTML5 MediaElement的API.