讓人期待已久的2013年度最佳 jQuery 插件揭曉了。在過(guò)去的一年里，有很多很多的 jQuery 插件發(fā)布出來(lái)，而這里文章列出的這些插件從提供的功能更角度來(lái)看是其中的佼佼者。相信這些優(yōu)秀的 jQuery 插件能夠幫助 Web 開(kāi)發(fā)人員把一些驚艷的功能和效果輕松的應(yīng)用到自己的項(xiàng)目中。
您可能感興趣的相關(guān)文章
jQuery Scroll Path
這款插件用于實(shí)現(xiàn)自定義路徑的滾動(dòng)效果。可以顯示使用 Canvas 繪制路徑線條和弧形，看到非常形象的運(yùn)動(dòng)效果。
使用示例：
|
1
2
3
4
5
|
$(
".your-container-element"
).scrollPath({
drawPath:
true
,
wrapAround:
true
,
scrollBar:
false
});
|
Toolbar.Js
Toolbar.js 是一款幫助你快速創(chuàng)建 Tooltip 風(fēng)格工具欄的 jQuery 插件，可以用于網(wǎng)站或者 Web 應(yīng)用。工具欄的風(fēng)格可以使用 T witter Bootstrap 的圖標(biāo)輕松定制，還提供了靈活的工具欄展示位置和圖標(biāo)數(shù)量配置。
主要特色：
- 簡(jiǎn)單的實(shí)現(xiàn)，簡(jiǎn)單的參數(shù)設(shè)置；
- 根據(jù)需要，可以運(yùn)行盡可能多的工具欄；
- 工具欄可以連接到所需的任何元素；
- 工具欄的圖標(biāo)能夠通過(guò)流行的Twitter Bootstrap框架定制；
- 工具欄能夠響應(yīng)元素的尺寸變化。
freetile.js
Freetile 這款 jQuery 插件，用于高效的組織網(wǎng)頁(yè)內(nèi)容為動(dòng)態(tài)、響應(yīng)式的布局。
使用示例：
|
1
|
$(
'#container'
).freetile({ animate:
true
, elementDelay: 30 });
|
gridster.js
這款插件用于實(shí)現(xiàn)神話般的可拖放的多列網(wǎng)格布局，允許建立直觀的跨越多個(gè)列的拖動(dòng)布局元素。
使用示例：
|
1
2
3
4
5
6
7
8
|
$(
function
(){
$(
".gridster ul"
).gridster({
widget_margins: [10, 10],
widget_base_dimensions: [140, 140]
});
});
|
Fancy Input
這款 jQuery 插件不只是關(guān)注外觀，同時(shí)在交互方面通過(guò) CSS3 特性讓文本輸入域變得更有趣，更有吸引力。
jQuery File Upload
這是最受歡迎的 jQuery 文件上傳 組件，支持批量上傳，拖放上傳，顯示上傳進(jìn)度條以及校驗(yàn)功能。
支持預(yù)覽圖片、音頻和視頻，支持跨域上傳和客戶端圖片縮放，支持的服務(wù)端平臺(tái)有：PHP, Python, Ruby on Rails, Java, Node.js, Go 等等。
使用示例：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
|
$(
function
() {
'use strict'
;
// Change this to the location of your server-side upload handler:
var
url = window.location.hostname ===
'blueimp.github.io'
?
'//jquery-file-upload.appspot.com/'
:
'server/php/'
;
$(
'#fileupload'
).fileupload({
url: url,
dataType:
'json'
,
done:
function
(e, data) {
$.each(data.result.files,
function
(index, file) {
$(
'<p/>'
).text(file.name).appendTo(
'#files'
);
});
},
progressall:
function
(e, data) {
var
progress = parseInt(data.loaded / data.total * 100, 10);
$(
'#progress .progress-bar'
).css(
'width'
,
progress +
'%'
);
}
}).prop(
'disabled'
, !$.support.fileInput)
.parent().addClass($.support.fileInput ? undefined :
'disabled'
);
});
|
jQuery Validation Engine
這款插件的校驗(yàn)提示效果很漂亮，基于 CSS3 實(shí)現(xiàn)，可以參考一下。
equalize.js
用于均衡元素的的高度或?qū)挾鹊?jQuery 插件。這對(duì)于統(tǒng)一頁(yè)面元素規(guī)格的布局非常有用。
均衡 id 為 width-example 的元素的寬度的使用實(shí)例：
|
1
|
$(
'#width-example'
).equalize(
'width'
);
|
均衡 class 為 parent 的元素的子段落的使用實(shí)例：
|
1
|
$(
'.parent'
).equalize({children:
'p'
});
|
NProgress
NProgress.js是納米級(jí)的進(jìn)度條插件。擁有逼真的的涓涓細(xì)流動(dòng)畫(huà)效果來(lái)告訴你的用戶，某些事情正在發(fā)生。它的靈感來(lái)自于谷歌，YouTube，應(yīng)用了，這款苗條的進(jìn)度條是完美的，適用于 Turbolinks，Pjax 以及其他重 Ajax 的應(yīng)用程序。
FlowType
在理想的情況下，最易讀的版式包含每行的字符在45和75之間。所有的屏幕寬度只用 CSS 媒體查詢是很難完成的。
FlowType.JS 簡(jiǎn)化了這一困難，基于 特定元素的寬度改變字體大小和隨后的行高的，這使得在任何屏幕都有完美的排版。
Device.js
Device.js 是一個(gè)很小的 JavaScript 庫(kù)，它簡(jiǎn)化了編寫(xiě)和平臺(tái)，操作系統(tǒng)或?yàn)g覽器相關(guān)的條件 CSS 或 JavaScript 代碼。
更多文章、技術(shù)交流、商務(wù)合作、聯(lián)系博主
微信掃碼或搜索：z360901061
微信掃一掃加我為好友
QQ號(hào)聯(lián)系： 360901061
您的支持是博主寫(xiě)作最大的動(dòng)力，如果您喜歡我的文章，感覺(jué)我的文章對(duì)您有幫助，請(qǐng)用微信掃描下面二維碼支持博主2元、5元、10元、20元等您想捐的金額吧，狠狠點(diǎn)擊下面給點(diǎn)支持吧，站長(zhǎng)非常感激您！手機(jī)微信長(zhǎng)按不能支付解決辦法：請(qǐng)將微信支付二維碼保存到相冊(cè)，切換到微信，然后點(diǎn)擊微信右上角掃一掃功能，選擇支付二維碼完成支付。
【本文對(duì)您有幫助就好】元
