jQuery插件的写法
这几天在学习jQuery插件的写法，这里自己总结了一下，并以一个具体的示例来说明jQuery插件的写法。
示例一、
1、概述
先看看html代码
<ul id="catagory">
<li><a href="#">jQuery</a></li>
<li><a href="#">Asp.net</a></li>
<li><a href="#">Sql Server</a></li>
<li><a href="#">CSS</a></li>
</ul>
比如我们要实现当光标移动到a标签上时，a标签向右移动一段距离，离开时a位置恢复。实现方法如下：
$(document).ready(function() {
$("#catagory a").hover(function() {
$(this).animate({ paddingLeft: "20px" }, { queue: false, duration: 500 });
}, function() {
$(this).animate({ paddingLeft: "0" }, { queue: true, duration: 500 });
});
});
现在我们将这个方法进行扩展，写成jQuery插件的形式，以后也能在别的项目中使用，并且可以方便的更改一些属性值，现在我们来看看jQuery插件的写法。
2、jQuery插件的结构
下边这个结构应该是编写jQuery插件的一个比较好的结构，我将原作者的一些注释进行了相应的翻译。
//为避免冲突，将我们的方法用一个匿名方法包裹起来
(function($) {
//扩展这个方法到jquery
$.fn.extend({
//插件名字
pluginname: function() {
//遍历匹配元素的集合
return this.each(function() {
//在这里编写相应代码进行处理
});
}
});
//传递jQuery到方法中，这样我们可以使用任何javascript中的变量来代替"$"
})(jQuery);
3、实现jQuery插件
(function ($) {
$.fn.extend({
//插件名称 - paddingList
paddingList: function (options) {
//参数和默认值
var defaults = {
animatePadding: 10,
hoverColor: "Black"
};
var options = $.extend(defaults, options);
return this.each(function () {
var o = options;
//将元素集合赋给变量 本例中是 ul对象
var obj = $(this);
//得到ul中的a对象
var items = $("li a", obj);
//添加hover()事件到a
items.hover(function () {
$(this).css("color", o.hoverColor);
//queue false表示不添加到动画队列中
$(this).animate({ paddingLeft: o.animatePadding }, { queue: false, duration: 300 });
}, function () {
$(this).css("color", "");
$(this).animate({ paddingLeft: "0" }, { queue: true, duration: 300 });
});
});
}
});
})(jQuery);
最后，使用插件的方法如下：
//使用插件
$(document).ready(function() {
$("#catagory").paddingList({ animatePadding: 30, hoverColor: "Red" });
});
示例二、
html结构:
<ul id="tab_nav"> <li class="current">新闻</li> <li>生活</li> <li>体育</li> <li>抽奖</li> </ul> <div id="tabs"> <div class="tab_items"> 新闻 </div> <div class="tab_items off"> 生活 </div> <div class="tab_items off"> 体育 </div> <div class="tab_items off"> 抽奖 </div> </div>
第二步:
写css代码, 这个在这里就省去了, 具体大家自己可以去写下, 简单. 具体看截图.
第三步:
写js代码了.
大概就分为这三步, 其中第三步是核心. 当然前两步也是很重要的, 结构的好坏会直接影响你的js实现方式.
主结构: //构造函数, 以后每一个tab选项卡的实例都是由他来实例化的. function Tab(){ //some code } //对象原型, 这里主要是一些功能方法. Tab.prototype = { //some code } 用法: new Tab('tab_nav', 'tabs', {可选参数}); //实例一个选项卡, 传入一些参数, 实现一些效果 new Tab('tab_nav2', 'tabs2', {可选参数}); //实例第二个选项卡, 传入一些参数, 实现一些效果 ...
以上就是tab选项卡插件的主结构, 下面我们来具体实现.
js代码:
function Tab(){ this.init.apply(this, arguments); //用init函数初始化对象属性 } Tab.prototype = { init: function(ela, elb, paramObj){ //默认参数设置, triggerClass:当前选项的class名字, type:鼠标事件, delay:这个主要针对mouseover快速划过去的一个延时处理 this.defaultOptions = { triggerClass : 'current', type : 'mouseover', delay : 150 }; this.options = this.extend(this.defaultOptions, paramObj || {}); this.oa = document.getElementById(ela); this.ob = document.getElementById(elb); this.triggerItem = this.oa.children; this.listItem = this.ob.children; this.tLen = this.triggerItem.length; this.arr = []; this.timer = null; this.isIE = !-[1,]; //判断IE浏览器 var self = this; this.options.delay = this.options.type === 'click' ? 0 : this.options.delay; //当type为click时, 就无延时, 反之则延时 //ie下过滤注释节点 if(this.isIE){ for(var i = 0, len = this.listItem.length; i < len; i++){ if(this.listItem[i].nodeType === 1){ this.arr.push(this.listItem[i]); } } } for(var i = 0; i < this.tLen; i++){ this.triggerItem[i]['on' + this.options.type] = this.change(i); //绑定事件 this.triggerItem[i].onmouseout = function(){clearTimeout(self.timer); self.timer = null;}; //绑定事件 } }, extend: function(source, target){ //属性合并处理 for(var p in target){ if(target.hasOwnProperty(p)){ source[p] = target[p]; } } return source; }, trim: function(str){ return str.replace(/^s+/g, "").replace(/s+$/g, ""); }, addClass: function(el, name){ //定义添加class函数, addClass(元素对象, class名字) var arr = [], str = el.className, arr = str.split(/s+/), len = arr.length, name = this.trim(name); for(var i = 0; i < len; i++){ if(arr[i] === name){ return; } } arr.splice(len, 1, name); el.className = this.trim(arr.join(' ')); el = null; }, removeClass: function(el, name){ //定义移除class函数, removeClass(元素对象, class名字) var arr = [], str = el.className, arr = str.split(/s+/), len = arr.length, name = this.trim(name); for(var i = 0; i < len; i++){ if(arr[i] === name){ arr.splice(i,1); el.className=arr.join(' '); return; } } }, change: function(d){ //选项卡实现 var self = this; return function(){ self.timer = setTimeout(function(){ for(var i = 0; i < self.tLen; i++){ if(i === d){ self.addClass(self.triggerItem[d], self.options.triggerClass); self.isIE ? self.arr[d].style.display = 'block' : self.listItem[d].style.display = 'block'; } else{ self.removeClass(self.triggerItem[i], self.options.triggerClass); self.isIE ? self.arr[i].style.display = 'none' : self.listItem[i].style.display = 'none'; } } }, self.options.delay); } } }
用法: new Tab('tab_nav', 'tabs', {type:'click'}); new Tab('tab_nav2', 'tabs2', {triggerClass:'trigger'}); new Tab('tab_nav3', 'tabs3', {type:'mouseover', delay:200});