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

2022-11-13 19:52:49

　　让人期待已久的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 应用。工具栏的风格可以使用 T witter 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');

});