如何創(chuàng)建一個(gè)自定義jquery插件

jQuery 庫是專為加快 JavaScript 開發(fā)速度而設(shè)計(jì)的。通過簡化編寫 JavaScript 的方式，減少代碼量。使用

目前創(chuàng)新互聯(lián)建站已為超過千家的企業(yè)提供了網(wǎng)站建設(shè)、域名、網(wǎng)站空間、成都網(wǎng)站托管、企業(yè)網(wǎng)站設(shè)計(jì)、吉木乃網(wǎng)站維護(hù)等服務(wù)，公司將堅(jiān)持客戶導(dǎo)向、應(yīng)用為本的策略，正道將秉承"和諧、參與、激情"的文化，與客戶和合作伙伴齊心協(xié)力一起成長，共同發(fā)展。

jQuery 庫時(shí)，您可能會(huì)發(fā)現(xiàn)您經(jīng)常為一些常用函數(shù)重寫相同的代碼。如果這樣的話，這可能就是您需要編寫自定義 jQuery 插件的一個(gè)原因。

jQuery 插件允許您使用自定義代碼擴(kuò)展 jQuery 庫；您可以對一些重復(fù)性函數(shù)使用插件。例如，很多插件可供幻燈片、下拉菜單和折疊菜單所用。如果您搜索 jQuery 插件，就會(huì)發(fā)現(xiàn)有大量可用于自己項(xiàng)目的示例（看看它們是如何構(gòu)建的）。

準(zhǔn)備工作

對JavaScript、jQuery 和CSS有一個(gè)基本了解。（用到的源代碼及示例在本文最下方）

開始

jQuery 是一個(gè)可擴(kuò)展 JavaScript 語言的庫。當(dāng)您創(chuàng)建一個(gè) jQuery 插件時(shí)，本質(zhì)上是在擴(kuò)展這個(gè) jQuery

庫。要真正了解插件如何擴(kuò)展 jQuery 庫需要對 JavaScript prototype 屬性有一個(gè)基本了解。盡管不直接使用，但是

JavaScript prototype 屬性可通過 jQuery 屬性 fn 在后臺使用，這是原生 JavaScript prototype

屬性的一個(gè) jQuery 別名。

要使用 fn 屬性創(chuàng)建一個(gè)新 jQuery 插件，只需要為 fn 屬性分配一個(gè)插件名，并將其指向一個(gè)充當(dāng)構(gòu)造函數(shù)的新函數(shù)，類似于純

JavaScript。Code 1顯示了如何定義一個(gè)名為 accordion 的新 jQuery 插件，其方法是通過使用 jQuery 對象和

fn 屬性，并將其分配給一個(gè)新的構(gòu)造函數(shù)。

Code 1：定義一個(gè)名為 accordion 的新 jQuery 插件

jQuery.fn.accordion = function() {

// 在這里添加插件代碼

};

Code 1 展示了創(chuàng)建 jQuery 插件的一種方法；該示例沒有什么功能性錯(cuò)誤。但是，創(chuàng)建一個(gè) jQuery

插件所推薦的方法是，先創(chuàng)建一個(gè)允許使用美元符號 ($) 的包裝器函數(shù)。在默認(rèn)情況下，美元符號可能與其他 JavaScript

框架發(fā)生沖突，如果將插件包裝在一個(gè)函數(shù)中，就不會(huì)出現(xiàn)沖突。Code 2 中的示例代碼顯示如何將一個(gè)包裝器函數(shù)應(yīng)用到一個(gè) jQuery

插件定義中。

(function($) {

$.fn.accordion = function() {

// 在這里添加插件代碼

};

})(jQuery);

在Code 2 中，jQuery 關(guān)鍵字被應(yīng)用到包裝器函數(shù)中，這允許您在插件中使用美元符號，就像使用 fn

屬性時(shí)那樣。包裝器函數(shù)就緒后，就可以在整個(gè)插件的任何地方使用美元符號代替 jQuery

關(guān)鍵字，不會(huì)干擾其他第三方插件。該選項(xiàng)提供了一種方法使我們可以在開發(fā)整個(gè)插件中編寫較少的代碼，并且有助于您的插件代碼保持整潔，易于維護(hù)。

維護(hù)鏈接性

jQuery 的一個(gè)優(yōu)勢是允許您使用任何類型的選擇器。但是，必須記住，您的插件可以處理幾種不同的元素類型。使用 this

關(guān)鍵字允許您的插件應(yīng)用于相關(guān)函數(shù)，通過循環(huán)實(shí)現(xiàn)每個(gè)元素的訪問，而不考慮元素類型。如果在 each 循環(huán)前使用 return

關(guān)鍵字，就可以使用您的插件維護(hù)鏈接性。清單 3 顯示了分配給一個(gè)函數(shù)處理程序且與 return 關(guān)鍵字相結(jié)合的 each 循環(huán)。

code 3. 在 each 循環(huán)之前使用 return 關(guān)鍵字

(function($) {

$.fn.accordion = function() {

return this.each(function() {

// 使用 return

});

};

})(jQuery);

有了Code 3 的代碼后，示例 accordion 插件可用在一個(gè)方法調(diào)用鏈中。有了鏈接性（另一個(gè)強(qiáng)大的 jQuery

特性），您的插件就可用在一個(gè)方法調(diào)用鏈中。例如，下面的代碼顯示了如何淡出 HTML 元素，并在單一的方法調(diào)用鏈中將其從文檔對象模型 (DOM)

中刪除。

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

構(gòu)造一個(gè) accordion

一個(gè)典型的層疊設(shè)計(jì)包括標(biāo)題欄和相關(guān)內(nèi)容區(qū)域。定義列表是一個(gè)可供 accordions 使用的很好的 HTML 結(jié)構(gòu)；dt 元素供標(biāo)題所用，而dd 元素供內(nèi)容區(qū)域所用。清單 4 中的 HTML 結(jié)構(gòu)是一個(gè)定義列表，含有四個(gè)標(biāo)題以及相應(yīng)的內(nèi)容區(qū)域。

Code 4. 單一方法調(diào)用鏈

dl class="accordion" id="my-accordion"

dt第1部分/dt

dd內(nèi)容一/dd

dt第2部分/dt

dd內(nèi)容二/dd

dt第3部分/dt

dd內(nèi)容三/dd

dt第4部分/dt

dd內(nèi)容四/dd

/dl

Code 4 中定義的列表也有一個(gè)分配給它的名為 accordion 的 CSS 類。沒有應(yīng)用任何 CSS，這個(gè) accordion 結(jié)構(gòu)看起來類似于圖 1 中的基礎(chǔ)設(shè)計(jì)

為了美觀，我們再給Code 4中的Html美化一下，并命名為“jquery.accordion.css”

Code 5. CSS部分

.accordion {

width: 500px;

border: 1px solid #ccc;

border-bottom: none;

font-family: Arial, Helvetica, sans-serif;

font-size: 12px;

}

.accordion dt,

.accordion dd {

border-bottom: 1px solid #ccc;

margin: 0px;

}

.accordion dt {

background: #eaeaea;

cursor: pointer;

padding: 8px 4px;

font-size: 13px;

font-weight: bold;

}

.accordion dd {

padding: 12px 8px;

}

效果如下圖：

自定義插件

要制作一個(gè)功能性 accordion，必須將自定義代碼應(yīng)用到您上一小節(jié)創(chuàng)建 jQuery 插件的函數(shù)。accordion

插件從遍歷所有已定義的 accordion 開始。要定義一個(gè) accordion，在 HTML 文檔或外部嵌入式 JavaScript

文件中使用下列 jQuery。

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

對于每個(gè) Accordion，您可以使用 jQuery 的 children 方法訪問相關(guān)定義的標(biāo)題，返回一個(gè)數(shù)組或 dt 元素。應(yīng)用一個(gè)

click 事件到 dt 元素，然后一個(gè)名為 reset 方法應(yīng)用到每個(gè) dt。accordion 首次加載時(shí)，該 reset 方法會(huì)折疊所有

dd 元素。單擊 dt 元素或者標(biāo)題欄時(shí)，click 事件會(huì)觸發(fā)一個(gè)名為 onClick 的自定義方法。自定義 onClick 方法用于查找

accordion 中的所有 dt 元素。它調(diào)用一個(gè)自定義 hide 方法，該方法通過使用 next 方法找到緊挨著 dt 元素的 dd

元素，隱藏每個(gè)相關(guān)的 dd 元素，通過使用 next 方法找到緊挨著 dt 元素的 dd 元素，然后向上滑動(dòng)激活它。

所有 dd 元素被隱藏后，使用 slideDown 方法，就可以看見與單擊過的 dt 元素相關(guān)的 dd 元素，并創(chuàng)建一個(gè)放大和收縮動(dòng)畫，如清單 8

所示。onClick 方法的最后一行代碼是 return false，確保任何被點(diǎn)擊的主題欄沒有顯現(xiàn)出其一般行為。例如，如果您使用一個(gè)

anchor 元素作為標(biāo)題欄，您可能想要執(zhí)行 return false，這樣就不會(huì)將用戶定向到另一個(gè)頁面或現(xiàn)有頁面的一部分。

Code 6. 自定義用于創(chuàng)建一個(gè) jQuery 插件的 accordion 函數(shù)

(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 插件與一個(gè) HTML 定義列表結(jié)構(gòu)相關(guān)聯(lián)時(shí)，比如您之前創(chuàng)建的那個(gè) accordion 函數(shù)將被應(yīng)用。有了

accordion 函數(shù)，單擊一個(gè)標(biāo)題欄或 dt 元素時(shí)，會(huì)打開其內(nèi)容區(qū)域，而其他內(nèi)容區(qū)域則關(guān)閉。換句話說，一次只能打開一個(gè)內(nèi)容區(qū)域。

設(shè)定插件的默認(rèn)值（Defaults）和設(shè)置項(xiàng)（options）

jQuery 插件可以包括 defaults 和 options。Options 本質(zhì)上就是傳遞給插件的參數(shù)。可以使用 options

發(fā)送一個(gè)參數(shù)作為 object literal，這是一個(gè)標(biāo)準(zhǔn) jQuery 實(shí)踐，而不需要傳遞多個(gè)參數(shù)。如果您的插件支持 options，使用

defaults 對象設(shè)置默認(rèn)的 options 將是一個(gè)最佳方式。和 options 一樣，defaults 是一個(gè) object

literal，應(yīng)該包括您想要傳遞到插件中的屬性。

例如，如果您支持一個(gè)可用于在首次加載時(shí)打開 accordion 第一個(gè)內(nèi)容區(qū)域的屬性，那么在您的插件中應(yīng)該包括一個(gè) open

屬性的默認(rèn)值。在您的插件中使用 defaults 確定默認(rèn)函數(shù)，使用 options 覆蓋默認(rèn)值。如果插件接收 options，可以使用

$.extend 方法執(zhí)行覆蓋。jQuery 的 $.extend 方法合并兩個(gè)或多個(gè)對象。Code 7 中的示例顯示在一個(gè)自定義 jQuery

插件中使用 $.extend 方法合并用戶定義選項(xiàng)和默認(rèn)選項(xiàng)的一般實(shí)現(xiàn)。

Code 7. 向一個(gè)自定義的 accordion jQuery 插件添加 options 和 defaults

(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 方法參數(shù)是一個(gè)目標(biāo)對象和 2 個(gè)或多個(gè)合并對象。在本示例中，目標(biāo)對象是一個(gè)空 object

literal，充當(dāng)合并對象容器。目標(biāo)將成為一個(gè)包含合并對象值的單一對象（在該案例中是 settings 變量）。第 2

個(gè)參數(shù)是一個(gè)包含默認(rèn)插件屬性的 object literal。第 3 個(gè)參數(shù)是用戶定義的 options 參數(shù)。要在一個(gè) HTML 元素上使用

accordion 插件傳遞 options，需要知道除了之前您作為 object literal 傳遞的屬性外還有哪些屬性，如下所示。

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

在Code 7 示例中，傳遞到插件的 options 通過 $.extend 方法覆蓋 defaults。如果沒有傳遞 options，則使用默認(rèn)值。對于示例插件，可使用 open 屬性確定加載時(shí)是否打開第一個(gè)內(nèi)容區(qū)域。

可重用性

您可以在任何 HTML 文檔中重用示例 accordion 插件，可以在單個(gè) HTML 文檔中多次使用。您也可以包括多個(gè)

accordion 結(jié)構(gòu)，就像已創(chuàng)建的那個(gè) accordion，使用剛創(chuàng)建的新 accordion 插件通過 jQuery 將每個(gè)單獨(dú)定義為

accordion。要向一個(gè) HTML 文檔添加多個(gè) accordion，只需要添加盡可能多的 accordion 結(jié)構(gòu)。Code 8

中的代碼包括兩個(gè) accordion 結(jié)構(gòu)，由一個(gè)段落隔開。

Code 8. 在同一個(gè) HTML 文檔中使用多個(gè) accordion

dl class="accordion" id="my-accordion"

dt第1部分/dt

dd內(nèi)容一/dd

dt第2部分/dt

dd內(nèi)容二/dd

dt第3部分/dt

dd內(nèi)容三/dd

dt第4部分/dt

dd內(nèi)容四/dd

/dl

dl class="accordion" id="my-accordion"

dt第5部分/dt

dd內(nèi)容五d

dt第6部分/dt

dd內(nèi)容六dd

dt第7部分/dt

dd內(nèi)容七/dd

/dl

Code 8 中的兩個(gè) accordion 結(jié)構(gòu)幾乎一樣，除了內(nèi)容不一樣外，更重要的是 ID 值也不一樣。第一個(gè)結(jié)構(gòu)包含一個(gè)

my-accordion ID 值。第 2 個(gè)結(jié)構(gòu)包含一個(gè) my-accordion2 ID 值?，F(xiàn)在可以單獨(dú)定向這些結(jié)構(gòu)。例如，下列

jQuery 腳本使用已創(chuàng)建的新插件將每個(gè) accordion 結(jié)構(gòu)定義為一個(gè) accordion。

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

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

兩個(gè) accordion 結(jié)構(gòu)定義完成后，第一個(gè)面板默認(rèn)設(shè)置為打開下圖 顯示一個(gè)用在同一個(gè) HTML 文檔的多個(gè) accordion 插件的示例。

jquery有哪些插件？

//200多個(gè)插件如下?實(shí)際開發(fā)中?請選擇合適的使用

1：文件上傳類jQuery插件

Ajax?File?Upload.

jQUploader.

Multiple?File?Upload?plugin.

jQuery?File?Style.

Styling?an?input?type?file.

Progress?Bar?Plugin.

2：表單驗(yàn)證類jQuery插件

jQuery?Validation.

Auto?Help.

Simple?jQuery?form?validation.

jQuery?XAV?–?form?validations.

jQuery?AlphaNumeric.

Masked?Input.

TypeWatch?Plugin.

Text?limiter?for?form?fields.

Ajax?Username?Check?with?jQuery.

3:表單選擇框類jQuery插件

jQuery?Combobox.

jQuery?controlled?dependent?(or?Cascadign)?Select?List.

Multiple?Selects.

Select?box?manipulation.

Select?Combo?Plugin.

jQuery?–?LinkedSelect

Auto-populate?multiple?select?boxes.

Choose?Plugin?(Select?Replacement).

4:表單基本、輸入框、選擇框等jQuery插件

jQuery?Form?Plugin.

jQuery-Form.

jLook?Nice?Forms.

jNice.

Ping?Plugin.

Toggle?Form?Text.

ToggleVal.

jQuery?Field?Plugin.

jQuery?Form’n?Field?plugin.

jQuery?Checkbox?manipulation.

jTagging.

jQuery?labelcheck.

Overlabel.

3?state?radio?buttons.

ShiftCheckbox?jQuery?Plugin.

Watermark?Input.

jQuery?Checkbox?(checkboxes?with?imags).

jQuery?SpinButton?Control.

jQuery?Ajax?Form?Builder.

jQuery?Focus?Fields.

jQuery?Time?Entry.

5:時(shí)間、日期和顏色選取類jQuery插件

jQuery?UI?Datepicker.

jQuery?date?picker?plugin.

jQuery?Time?Picker.

Time?Picker.

ClickPick.

TimePicker.

Farbtastic?jQuery?Color?Picker?Plugin.

Color?Picker?by?intelliance.fr.

6:投票類jQuery插件

jQuery?Star?Rating?Plugin.

jQuery?Star?Rater.

Content?rater?with?asp.net,?ajax?and?jQuery.

Half-Star?Rating?Plugin.

7:搜索類jQuery插件

jQuery?Suggest.

jQuery?Autocomplete.

jQuery?Autocomplete?Mod.

jQuery?Autocomplete?by?AjaxDaddy.

jQuery?Autocomplete?Plugin?with?HTML?formatting.

jQuery?Autocompleter.

AutoCompleter?(Tutorial?with?PHPMySQL).

quick?Search?jQuery?Plugin.

8:jQuery編輯器插件

jTagEditor.

WYMeditor.

jQuery?jFrame.

Jeditable?–?edit?in?place?plugin?for?jQuery.

jQuery?editable.

jQuery?Disable?Text?Select?Plugin.

Edit?in?Place?with?Ajax?using?jQuery.

jQuery?Plugin?–?Another?In-Place?Editor.

TableEditor.

tEditable?–?in?place?table?editing?for?jQuery.

9:多媒體、視頻、Flash等類jQuery插件

jMedia?–?accessible?multi-media?embedding.

JBEdit?–?Ajax?online?Video?Editor.

jQuery?MP3?Plugin.

jQuery?Media?Plugin.

jQuery?Flash?Plugin.

Embed?QuickTime.

SVG?Integration.

圖片類jQuery插件

ThickBox.

jQuery?lightBox?plugin.

jQuery?Image?Strip.

jQuery?slideViewer.

jQuery?jqGalScroll?2.0.

jQuery?–?jqGalViewII.

jQuery?–?jqGalViewIII.

jQuery?Photo?Slider.

jQuery?Thumbs?–?easily?create?thumbnails.

jQuery?jQIR?Image?Replacement.

jCarousel?Lite.

jQPanView.

jCarousel.

Interface?Imagebox.

Image?Gallery?using?jQuery,?Interface??Reflactions.

simple?jQuery?Gallery.

jQuery?Gallery?Module.

EO?Gallery.

jQuery?ScrollShow.

jQuery?Cycle?Plugin.

jQuery?Flickr.

jQuery?Lazy?Load?Images?Plugin.

Zoomi?–?Zoomable?Thumbnails.

jQuery?Crop?–?crop?any?image?on?the?fly.

Image?Reflection.

10:Google地圖類jQuery插件應(yīng)用

jQuery?Plugin?googlemaps.

jMaps?jQuery?Maps?Framework.

jQmaps.

jQuery??Google?Maps.

jQuery?Maps?Interface?forr?Google?and?Yahoo?maps.

jQuery?J?Maps?–?by?Tane?Piper.

11:游戲類jQuery插件

Tetris?with?jQuery.

jQuery?Chess.

Mad?Libs?Word?Game.

jQuery?Puzzle.

jQuery?Solar?System?(not?a?game?but?awesome?jQuery?Stuff).

12:表格,網(wǎng)格類jQuery插件

UI/Tablesorter.

jQuery?ingrid.

jQuery?Grid?Plugin.

Table?Filter?–?awesome!.

TableEditor.

jQuery?Tree?Tables.

Expandable?“Detail”?Table?Rows.

Sortable?Table?ColdFusion?Costum?Tag?with?jQuery?UI.

jQuery?Bubble.

TableSorter.

Scrollable?HTML?Table.

jQuery?column?Manager?Plugin.

jQuery?tableHover?Plugin.

jQuery?columnHover?Plugin.

jQuery?Grid.

TableSorter?plugin?for?jQuery.

tEditable?–?in?place?table?editing?for?jQuery.

jQuery?charToTable?Plugin.

jQuery?Grid?Column?Sizing.

jQuery?Grid?Row?Sizing.

13:統(tǒng)計(jì)類jQuery插件

jQuery?Wizard?Plugin?.

jQuery?Chart?Plugin.

Bar?Chart.

14:邊框、圓角、背景類jQuery插件

jQuery?Corner.

jQuery?Curvy?Corner.

Nifty?jQuery?Corner.

Transparent?Corners.

jQuery?Corner?Gallery.

Gradient?Plugin.

14:文字和超鏈接類jQuery插件

jQuery?Spoiler?plugin.

Text?Highlighting.

Disable?Text?Select?Plugin.

jQuery?Newsticker.

Auto?line-height?Plugin.

Textgrad?–?a?text?gradient?plugin.

LinkLook?–?a?link?thumbnail?preview.

pager?jQuery?Plugin.

shortKeys?jQuery?Plugin.

jQuery?Biggerlink.

jQuery?Ajax?Link?Checker.

15:文本提示類jQuery插件

jQuery?Plugin?–?Tooltip.

jTip?–?The?jQuery?Tool?Tip.

clueTip.

BetterTip.

Flash?Tooltips?using?jQuery.

ToolTip.

16:菜單和導(dǎo)航類jQuery插件

jQuery?Tabs?Plugin?–?awesome!?.?[demo?nested?tabs.]

another?jQuery?nested?Tab?Set?example?(based?on?jQuery?Tabs?Plugin).

jQuery?idTabs.

jdMenu?–?Hierarchical?Menu?Plugin?for?jQuery.

jQuery?SuckerFish?Style.

jQuery?Plugin?Treeview.

treeView?Basic.

FastFind?Menu.

Sliding?Menu.

Lava?Lamp?jQuery?Menu.

jQuery?iconDock.

jVariations?Control?Panel.

ContextMenu?plugin.

clickMenu.

CSS?Dock?Menu.

jQuery?Pop-up?Menu?Tutorial.

Sliding?Menu.

17:幻燈片、手風(fēng)琴特效類jQuery插件

jQuery?Plugin?Accordion.

jQuery?Accordion?Plugin?Horizontal?Way.

haccordion?–?a?simple?horizontal?accordion?plugin?for?jQuery.

Horizontal?Accordion?by?portalzine.de.

HoverAccordion.

Accordion?Example?from?fmarcia.info.

jQuery?Accordion?Example.

jQuery?Demo?–?Expandable?Sidebar?Menu.

Sliding?Panels?for?jQuery.

jQuery?ToggleElements.

Coda?Slider.

jCarousel.

Accesible?News?Slider?Plugin.

Showing?and?Hiding?code?Examples.

jQuery?Easing?Plugin.

jQuery?Portlets.

AutoScroll.

Innerfade.

18:拖放類jQuery插件

UI/Draggables.

EasyDrag?jQuery?Plugin.

jQuery?Portlets.

jqDnR?–?drag,?drop?resize.

Drag?Demos.

19:XML?XSL?JSON?Feeds相關(guān)jQuery插件

XSLT?Plugin.

jQuery?Ajax?call?and?result?XML?parsing.

xmlObjectifier?–?Converts?XML?DOM?to?JSON.

jQuery?XSL?Transform.

jQuery?Taconite?–?multiple?Dom?updates.

RSS/ATOM?Feed?Parser?Plugin.

jQuery?Google?Feed?Plugin.

20:瀏覽器

Wresize?–?IE?Resize?event?Fix?Plugin.

jQuery?ifixpng.

jQuery?pngFix.

Link?Scrubber?–?removes?the?dotted?line?onfocus?from?links.

jQuery?Perciformes?–?the?entire?suckerfish?familly?under?one?roof.

Background?Iframe.

QinIE?–?for?proper?display?of?Q?tags?in?IE.

jQuery?Accessibility?Plugin.

jQuery?MouseWheel?Plugin.

21:警告,?提示,?確認(rèn)等對話框

jQuery?Impromptu.

jQuery?Confirm?Plugin.

jqModal.

SimpleModal.

CSS

jQuery?Style?Switcher.

JSS?–?Javascript?StyleSheets.

jQuery?Rule?–?creation/manipulation?of?CSS?Rules.

jPrintArea.

22:DOM、AJAX和其它JQuery插件

FlyDOM.

jQuery?Dimenion?Plugin.

jQuery?Loggin.

Metadata?–?extract?metadata?from?classes,?attributes,?elements.

Super-tiny?Client-Side?Include?Javascript?jQuery?Plugin.

Undo?Made?Easy?with?Ajax.

JHeartbeat?–?periodically?poll?the?server.

Lazy?Load?Plugin.

Live?Query.

jQuery?Timers.

jQuery?Share?it?–?display?social?bookmarking?icons.

jQuery?serverCookieJar.

jQuery?autoSave.

jQuery?Puffer.

jQuery?iFrame?Plugin.

Cookie?Plugin?for?jQuery.

jQuery?Spy?–?awesome?plugin.

Effect?Delay?Trick.

jQuick?–?a?quick?tag?creator?for?jQuery..

jquery插件怎樣使用和修改?

jQuery插件 要使用它的話 通常插件中都有demo或者api可以查閱\x0d\x0a通常jQuery插件為了減小體積 會(huì)發(fā)布兩個(gè)版本 XXX.js和XXX.min.js\x0d\x0a\x0d\x0a如果你要修改插件需要使用XXX.js文件\x0d\x0a\x0d\x0a首先 你要知道它怎么用,先有一個(gè)可用的demo(沒有demo就自己寫一個(gè)),然后用webkit內(nèi)核或firefox進(jìn)行斷點(diǎn)查看,這主要是為了找插件入口點(diǎn),當(dāng)然 你也可以直接查看js代碼 這需要一定的底子\x0d\x0a最后 就是慢慢查看他的代碼的實(shí)現(xiàn)功能了,先得看懂他是怎么實(shí)現(xiàn)的,然后你才會(huì)知道怎么改.\x0d\x0a\x0d\x0ajQuery插件我也寫的不少 像 模擬alert/confirm/prompt 錯(cuò)誤信息提示框 模擬彈出窗體 無縫marquee滾動(dòng) 分頁控件 拖拽控件等等\x0d\x0a\x0d\x0ajQuery插件的框架寫法通常是\x0d\x0a\x0d\x0a(function($){\x0d\x0a $.fn.extend({\x0d\x0a fnKey:function(){}\x0d\x0a })\x0d\x0a //或者\(yùn)x0d\x0a $.fn.fnKey=function(){}\x0d\x0a})(jQuery)\x0d\x0a\x0d\x0a上面的兩種寫法的調(diào)用 方式 是\x0d\x0a\x0d\x0a$("XXX").fnKey()進(jìn)行調(diào)用的\x0d\x0a\x0d\x0a還有一種寫法:\x0d\x0avar fnClass = function(){\x0d\x0a this.fnKey=function(){\x0d\x0a }\x0d\x0a this.props="";\x0d\x0a}\x0d\x0a\x0d\x0a這種寫法是的調(diào)用 方式是\x0d\x0afnClass obj = new fnClass();\x0d\x0aobj.fnKey();\x0d\x0a\x0d\x0a第二種寫法是js的面向?qū)ο缶幊?得自己慢慢的理解哈

網(wǎng)頁題目：jquery菜單插件,jquery彈窗插件
本文路徑：http://m.rwnh.cn/article36/phpcsg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供定制網(wǎng)站、網(wǎng)頁設(shè)計(jì)公司、網(wǎng)站維護(hù)、網(wǎng)站內(nèi)鏈、關(guān)鍵詞優(yōu)化、軟件開發(fā)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)