web开发常用插件总结

• 多图上传
  类似qq控件图片上传效果
  
  示例文档：http://www.52doit.com/show/341

• 图片浏览插件
  1）phtoswipe
  官网: http://www.photoswipe.com/
  源码：https://github.com/dimsemenov/photoswipe
  2）Lightbox2
  常具有功能包括：自动根据窗口的大小缩放图片，模式窗口，幻灯片方式播放，内容预加载，渐变等效果。
  下载网址：http://lokeshdhakar.com/projects/lightbox2/
  其他图片浏览插件：
  http://www.cnblogs.com/lhb25/archive/2011/04/11/2005330.html

• 图像擦除插件（jquery.eraser.js）
  下载网址： http://www.dowebok.com/140.html
  注： v0.4.2版本，重置方法为设置图像宽高，需要自己修改配置信息

reset: function() {
    var $this = $(this),
        data = $this.data('eraser');
    if ( data )
    {
        //设置画图宽高
        var width = $this.width(),//设置宽
        height = 130;//设置高
        data.ctx.globalCompositeOperation = "source-over";
        data.ctx.drawImage( data.source, 0, 0, width, height);//指定图片宽高
        data.ctx.globalCompositeOperation = "destination-out";
        var n = data.numParts;
        while( n-- ) data.parts[n] = 1;
        data.ratio = 0;
        data.complete = false;
    }
}

4.滑动分页插件
1）scroll.js-移动端滚动条插件
– 需要引入jquery
– 文档载入时加载滑动方法

$(document).ready(function () {
    //滑动加载
    var roll = new Roll();
    var url = '/data/more';
    roll.onLoadContents = function(){
        var _this = this;
        _this.isEnd = true;
        var data = {'page' : this.page_num};        
        $.get(url, data, function(msg) {
            if (msg.success) {
                var datalist = data.datalist;
                for (var i in datalist) {
                    var dataCourse = '
这是第' + (i + 1)+ '行数据
';
                }
                //把数据添加到末尾
                $('#data_list').append(dataCourse);
                if(msg.hasmore) _this.isEnd = false;
            }else{
                //获取更多失败
            }
        },'json');
    }
    roll.init();//初始化插件
});

注：
– 此插件加载较慢
– 在微信中，如果有出现更换子菜单情况，则该插件失效，原因不详~ ->_->
2）dropload.js
提供了最基本的上拉翻页，下拉刷新功能。对于由服务端一次返回所有数据的情况基本通用。
dropload开发文档：https://github.com/ximan/dropload
dropload避坑指南：http://wp.iyouths.org/352.html
注：
– jQuery1.7以上 或者 Zepto 二选一，不要同时都引用
– 该插件是一次性全部加载所有数据，如果添加其他条件，需要自行调整
用法参考文档：
http://blog.csdn.net/ani521smile/article/details/53861255