jquery外掛程式豐富，很多都是很好用的，最近學習了一下如何製作jquery外掛程式，發現jquery外掛程式製作其實很簡單，這裡介紹一下。
jquery外掛程式的基本格式：
(function($){$.fn.tab = function(options){//$.fn後面的tab是這個外掛程式的函數名稱。可以更具自己喜好進行修改var defaults = {//相關屬性設定}var options = $.extend(defaults, options);this.each(function(){//實現的功能設定
});};})(jQuery);
我這裡是做一個tab的外掛程式，我來完善以上代碼
(function($){$.fn.tab = function(options){var defaults = {eventname:"click",//觸發事件，click為點擊,mousemove為滑鼠移動titlekeyid:"tabtitle",//切換的IDsedcss:"sed",//選中時的CSSnosedcss:"nosed" //未選中時的CSS}var options = $.extend(defaults, options);this.each(function(){var tab=$(this);//綁定事件$(tab).find("li").bind(options.eventname,function(){$("#"+options.titlekeyid).find("li").attr("class", options.nosedcss);$(this).attr("class", options.sedcss);$("#"+options.titlekeyid+"info").find("div").css("display", "none");$("#"+$(this).attr("id")+"info").css("display", "block");//個人JS能力還是有限，感覺代碼寫的不好});});};})(jQuery);
我想大家都用過一些jquery外掛程式，我這裡看下外掛程式使用時的代碼：
（代碼二）
<script type="text/javascript"> $().ready(function(){ $("#tabtitle").tab({eventname:"mousemove",sedcss:"sed"}); })</script>
結合以上兩段代碼進行說明
$("#tabtitle")表示你要使用在哪個地方，稍微瞭解jquery的童鞋都知道是什麼意思了，不多介紹了，
.tab 就是這個外掛程式我們定義的函數名了，對照（代碼一）中的$.fn.tab中的tab。
.tab({eventname:"mousemove",sedcss:"sed"}); 中eventname和sedcss就是（代碼一）var defaults ={};中定義的屬性值了。如果我們不需要改變屬性值，那麼我們就使用預設的屬性值，那麼外掛程式就應該這樣使用
<script type="text/javascript"> $().ready(function(){ $("#tabtitle").tab(); })</script>
最後附上全部的頁面代碼：
<html> <head> <title>tab test</title><script type="text/javascript" src="jquery.js"></script><script type="text/javascript" src="jquery.joyleetab.js"></script><script type="text/javascript"> $().ready(function(){ $("#tabtitle").tab({eventname:"mousemove",sedcss:"sed"}); })</script> <link href="css.css" rel="stylesheet" type="text/css"> </head> <body> <ul id="tabtitle">//這裡的ID對應$("#tabtitle")中的ID,LI的ID分別是尾部添加數字 <li id="tabtitle1" class="sed">asdfasfd</li><li id="tabtitle2">asdfasfd</li><li id="tabtitle3">asdfasfd</li><li id="tabtitle4">asdfasfd</li><li id="tabtitle5">asdfasfd</li> </ul><div id="tabtitleinfo">//這裡的ID對ul中的ID,ID分別是尾部添加數字和"info"<div id="tabtitle1info" >000000</div><div id="tabtitle2info" style=" display:none">111111</div><div id="tabtitle3info" style=" display:none">22222</div><div id="tabtitle4info" style=" display:none">33333</div><div id="tabtitle5info" style=" display:none">44444</div></div> </body></html>
此文重點在說明jquery外掛程式的製作方法，樣本中代碼還有要最佳化的地方，請見諒
最後附上源碼：http://files.cnblogs.com/joylee/tab.rar
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
