自己動手開發jQuery插件教程
編輯：JQuery特效代碼
因為工作需要，所以這幾天琢磨了一下關於jQuery插件開發的問題，經過一天鏖戰，終於完成自己動手做的第一個jQuery插件，對於俺這種見了css就頭痛的人來說，一天時間8小時，保守估計有5個小時在弄css(我css文盲級別，形容得還不夠貼切，如果說文盲不會寫字，只會說話，那我是連話都不會說的級別。)，好了，廢話少說，切入正題。
首先要了解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(){.....};
調用方法：$.插件名稱();
暴露參數這些東西，先暫時不提到。一步步來..
上面這玩意兒呢，彈出對話框插件，這麼說，是先理解要緊，什麼是插件，什麼是類級別的插件?來看一下頁面啟動的效果，上圖上真相，你懂的..
代碼如下:
(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;}
最終效果圖，你懂的：
首先要了解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(){.....};
調用方法：$.插件名稱();
暴露參數這些東西，先暫時不提到。一步步來..
上面這玩意兒呢，彈出對話框插件，這麼說，是先理解要緊，什麼是插件，什麼是類級別的插件?來看一下頁面啟動的效果，上圖上真相，你懂的..
代碼如下:
(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;}
最終效果圖，你懂的：
小編推薦
熱門推薦