快捷導(dǎo)航

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

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

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

因為工作需要，所以這幾天琢磨了一下關(guān)于jQuery插件開發(fā)的問題，經(jīng)過一天鏖戰(zhàn)，終于完成自己動手做的第一個jQuery插件，對于俺這種見了css就頭痛的人來說，一天時間8小時，保守估計有5個小時在弄css(我css文盲級別，形容得還不夠貼切，如果說文盲不會寫字，只會說話，那我是連話都不會說的級別。)，好了，廢話少說，切入正題。

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

什么? 你居然問什么是類級別和什么是對象級別?

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

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

至于您要寫一個什么東東呢?就輪到前面提到的類級別和對象級別的造型登場了，因為這寫法大千世界無奇不有，千奇百怪，各有千秋，寫法規(guī)范也不統(tǒng)一，俺就按俺覺得最簡便的方法寫了，Hava a Look!

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

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

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

來比較一下對象級別插件寫法：Go on!

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

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

對象級別寫法：$.fn.插件名稱 = function(){};多了一個fn,沒錯，是fn! fn!!! fn!!!

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

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

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

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

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

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

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

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

用一個tabs面板切換插件來詳細演示一下jQuery對象級別插件的具體開發(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"> 
<!--選項卡區(qū)域--> 
<ul> 
<li><a href="#tabs1">選項1</a></li> 
<li><a href="#tabs2">選項2</a></li> 
<li><a href="#tabs3">選項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"則鼠標移動至選項卡切換面板,默認為click。
整體tabs骨架不變，依然是常用的結(jié)構(gòu)如下：

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

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

樣式：此樣式為默認無任何效果樣式，可根據(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); 

接下來上插件樣式：

復(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;} 

最終效果圖，你懂的：