期待已久的2013年度最佳 jQuery 外掛揭曉

lhb25發表於2014-02-10

　　讓人期待已久的2013年度最佳 jQuery 外掛揭曉了。在過去的一年裡，有很多很多的 jQuery 外掛釋出出來，而這裡文章列出的這些外掛從提供的功能更角度來看是其中的佼佼者。相信這些優秀的 jQuery 外掛能夠幫助 Web 開發人員把一些驚豔的功能和效果輕鬆的應用到自己的專案中。

　　jQuery Scroll Path

　　這款外掛用於實現自定義路徑的滾動效果。可以顯示使用 Canvas 繪製路徑線條和弧形，看到非常形象的運動效果。

　　使用示例：

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

外掛下載線上演示

　　Toolbar.Js

　　Toolbar.js 是一款幫助你快速建立 Tooltip 風格工具欄的 jQuery 外掛，可以用於網站或者 Web 應用。工具欄的風格可以使用 Twitter Bootstrap 的圖示輕鬆定製，還提供了靈活的工具欄展示位置和圖示數量配置。

　　主要特色：

簡單的實現，簡單的引數設定；
根據需要，可以執行儘可能多的工具欄；
工具欄可以連線到所需的任何元素；
工具欄的圖示能夠通過流行的 Twitter Bootstrap 框架定製；
工具欄能夠響應元素的尺寸變化。

外掛下載線上演示

　　freetile.js

　　Freetile 這款 jQuery 外掛，用於高效的組織網頁內容為動態、響應式的佈局。

　　使用示例：

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

外掛下載線上演示

　　gridster.js

　　這款外掛用於實現神話般的可拖放的多列網格佈局，允許建立直觀的跨越多個列的拖動佈局元素。

　　使用示例：

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