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 = '<div>这是第' + (i + 1)+ '行数据</div>';                }                //把数据添加到末尾                $('#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