自己動(dòng)手開發(fā)jQuery插件教程

更新時(shí)間：2011年08月25日 22:16:53 作者：

首先要了解jQuery插件開發(fā)分兩種，1.類級(jí)別的插件開發(fā)。2.對(duì)象級(jí)別插件開發(fā)。什么? 你居然問什么是類級(jí)別和什么是對(duì)象級(jí)別?

因?yàn)楣ぷ餍枰赃@幾天琢磨了一下關(guān)于jQuery插件開發(fā)的問題，經(jīng)過(guò)一天鏖戰(zhàn)，終于完成自己動(dòng)手做的第一個(gè)jQuery插件，對(duì)于俺這種見了css就頭痛的人來(lái)說(shuō)，一天時(shí)間8小時(shí)，保守估計(jì)有5個(gè)小時(shí)在弄css(我css文盲級(jí)別，形容得還不夠貼切，如果說(shuō)文盲不會(huì)寫字，只會(huì)說(shuō)話，那我是連話都不會(huì)說(shuō)的級(jí)別。)，好了，廢話少說(shuō)，切入正題。

首先要了解jQuery插件開發(fā)分兩種，1.類級(jí)別的插件開發(fā)。2.對(duì)象級(jí)別插件開發(fā)。

什么? 你居然問什么是類級(jí)別和什么是對(duì)象級(jí)別?

類級(jí)別你可以理解為拓展jquery類，最簡(jiǎn)單的$.post(...);

對(duì)象級(jí)別則可以理解為基于對(duì)象的拓展，如$("#Me").fuck(...); 這里這個(gè)fuck呢，就是基于對(duì)象的拓展了。點(diǎn)到即止，想深入的童鞋請(qǐng)花RMB買書Or網(wǎng)上查資料,書上比俺介紹得更清楚。so...Next...

至于您要寫一個(gè)什么東東呢?就輪到前面提到的類級(jí)別和對(duì)象級(jí)別的造型登場(chǎng)了，因?yàn)檫@寫法大千世界無(wú)奇不有，千奇百怪，各有千秋，寫法規(guī)范也不統(tǒng)一，俺就按俺覺得最簡(jiǎn)便的方法寫了，Hava a Look!

復(fù)制代碼代碼如下:

 
<script type="text/javascript"> 
jQuery.msg = function () { 
alert("123"); 
}; 
</script> 
<script type="text/javascript"> 
$(function () { 
$.msg(); 
}); 
</script> 

類級(jí)別寫法：jQuery.插件名稱=function(){.....};
調(diào)用方法：$.插件名稱();
暴露參數(shù)這些東西，先暫時(shí)不提到。一步步來(lái)..
上面這玩意兒呢，彈出對(duì)話框插件，這么說(shuō)，是先理解要緊，什么是插件，什么是類級(jí)別的插件?來(lái)看一下頁(yè)面啟動(dòng)的效果，上圖上真相，你懂的..

來(lái)比較一下對(duì)象級(jí)別插件寫法：Go on!

復(fù)制代碼代碼如下:

 
(function($) { 
$.fn.pluginName = function() { 
// 代碼區(qū)域。 
}; 
})(jQuery); 

對(duì)象級(jí)別寫法：$.fn.插件名稱 = function(){};多了一個(gè)fn,沒錯(cuò)，是fn! fn!!! fn!!!

調(diào)用方法：$("#Me").插件名稱();

稍微說(shuō)一下，$.插件名稱();是通過(guò)$訪問調(diào)用jquery中的全局函數(shù)，直接可以通過(guò)jquery或者美元$調(diào)用，從而實(shí)現(xiàn)一些效果。

$("#Me").插件名稱();是通過(guò)一個(gè)jquery對(duì)象所調(diào)用的一個(gè)函數(shù)，什么? 你居然發(fā)現(xiàn)這個(gè)寫法外面一層多了個(gè)東東? 阿? 你問怎么回事?

The First,我們必須先了解一下閉包這個(gè)玩意兒的造型(框架)，Look!，這就是傳說(shuō)中用來(lái)開發(fā)jQuery插件的東東

復(fù)制代碼代碼如下:

 
（function($){ 
//這里是您寫東東的地方，不收地稅，工商稅，個(gè)人所得稅等..放心大膽使用。 
}）(jQuery); 

(function($){ //這里是您寫東東的地方，不收地稅，工商稅，個(gè)人所得稅等..放心大膽使用。})(jQuery);

這里function 后面的$參數(shù)，形參，在函數(shù)體內(nèi)部的使用呢，$就是當(dāng)前您當(dāng)前整在調(diào)用該函數(shù)的對(duì)象了，這樣就能干很多事了....你懂的。

用一個(gè)tabs面板切換插件來(lái)詳細(xì)演示一下jQuery對(duì)象級(jí)別插件的具體開發(fā),直接上代碼。

首先上HTML：

復(fù)制代碼代碼如下:

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title></title> 
<script src="jquery-1.6.2.min.js" type="text/javascript"></script> 
<script src="jquery.tabs.js" type="text/javascript"></script> 
<link href="tabs.css" rel="stylesheet" type="text/css" /> 
<script type="text/javascript"> 
$(function () { 
$("#mytabs").tabs(); 
}); 
</script> 
</head> 
<body> 
<!--tabs示例--> 
<div id="mytabs"> 
<!--選項(xiàng)卡區(qū)域--> 
<ul> 
<li><a href="#tabs1">選項(xiàng)1</a></li> 
<li><a href="#tabs2">選項(xiàng)2</a></li> 
<li><a href="#tabs3">選項(xiàng)3</a></li> 
</ul> 
<!--面板區(qū)域--> 
<div id="tabs1">11111</div> 
<div id="tabs2">22222</div> 
<div id="tabs3">33333</div> 
</div> 
</body> 
</html> 

再上插件源碼：

/*
tabs面板插件，版本1.0(2011.08.24)
用法：$("#myDiv").tabs({switchingMode:"click"});
參數(shù)解釋：switchingMode是面板切換的模式，如switchingMode:"mouseover"則鼠標(biāo)移動(dòng)至選項(xiàng)卡切換面板,默認(rèn)為click。
整體tabs骨架不變，依然是常用的結(jié)構(gòu)如下：

復(fù)制代碼代碼如下:

 
<div id="tabs"> 
選項(xiàng)卡區(qū)域ul 
<ul> 
<li><a href="#div1">選項(xiàng)1</a></li> 
<li><a href="#div2">選項(xiàng)2</a></li> 
</ul> 
面板區(qū)域div 
<div id="div1">面板1</div> 
<div id="div2">面板2</div> 
</div> 

樣式：此樣式為默認(rèn)無(wú)任何效果樣式，可根據(jù)需要修改插件樣式。

復(fù)制代碼代碼如下:

 
*/ 
; (function ($) { 
$.fn.tabs = function (options) { 
var defualts = { switchingMode: "click" }; 
var opts = $.extend({}, defualts, options); 
var obj = $(this); 
var clickIndex = 0; 
obj.addClass("tabsDiv"); 
$("ul li:first", obj).addClass("tabsSeletedLi"); 
$("ul li", obj).not(":first").addClass("tabsUnSeletedLi"); 
$("div", obj).not(":first").hide(); 
$("ul li", obj).bind(opts.switchingMode, function () { 
if (clickIndex != $("ul li", obj).index($(this))) { 
clickIndex = $("ul li", obj).index($(this)); 
$(".tabsSeletedLi", obj).removeClass("tabsSeletedLi").addClass("tabsUnSeletedLi"); 
$(this).removeClass("tabsUnSeletedLi").addClass("tabsSeletedLi"); 
var divid = $("a", $(this)).attr("href").substr(1); 
$("div", obj).hide(); 
$("#" + divid, obj).show(); 
}; 
}); 
}; 
})(jQuery); 

接下來(lái)上插件樣式：

復(fù)制代碼代碼如下:

 
body{background-color: black;} 
.tabsDiv{width: 500px;height: 350px;margin-top: 0px;margin-left: 0px;} 
.tabsDiv ul{width: 500px;height: 20px;list-style: none;background-color: black;margin-bottom: 0px;margin: 0px;padding: 0px;} 
.tabsDiv div{width: 500px;height: 330px;background-color: white;} 
.tabsSeletedLi{width: 100px;height: 20px;background-color: white;float: left;text-align: center;} 
.tabsSeletedLi a{width: 100px;height: 20px;color: black;} 
.tabsUnSeletedLi{width: 100px;height: 20px;background-color: black;float: left;text-align: center;} 
.tabsUnSeletedLi a{width: 100px;height: 20px;color: white;} 

最終效果圖，你懂的：