//200多個(gè)插件如下?實(shí)際開(kāi)發(fā)中?請(qǐng)選擇合適的使用
成都創(chuàng)新互聯(lián)公司專(zhuān)注于企業(yè)營(yíng)銷(xiāo)型網(wǎng)站建設(shè)、網(wǎng)站重做改版、滿城網(wǎng)站定制設(shè)計(jì)、自適應(yīng)品牌網(wǎng)站建設(shè)、成都h5網(wǎng)站建設(shè)、商城網(wǎng)站定制開(kāi)發(fā)、集團(tuán)公司官網(wǎng)建設(shè)、外貿(mào)網(wǎng)站建設(shè)、高端網(wǎng)站制作、響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)等建站業(yè)務(wù)，價(jià)格優(yōu)惠性價(jià)比高，為滿城等各大城市提供網(wǎng)站開(kāi)發(fā)制作服務(wù)。
1：文件上傳類(lèi)jQuery插件
Ajax?File?Upload.
jQUploader.
Multiple?File?Upload?plugin.
jQuery?File?Style.
Styling?an?input?type?file.
Progress?Bar?Plugin.
2：表單驗(yàn)證類(lèi)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:表單選擇框類(lèi)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í)間、日期和顏色選取類(lèi)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:投票類(lèi)jQuery插件
jQuery?Star?Rating?Plugin.
jQuery?Star?Rater.
Content?rater?with?asp.net,?ajax?and?jQuery.
Half-Star?Rating?Plugin.
7:搜索類(lèi)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等類(lèi)jQuery插件
jMedia?–?accessible?multi-media?embedding.
JBEdit?–?Ajax?online?Video?Editor.
jQuery?MP3?Plugin.
jQuery?Media?Plugin.
jQuery?Flash?Plugin.
Embed?QuickTime.
SVG?Integration.
圖片類(lèi)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地圖類(lèi)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:游戲類(lèi)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)格類(lèi)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ì)類(lèi)jQuery插件
jQuery?Wizard?Plugin?.
jQuery?Chart?Plugin.
Bar?Chart.
14:邊框、圓角、背景類(lèi)jQuery插件
jQuery?Corner.
jQuery?Curvy?Corner.
Nifty?jQuery?Corner.
Transparent?Corners.
jQuery?Corner?Gallery.
Gradient?Plugin.
14:文字和超鏈接類(lèi)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:文本提示類(lèi)jQuery插件
jQuery?Plugin?–?Tooltip.
jTip?–?The?jQuery?Tool?Tip.
clueTip.
BetterTip.
Flash?Tooltips?using?jQuery.
ToolTip.
16:菜單和導(dǎo)航類(lèi)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)琴特效類(lèi)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:拖放類(lèi)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)等對(duì)話框
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實(shí)現(xiàn)顏色選擇器插件是一款很實(shí)用的功能插件，可以靈活設(shè)置undefined（不傳參數(shù)時(shí)）、字符串、函數(shù)、undefined：把選擇的顏
色設(shè)置到綁定bigColorpicker的元素的value上。、字符串：把選擇的顏色設(shè)置到id為"字符串"的元素的value上。、函數(shù)：執(zhí)行傳入
的函數(shù)以實(shí)現(xiàn)自定義的獲取顏色后的動(dòng)作。、engine:可以是undefined、p(或P)、l(或L、在bigColorpicker展現(xiàn)顏色選擇
區(qū)域小格時(shí)有兩種實(shí)現(xiàn)方式：、
一、是一張背景圖片，采用光標(biāo)定位的方式獲取顏色。p(或P)、
二、每個(gè)小格就是一個(gè)li，設(shè)置li的背景顏色。l(或L)、實(shí)現(xiàn)方式的不同，效率有所差異，可以自己在使用時(shí)選擇，默認(rèn)是p(或P)。、
undefined（不傳參數(shù)時(shí)）：使用默認(rèn)p(或P)、sideLength:設(shè)置顏色區(qū)域的大小取值范圍為2～10，默認(rèn)為6,只有engine為L(zhǎng)
時(shí)才生效
jQuery插件分為3類(lèi),即封裝方法插件,封閉函數(shù)插件,選擇器插件,但最后一種很少要去開(kāi)發(fā)使用,自定義的插件各類(lèi)多數(shù)屬于前面兩種.
1.封裝方法插件
封裝方法插件在本質(zhì)上來(lái)說(shuō),是一個(gè)對(duì)象級(jí)別的插件,這類(lèi)插件首先通過(guò)jQuery選擇器獲取對(duì)象,并為對(duì)象添加方法,然后,將方法進(jìn)行打包,封閉成一個(gè)插件,這種類(lèi)型的插件編寫(xiě)簡(jiǎn)單,極易調(diào)用,也很方便地使用了jQuery中功能強(qiáng)大的選擇器,因此,成為開(kāi)發(fā)插件的首選.
2.封裝函數(shù)插件
封閉函數(shù)插件是一個(gè)類(lèi)級(jí)別的插件,這類(lèi)插件最大的特點(diǎn),就是可以直接給jQuery添加靜態(tài)方法,并且可以將函數(shù)置于jQuery命名空間中,如最為覺(jué)的就是$.ajax(),$.trim()全局性函數(shù),都是以內(nèi)部插件的形式植入jQuery內(nèi)核中.
編寫(xiě)插件的目的是給已經(jīng)有的一系列方法或函數(shù)做一個(gè)封裝，以便在其他地方重復(fù)使用，提高開(kāi)發(fā)效率和方便后期維護(hù)。本文將詳細(xì)介紹如何編寫(xiě)jQuery插件
類(lèi)型
jQuery的插件主要分為3種類(lèi)型
1、封裝對(duì)象方法
這種插件是將對(duì)象方法封裝起來(lái)，用于對(duì)通過(guò)選擇器獲取的jQuery對(duì)象進(jìn)行操作，是最常見(jiàn)的一種插件。此類(lèi)插件可以發(fā)揮出jQuery選擇器的強(qiáng)大優(yōu)勢(shì)，有相當(dāng)一部分的jQuery的方法，都是在jQuery腳本庫(kù)內(nèi)部通過(guò)這種形式“插”在內(nèi)核上的，例如：parent()方法、appendTo()方法等。這些方法在現(xiàn)在來(lái)看都是jQuery本身自帶的方法了。平時(shí)，我們是可以直接拿來(lái)就用的，只需引入jQuery庫(kù)就行
2、封裝全局函數(shù)
可以將獨(dú)立的函數(shù)加到j(luò)Query命名空間下，如常用的jQuery.ajax()、去首尾空格的jQuery.trim()方法等，都是jQuery內(nèi)部作為全局函數(shù)的插件附加到內(nèi)核上去的
3、選擇器插件
雖然jQuery的選擇器十分強(qiáng)大，但是在少數(shù)情況下，還是會(huì)需要用到選擇器插件來(lái)擴(kuò)充一些自己喜歡的選擇器
要點(diǎn)
1、jQuery插件的文件名推薦命名為jQuery.[插件名].js，以免和其他JS庫(kù)插件混淆
2、所有的對(duì)象方法都應(yīng)當(dāng)附加到j(luò)Query.fn對(duì)象上，而所有的全局函數(shù)都應(yīng)當(dāng)附加到j(luò)Query對(duì)象本身上
3、在插件內(nèi)部的this指向的是當(dāng)前通過(guò)選擇器獲取的jQuery對(duì)象，而不像一般方法那樣，如click，內(nèi)部的this指向的是DOM元素
4、可以通過(guò)this.each來(lái)遍歷所有的元素
5、所有的方法或函數(shù)插件，都應(yīng)當(dāng)以分號(hào)結(jié)尾。否則壓縮的時(shí)候可能出現(xiàn)問(wèn)題。為了穩(wěn)妥些，甚至可以在插件頭部先加上一個(gè)分號(hào)，以免他人不規(guī)范的代碼影響自身的插件代碼
6、插件應(yīng)該返回一個(gè)jQuery對(duì)象，以保證插件的可鏈?zhǔn)讲僮?/p>
7、避免在插件內(nèi)部使用$作為jQuery對(duì)象的別名，而應(yīng)使用完整的jQuery來(lái)表示，避免沖突。當(dāng)然，也可以利用閉包來(lái)回避這種問(wèn)題，使插件內(nèi)部繼續(xù)使用$作為jQuery的別名
閉包
利用閉包的特性，即可以避免內(nèi)部臨時(shí)變量影響全局空間，又可以在插件內(nèi)容繼續(xù)使用$作為jQuery的別名。常見(jiàn)的jQuery插件都是以下這種形式的:
(function(){
/*這里放置代碼*/
})();
首先定義一個(gè)匿名函數(shù)function(){/*這里放置代碼*/}，然后用括號(hào)括起來(lái)，變成(function(){/*這里放置代碼*/})這種形式，最后通過(guò)()這個(gè)運(yùn)算符來(lái)執(zhí)行?？梢詡鬟f參數(shù)進(jìn)行，以供內(nèi)部函數(shù)使用
//為了更好的兼容性，開(kāi)始前有個(gè)分號(hào)
;(function($){??? //此處將$作為匿名函數(shù)的形參
/*這里放置代碼，可以使用$作為jQuery的縮寫(xiě)別名*/
})(jQuery);????? //這里就將jQuery作為實(shí)參傳遞給匿名函數(shù)了
上面的代碼是一種常見(jiàn)的jQuery插件的結(jié)構(gòu)
插件機(jī)制
jQuery提供了兩個(gè)用于拓展jQuery功能的方法，即jQuery.fn.extend()方法和jQuery.extend()方法。jQuery.fn.extend()方法用于拓展封裝對(duì)象方法的插件，jQuery.extend()方法用于拓展封裝全局函數(shù)的插件和選擇器插件。這兩個(gè)方法都接受一個(gè)參數(shù)，類(lèi)型為Object。Object對(duì)象的"名/值對(duì)"分別代表"函數(shù)或方法名/函數(shù)主體"
【jQuery.fn.extend()】
jQuery.fn.extend()方法用于將一個(gè)對(duì)象的內(nèi)容合并到j(luò)Query的原型，以提供新的jQuery實(shí)例方法
labelinput type="checkbox" name="foo" Foo/label
labelinput type="checkbox" name="bar" Bar/label
button id="btn1"全選/button
button id="btn2"全不選/button
script
jQuery.fn.extend({
check: function() {
return this.each(function() { this.checked = true; });
},
uncheck: function() {
return this.each(function() { this.checked = false; });
}
});
$('#btn1').click(function(){
$( "input[type='checkbox']" ).check();
});
$('#btn2').click(function(){
$( "input[type='checkbox']" ).uncheck();
});
/script
【jQuery.extend()】
jQuery.extend()方法用一個(gè)或多個(gè)其他對(duì)象來(lái)擴(kuò)展一個(gè)對(duì)象，然后返回被擴(kuò)展的對(duì)象
jQuery.extend( target [, object1 ] [, objectN ] )
例如，合并settings對(duì)象和options對(duì)象，修改并返回settings對(duì)象
var settings = {validate:false,limit:5,name:"foo"};
var options = {validate:true,name:"bar"};
var newOptions = jQuery.extend(settings,options);
console.log(newOptions);//Object {validate: true, limit: 5, name: "bar"}
jQuery.extend()方法經(jīng)常被用于設(shè)置插件方法的一系列默認(rèn)參數(shù)
function foo(options){
options=jQuery.extend({
name:"bar",
length:5,
dataType:"xml"
},options);
如果用戶調(diào)用foo()方法的時(shí)候，在傳遞的參數(shù)options對(duì)象設(shè)置了相應(yīng)的值，那么就使用設(shè)置的值，否則使用默認(rèn)值
通過(guò)使用jQuery.extend()方法，可以很方便地用傳入的參數(shù)來(lái)覆蓋默認(rèn)值。此時(shí)，對(duì)方法的調(diào)用依舊保持一致，只不過(guò)要傳入的是一個(gè)映射而不是一個(gè)參數(shù)列表。這種機(jī)制比傳統(tǒng)的每個(gè)參數(shù)都去檢測(cè)的方式不僅靈活而且更加簡(jiǎn)潔。此外使用命名參數(shù)意味著再添加新選項(xiàng)也不會(huì)影響過(guò)去編寫(xiě)的代碼，從而使開(kāi)發(fā)者使用起來(lái)更加直觀明了
重慶分公司
重慶分公司
