自己動手開發jQuery插件

作者：John.HuJY 2011-08-25 09:30:22

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

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

51CTO推薦專題：jQuery從入門到精通 jQuery給力插件大閱兵

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

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

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

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

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

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

類級別寫法：jQuery.插件名稱=function(){.....};

調用方法：$.插件名稱();

暴露參數這些東西，先暫時不提到。一步步來..

上面這玩意兒呢，彈出對話框插件，這么說，是先理解要緊，什么是插件，什么是類級別的插件?來看一下頁面啟動的效果，上圖上真相，你懂的..

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

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

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

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

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

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

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

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

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

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

用一個tabs面板切換插件來詳細演示一下jQuery對象級別插件的具體開發,直接上代碼。

首先上HTML：

<!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">  
        <!--選項卡區域-->  
        <ul>  
            <li><a href="#tabs1">選項1</a></li>  
            <li><a href="#tabs2">選項2</a></li>  
            <li><a href="#tabs3">選項3</a></li>  
        </ul>  
        <!--面板區域-->  
        <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"});  
參數解釋：switchingMode是面板切換的模式，如switchingMode:"mouseover"則鼠標移動至選項卡切換面板,默認為click。  
整體tabs骨架不變，依然是常用的結構如下：  
<div id="tabs"> 
    選項卡區域ul  
    <ul> 
        <li><a href="#div1">選項1</a></li> 
        <li><a href="#div2">選項2</a></li> 
    </ul> 
    面板區域div  
    <div id="div1">面板1</div> 
    <div id="div2">面板2</div> 
</div> 
 
樣式：此樣式為默認無任何效果樣式，可根據需要修改插件樣式。  
 
*/  
; (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);

接下來上插件樣式：

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

最終效果圖，你懂的：

原文：http://www.cnblogs.com/JohnStart/archive/2011/08/24/jQueryPlugin.html

【編輯推薦】

8月易用jQuery插件推薦:jqPlot畫圖插件
jQuery***實踐
50個必備的實用jQuery代碼段
jQuery是如何工作的
jQuery設計思想

責任編輯：陳貽新來源： John.HuJY

jQuery