自己動(dòng)手開(kāi)發(fā)jQuery插件
因?yàn)楣ぷ餍枰?，所以這幾天琢磨了一下關(guān)于jQuery插件開(kāi)發(fā)的問(wèn)題，經(jīng)過(guò)一天鏖戰(zhàn)，終于完成自己動(dòng)手做的***個(gè)jQuery插件，對(duì)于俺這種見(jiàn)了css就頭痛的人來(lái)說(shuō)，一天時(shí)間8小時(shí)，保守估計(jì)有5個(gè)小時(shí)在弄css(我css文盲級(jí)別，形容得還不夠貼切，如果說(shuō)文盲不會(huì)寫(xiě)字，只會(huì)說(shuō)話，那我是連話都不會(huì)說(shuō)的級(jí)別。)，好了，廢話少說(shuō)，切入正題。
51CTO推薦專題：jQuery從入門(mén)到精通 jQuery給力插件大閱兵
首先要了解jQuery插件開(kāi)發(fā)分兩種，1.類級(jí)別的插件開(kāi)發(fā)。2.對(duì)象級(jí)別插件開(kāi)發(fā)。
什么? 你居然問(wèn)什么是類級(jí)別和什么是對(duì)象級(jí)別?
類級(jí)別你可以理解為拓展jquery類，最簡(jiǎn)單的$.post(...);
對(duì)象級(jí)別則可以理解為基于對(duì)象的拓展，如$("#Me").fuck(...); 這里這個(gè)fuck呢，就是基于對(duì)象的拓展了。點(diǎn)到即止，想深入的童鞋請(qǐng)花RMB買(mǎi)書(shū)Or網(wǎng)上查資料,書(shū)上比俺介紹得更清楚。so...Next...
至于您要寫(xiě)一個(gè)什么東東呢?就輪到前面提到的類級(jí)別和對(duì)象級(jí)別的造型登場(chǎng)了，因?yàn)檫@寫(xiě)法大千世界無(wú)奇不有，千奇百怪，各有千秋，寫(xiě)法規(guī)范也不統(tǒng)一，俺就按俺覺(jué)得最簡(jiǎn)便的方法寫(xiě)了，Hava a Look!
- <script type="text/javascript">
- jQuery.msg = function () {
- alert("123");
- };
- </script>
- <script type="text/javascript">
- $(function () {
- $.msg();
- });
- </script>
類級(jí)別寫(xiě)法：jQuery.插件名稱=function(){.....};
調(diào)用方法：$.插件名稱();
暴露參數(shù)這些東西，先暫時(shí)不提到。一步步來(lái)..
上面這玩意兒呢，彈出對(duì)話框插件，這么說(shuō)，是先理解要緊，什么是插件，什么是類級(jí)別的插件?來(lái)看一下頁(yè)面啟動(dòng)的效果，上圖上真相，你懂的..
來(lái)比較一下對(duì)象級(jí)別插件寫(xiě)法：Go on!
- (function($) {
- $.fn.pluginName = function() {
- // 代碼區(qū)域。
- };
- })(jQuery);
對(duì)象級(jí)別寫(xiě)法：$.fn.插件名稱 = function(){};多了一個(gè)fn,沒(méi)錯(cuò)，是fn! fn!!! fn!!!
調(diào)用方法：$("#Me").插件名稱();
稍微說(shuō)一下，$.插件名稱();是通過(guò)$訪問(wèn)調(diào)用jquery中的全局函數(shù)，直接可以通過(guò)jquery或者美元$調(diào)用，從而實(shí)現(xiàn)一些效果。
$("#Me").插件名稱();是通過(guò)一個(gè)jquery對(duì)象所調(diào)用的一個(gè)函數(shù)，什么? 你居然發(fā)現(xiàn)這個(gè)寫(xiě)法外面一層多了個(gè)東東? 阿? 你問(wèn)怎么回事?
The First,我們必須先了解一下閉包這個(gè)玩意兒的造型(框架)，Look!，這就是傳說(shuō)中用來(lái)開(kāi)發(fā)jQuery插件的東東
- （function($){
- //這里是您寫(xiě)東東的地方，不收地稅，工商稅，個(gè)人所得稅等..放心大膽使用。
- }）(jQuery);
(function($){ //這里是您寫(xiě)東東的地方，不收地稅，工商稅，個(gè)人所得稅等..放心大膽使用。})(jQuery);
這里function 后面的$參數(shù)，形參，在函數(shù)體內(nèi)部的使用呢，$就是當(dāng)前您當(dāng)前整在調(diào)用該函數(shù)的對(duì)象了，這樣就能干很多事了....你懂的。
用一個(gè)tabs面板切換插件來(lái)詳細(xì)演示一下jQuery對(duì)象級(jí)別插件的具體開(kāi)發(fā),直接上代碼。
首先上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">
- <!--選項(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)如下：
- <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ù)需要修改插件樣式。
- */
- ; (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)上插件樣式：
- 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
【編輯推薦】
