期待已久的2013年度最佳 jQuery 插件揭曉

讓人期待已久的2013年度最佳 jQuery 插件揭曉了。在過去的一年里，有很多很多的 jQuery 插件發(fā)布出來，而這里文章列出的這些插件從提供的功能更角度來看是其中的佼佼者。相信這些優(yōu)秀的 jQuery 插件能夠幫助 Web 開發(fā)人員把一些驚艷的功能和效果輕松的應用到自己的項目中。

　　讓人期待已久的2013年度最佳 jQuery 插件揭曉了。在過去的一年里，有很多很多的 jQuery 插件發(fā)布出來，而這里文章列出的這些插件從提供的功能更角度來看是其中的佼佼者。相信這些優(yōu)秀的 jQuery 插件能夠幫助 Web 開發(fā)人員把一些驚艷的功能和效果輕松的應用到自己的項目中。

您可能感興趣的相關文章

jQuery Scroll Path

這款插件用于實現(xiàn)自定義路徑的滾動效果。可以顯示使用 Canvas 繪制路徑線條和弧形，看到非常形象的運動效果。

使用示例：

$(".your-container-element").scrollPath({
    drawPath: true,
    wrapAround: true,
    scrollBar: false
});

插件下載在線演示

Toolbar.Js

Toolbar.js 是一款幫助你快速創(chuàng)建 Tooltip 風格工具欄的 jQuery 插件，可以用于網(wǎng)站或者 Web 應用。工具欄的風格可以使用 T witter Bootstrap 的圖標輕松定制，還提供了靈活的工具欄展示位置和圖標數(shù)量配置。

　　主要特色：

簡單的實現(xiàn)，簡單的參數(shù)設置；
根據(jù)需要，可以運行盡可能多的工具欄；
工具欄可以連接到所需的任何元素；
工具欄的圖標能夠通過流行的 Twitter Bootstrap 框架定制；
工具欄能夠響應元素的尺寸變化。

插件下載在線演示

freetile.js

Freetile 這款 jQuery 插件，用于高效的組織網(wǎng)頁內容為動態(tài)、響應式的布局。

使用示例：

$('#container').freetile({ animate: true, elementDelay: 30 });

插件下載在線演示

gridster.js

這款插件用于實現(xiàn)神話般的可拖放的多列網(wǎng)格布局，允許建立直觀的跨越多個列的拖動布局元素。

使用示例：

$(function(){
 
    $(".gridster ul").gridster({
        widget_margins: [10, 10],
        widget_base_dimensions: [140, 140]
    });
 
});

插件下載在線演示

Fancy Input

這款 jQuery 插件不只是關注外觀，同時在交互方面通過 CSS3 特性讓文本輸入域變得更有趣，更有吸引力。

插件下載在線演示

jQuery File Upload

這是最受歡迎的 jQuery 文件上傳組件，支持批量上傳，拖放上傳，顯示上傳進度條以及校驗功能。

支持預覽圖片、音頻和視頻，支持跨域上傳和客戶端圖片縮放，支持的服務端平臺有：PHP, Python, Ruby on Rails, Java, Node.js, Go 等等。

使用示例：

$(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');
});