自定義JQuery插件

創建一個自定義 jQuery 插件

使用您自己的可重用代碼擴展 jQuery 庫

簡介

jQuery 庫是專爲加快 JavaScript 開發速度而設計的。通過簡化編寫 JavaScript 的方式，減少代碼量。使用 jQuery 庫時，您可能會發現您經常爲一些常用函數重寫相同的代碼。如果這樣的話，這可能就是您需要編寫自定義 jQuery 插件的一個原因。

jQuery 插件允許您使用自定義代碼擴展 jQuery 庫；您可以對一些重複性函數使用插件。例如，很多插件可供幻燈片、下拉菜單和摺疊菜單所用。如果您搜索 jQuery 插件，就會發現有大量可用於自己項目的示例（看看它們是如何構建的）。

常用縮略詞

• CSS：層疊樣式表
• HTML：超文本標記語言

在本文中，您將學習如何快速創建一個自定義 jQuery 插件。示例代碼和逐步操作將爲您演示如何創建一個 jQuery accordion 插件。如果您瞭解 jQuery，而且準備讓您的技能再上一個臺階，這篇文章非常適合您。

您可以在此 下載 本文所用的示例源代碼。

先決條件

本文假設您對 JavaScript、jQuery 和層疊樣式表有一個基本瞭解。請參閱 參考資料 瞭解更多有關先決條件的信息。

準備開始

jQuery 是一個可擴展 JavaScript 語言的庫。當您創建一個 jQuery 插件時，本質上是在擴展這個 jQuery 庫。要真正瞭解插件如何擴展 jQuery 庫需要對 JavaScript prototype 屬性有一個基本瞭解。儘管不直接使用，但是 JavaScript prototype 屬性可通過 jQuery 屬性 fn 在後臺使用，這是原生 JavaScript prototype 屬性的一個 jQuery 別名。

要使用 fn 屬性創建一個新 jQuery 插件，只需要爲 fn 屬性分配一個插件名，並將其指向一個充當構造函數的新函數，類似於純 JavaScript。清單 1 中的代碼顯示瞭如何定義一個名爲 accordion 的新 jQuery 插件，其方法是通過使用 jQuery 對象和 fn屬性，並將其分配給一個新的構造函數。

清單 1. 定義一個名爲 accordion 的新 jQuery 插件

1 2 3

jQuery.fn.accordion = function() {   // Add plugin code here };

清單 1 展示了創建 jQuery 插件的一種方法；該示例沒有什麼功能性錯誤。但是，創建一個 jQuery 插件所推薦的方法是，先創建一個允許使用美元符號 ($) 的包裝器函數。在默認情況下，美元符號可能與其他 JavaScript 框架發生衝突，如果將插件包裝在一個函數中，就不會出現衝突。清單 2 中的示例代碼顯示如何將一個包裝器函數應用到一個 jQuery 插件定義中。

清單 2. 在一個包裝器函數中包裝一個名爲 accordion 的新 jQuery 插件

1 2 3 4 5

(function($) {   $.fn.accordion = function() {     // Add plugin code here   }; })(jQuery);

在清單 2 中，jQuery 關鍵字被應用到包裝器函數中，這允許您在插件中使用美元符號，就像使用 fn 屬性時那樣。包裝器函數就緒後，就可以在整個插件的任何地方使用美元符號代替 jQuery 關鍵字，不會干擾其他第三方插件。該選項提供了一種方法使我們可以在開發整個插件中編寫較少的代碼，並且有助於您的插件代碼保持整潔，易於維護。

維護鏈接性

jQuery 的一個優勢是允許您使用任何類型的選擇器。但是，必須記住，您的插件可以處理幾種不同的元素類型。使用 this 關鍵字允許您的插件應用於相關函數，通過循環實現每個元素的訪問，而不考慮元素類型。如果在 each 循環前使用 return 關鍵字，就可以使用您的插件維護鏈接性。清單 3 顯示了分配給一個函數處理程序且與 return 關鍵字相結合的 each 循環。

清單 3. 在 each 循環之前使用 return 關鍵字

1 2 3 4 5 6 7

(function($) {   $.fn.accordion = function() {     return this.each(function() {       // Using return allows for chainability     });   }; })(jQuery);

有了清單 3 的代碼後，示例 accordion 插件可用在一個方法調用鏈中。有了鏈接性（另一個強大的 jQuery 特性），您的插件就可用在一個方法調用鏈中。例如，下面的代碼顯示瞭如何淡出 HTML 元素，並在單一的方法調用鏈中將其從文檔對象模型 (DOM) 中刪除。

1	$("#my-div").fadeOut().remove();

構造一個 accordion

一個典型的層疊設計包括標題欄和相關內容區域。定義列表是一個可供 accordions 使用的很好的 HTML 結構；dt 元素供標題所用，而dd 元素供內容區域所用。清單 4 中的 HTML 結構是一個定義列表，含有四個標題以及相應的內容區域。

清單 4. 單一方法調用鏈

1 2 3 4 5 6 7 8 9 10

<dl class="accordion" id="my-accordion">   <dt>Section 1</dt>     <dd>Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam.</dd>   <dt>Section 2</dt>     <dd>Vestibulum a velit eu ante scelerisque vulputate.</dd>   <dt>Section 3</dt>     <dd>Nam mi. Proin viverra leo ut odio. Curabitur malesuada.</dd>   <dt>Section 4</dt>     <dd>Vivamus nisi metus, molestie vel, gravida in, condimentum sit amet, nunc.</dd> </dl>

清單 4 中定義的列表也有一個分配給它的名爲 accordion 的 CSS 類。沒有應用任何 CSS，這個 accordion 結構看起來類似於圖 1 中的基礎設計。

圖 1. 沒有應用任何 CSS 的 accordion 結構

accordion 類用於將類型應用到整個定義列表、標題和內容區域。在清單 5 的示例中，accordion 類本身應用於寬度、邊框、字體集和字體大小。清單 5 的示例中。您可以修改任何一個正在運行的 CSS 示例以包含您自定義的風格，比如顏色、字體、大小和間距。

清單 5. 用於定義整個定義列表樣式的 accordion CSS 類

1 2 3 4 5 6 7

.accordion {   width: 500px;   border: 1px solid #ccc;   border-bottom: none;   font-family: Arial, Helvetica, sans-serif;   font-size: 12px; }

然後，您可以使用 accordion CSS 類定義標題 (dt) 和內容 (dd) 樣式。標題和內容都包含一個設置底邊框爲 0 的共享樣式，這允許標題欄和內容區域相互適宜地放置，如清單 6 所示。

清單 6. 與 accordion 標題和內容區域相關聯的共享樣式

1 2 3 4 5

.accordion dt, .accordion dd {   border-bottom: 1px solid #ccc;   margin: 0px; }

爲了使 dt 元素看起來更像一個標題欄，設置一個背景色並添加一個指針光標，明顯地呈現給用戶該標題欄是可點擊的。各種其他樣式也都包括在這些類中，比如填充、字體大小和字體粗細。dd 元素添加了填充，將描述與標題隔開一點。清單 7 顯示了一個示例。

清單 7. 與 accordion 標題和內容區域相關的 CSS 類

1 2 3 4 5 6 7 8 9 10

.accordion dt {   background: #eaeaea;   cursor: pointer;   padding: 8px 4px;   font-size: 13px;   font-weight: bold; } .accordion dd {   padding: 12px 8px; }

有了這些增加的 CSS，視覺效果將會更完美、更像 accordion，如圖 2 所示。

圖 2. 一個應用自定義 CSS 的 accordion 結構

自定義您的插件

要製作一個功能性 accordion，必須將自定義代碼應用到您上一小節創建 jQuery 插件的函數。accordion 插件從遍歷所有已定義的 accordion 開始。要定義一個 accordion，在 HTML 文檔或外部嵌入式 JavaScript 文件中使用下列 jQuery。

1	$('dl#my-accordion').accordion();

對於每個 Accordion，您可以使用 jQuery 的 children 方法訪問相關定義的標題，返回一個數組或 dt 元素。應用一個 click事件到 dt 元素，然後一個名爲 reset 方法應用到每個 dt。accordion 首次加載時，該 reset 方法會摺疊所有 dd 元素。單擊 dt 元素或者標題欄時，click 事件會觸發一個名爲 onClick 的自定義方法。自定義 onClick 方法用於查找 accordion 中的所有 dt 元素。它調用一個自定義 hide 方法，該方法通過使用 next 方法找到緊挨着 dt 元素的 dd 元素，隱藏每個相關的 dd 元素，通過使用 next 方法找到緊挨着 dt 元素的 dd 元素，然後向上滑動激活它。

所有 dd 元素被隱藏後，使用 slideDown 方法，就可以看見與單擊過的 dt 元素相關的 dd 元素，並創建一個放大和收縮動畫，如清單 8 所示。onClick 方法的最後一行代碼是 return false，確保任何被點擊的主題欄沒有顯現出其一般行爲。例如，如果您使用一個 anchor 元素作爲標題欄，您可能想要執行 return false，這樣就不會將用戶定向到另一個頁面或現有頁面的一部分。

清單 8. 自定義用於創建一個 jQuery 插件的 accordion 函數

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23

(function($) {   $.fn.accordion = function(options) {     return this.each(function() {       var dts = $(this).children('dt');       dts.click(onClick);       dts.each(reset);     });           function onClick() {       $(this).siblings('dt').each(hide);       $(this).next().slideDown('fast');       return false;     }       function hide() {       $(this).next().slideUp('fast');     }       function reset() {       $(this).next().hide();     }   } })(jQuery);

如果該 accordion 插件與一個 HTML 定義列表結構相關聯時，比如您之前創建的那個 accordion 函數將被應用。有了 accordion 函數，單擊一個標題欄或 dt 元素時，會打開其內容區域，而其他內容區域則關閉。換句話說，一次只能打開一個內容區域。

Defaults 和 options

jQuery 插件可以包括 defaults 和 options。Options 本質上就是傳遞給插件的參數。可以使用 options 發送一個參數作爲 object literal，這是一個標準 jQuery 實踐，而不需要傳遞多個參數。如果您的插件支持 options，使用 defaults 對象設置默認的 options 將是一個最佳方式。和 options 一樣，defaults 是一個 object literal，應該包括您想要傳遞到插件中的屬性。

例如，如果您支持一個可用於在首次加載時打開 accordion 第一個內容區域的屬性，那麼在您的插件中應該包括一個 open 屬性的默認值。在您的插件中使用 defaults 確定默認函數，使用 options 覆蓋默認值。如果插件接收 options，可以使用 $.extend 方法執行覆蓋。jQuery 的 $.extend 方法合併兩個或多個對象。清單 9 中的示例顯示在一個自定義 jQuery 插件中使用 $.extend 方法合併用戶定義選項和默認選項的一般實現。

清單 9. 向一個自定義的 accordion jQuery 插件添加 options 和 defaults

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25

(function($) {   $.fn.accordion = function(options) {     var settings = $.extend({}, {open: false}, options);     return this.each(function() {       var dts = $(this).children('dt');       dts.click(onClick);       dts.each(reset);       if(settings.open) $(this).children('dt:first-child').next().show();     });           function onClick() {       $(this).siblings('dt').each(hide);       $(this).next().slideDown('fast');       return false;     }       function hide() {       $(this).next().slideUp('fast');     }       function reset() {       $(this).next().hide();     }   } })(jQuery);

$.extend 方法參數是一個目標對象和 2 個或多個合併對象。在本示例中，目標對象是一個空 object literal，充當合併對象容器。目標將成爲一個包含合併對象值的單一對象（在該案例中是 settings 變量）。第 2 個參數是一個包含默認插件屬性的 object literal。第 3 個參數是用戶定義的 options 參數。要在一個 HTML 元素上使用 accordion 插件傳遞 options，需要知道除了之前您作爲 object literal 傳遞的屬性外還有哪些屬性，如下所示。

1	$('dl#my-accordion').accordion({open:true});

在清單 9 示例中，傳遞到插件的 options 通過 $.extend 方法覆蓋 defaults。如果沒有傳遞 options，則使用默認值。對於示例插件，可使用 open 屬性確定加載時是否打開第一個內容區域。

可重用性

您可以在任何 HTML 文檔中重用示例 accordion 插件，可以在單個 HTML 文檔中多次使用。您也可以包括多個 accordion 結構，就像已創建的那個 accordion，使用剛創建的新 accordion 插件通過 jQuery 將每個單獨定義爲 accordion。要向一個 HTML 文檔添加多個 accordion，只需要添加儘可能多的 accordion 結構。清單 10 中的代碼包括兩個 accordion 結構，由一個段落隔開。

清單 10. 在同一個 HTML 文檔中使用多個 accordion

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

<dl class="accordion" id="my-accordion">   <dt>Section 1</dt>   <dd>Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam.</dd>   <dt>Section 2</dt>   <dd>Vestibulum a velit eu ante scelerisque vulputate.</dd>   <dt>Section 3</dt>   <dd>Nam mi. Proin viverra leo ut odio. Curabitur malesuada.</dd>   <dt>Section 4</dt>   <dd>Vivamus nisi metus, molestie vel, gravida in, condimentum sit amet, nunc.</dd> </dl>   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>   <dl class="accordion" id="my-accordion2">   <dt>Section 1</dt>   <dd>Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam.</dd>   <dt>Section 2</dt>   <dd>Vestibulum a velit eu ante scelerisque vulputate.</dd> </dl>

清單 10 中的兩個 accordion 結構幾乎一樣，除了內容不一樣外，更重要的是 ID 值也不一樣。第一個結構包含一個 my-accordion ID 值。第 2 個結構包含一個 my-accordion2 ID 值。現在可以單獨定向這些結構。例如，下列 jQuery 腳本使用已創建的新插件將每個 accordion 結構定義爲一個 accordion。

1 2	$('dl#my-accordion').accordion({open:true}); $('dl#my-accordion2').accordion({open:true});

兩個 accordion 結構定義完成後，第一個面板默認設置爲打開，圖 3 顯示一個用在同一個 HTML 文檔的多個 accordion 插件的示例。

圖 3. 用在同一個 HTML 文檔的多個 accordion 結構

組合在一起

在創建新定製的 jQuery accordion 插件，編寫 CSS，並放置好 HTML 標記之後，您就可以將它們組合起來放在一個最終的 Web 頁面中。要使 jQuery accordion 插件正常運行，必須嵌入 jQuery 庫。我更傾向於使用 Content Delivery Network (CDN)，根據用戶地理位置分發庫，以最快的方式交付文件。Google 在其自身的 CDN 中包括 jQuery 庫，您可以使用 URL https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js 將文件嵌入到您的 Web 頁面中。

該庫的其他版本也是可用的。請參閱 參考資料 中有關 Google 開發人員網站上獲取這些庫的鏈接。其他文件中，只有那些需要在您 HTML 文檔中引用的文件是 CSS 文件，設計成 accordion 和 jQuery accordion 插件樣式。在此之後，實際 accordion 結構的 HTML 標記將被轉換。清單 11 顯示了一個示例。

清單 11. 將兩個 accordion 結構定義爲 jQuery accordion

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42

<!DOCTYPE HTML> <html> <head>   <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">   <title>Creating a Custom jQuery Plugin</title>   <link type="text/css" rel="stylesheet" href="jquery.accordion.css" />   <script type="text/javascript"   src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js">   </script>   <script type="text/javascript" src="jquery.accordion.js"></script>   <script type="text/javascript">   $(document).ready(function() {     $('dl#my-accordion').accordion({open:true});     $('dl#my-accordion2').accordion({open:true}); }); </script> </head>   <body>   <dl class="accordion" id="my-accordion">   <dt>Section 1</dt>   <dd>Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam.</dd>   <dt>Section 2</dt>   <dd>Vestibulum a velit eu ante scelerisque vulputate.</dd>   <dt>Section 3</dt>   <dd>Nam mi. Proin viverra leo ut odio. Curabitur malesuada.</dd>   <dt>Section 4</dt>   <dd>Vivamus nisi metus, molestie vel, gravida in, condimentum sit amet, nunc.</dd> </dl>   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>   <dl class="accordion" id="my-accordion2">   <dt>Section 1</dt>   <dd>Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam.</dd>   <dt>Section 2</dt>   <dd>Vestibulum a velit eu ante scelerisque vulputate.</dd> </dl>   </body> </html>

結束語

在本文中，您已瞭解到創建一個自定義 jQuery 插件非常容易。您創建的任何可重複函數都可以迅速轉化成一個插件，從而加快開發速度並提高開發效率。可重用性是任何插件的關鍵，可重用性意味着生產率的提高。