diff --git a/Changelog.md b/Changelog.md new file mode 100644 index 0000000..306dbc6 --- /dev/null +++ b/Changelog.md @@ -0,0 +1,8 @@ +### 0.2.0(150325) + +* 修改参数domUp、domDown，增加参数loadUpFn、loadDownFn，删除参数direction + +### 0.1.0(141024) + +* 支持上/下拉 +* 支持自定义拉动的DOM \ No newline at end of file diff --git a/README.md b/README.md index cf44377..e99e211 100644 --- a/README.md +++ b/README.md @@ -1,8 +1,82 @@ # dropload -移动端下拉刷新（基于Zepto/jQuery） +移动端下拉刷新、上拉加载更多插件 -### v0.1.0: +## 背景介绍 -* 支持上/下拉 -* 支持自定义拉动的DOM \ No newline at end of file +### 0.2.0(150325) + +公司项目APP内嵌页需要下拉刷新，终于可以实战了！这一版大家可以开始使用和反馈。 + +### 0.1.0(141024) + +虽然有**上拉加载更多**的需求，但一直都是用的scroll方法。写**dropload**完全是为了练习插件写法和touch的使用。 + +## 示例 + +![扫一扫](examples/product-list.png) +[DEMO链接](http://ximan.github.io/dropload/examples/product-list.html) + +## 依赖 + +Zepto 或者 jQuery + +## 使用方法 + +```` +$('.element').dropload({ + loadUpFn : function(me){ + $.ajax({ + type: 'GET', + url: 'json/update.json', + dataType: 'json', + success: function(data){ + alert(data); + // 代码执行后必须重置 + me.resetload(); + }, + error: function(xhr, type){ + alert('Ajax error!'); + me.resetload(); + } + }); + }, + loadDownFn : function(me){ + $.ajax({ + type: 'GET', + url: 'json/more.json', + dataType: 'json', + success: function(data){ + alert(data); + // 代码执行后必须重置 + me.resetload(); + }, + error: function(xhr, type){ + alert('Ajax error!'); + me.resetload(); + } + }); + } +}); +```` + +CSS样式请自行美化 + +## 参数列表 + +| 参数 | 说明 | 默认值 | 可填值 | +|------------|-------------|--------|----------------| +| domUp | 上方DOM | {
domClass : 'dropload-up',
domRefresh : '<div class="dropload-refresh">↓下拉刷新</div>',
domUpdate : '<div class="dropload-update">↑释放更新</div>',
domLoad : '<div class="dropload-load">○加载中...</div>'
} | 数组 | +| domDown | 下方DOM | {
domClass : 'dropload-down',
domRefresh : '<div class="dropload-refresh">↑上拉加载更多</div>',
domUpdate : '<div class="dropload-update">↓释放加载</div>',
domLoad : '<div class="dropload-load">○加载中...</div>'
} | 数组 | +| distance | 拉动距离 | 50 | 数字 | +| loadUpFn | 上方function | 空 | function(me){
//你的代码
me.resetload();
} | +| loadDownFn | 下方function | 空 | function(me){
//你的代码
me.resetload();
} | + + +## 最新版本 + +### 0.2.0(150325) + +* 修改参数domUp、domDown，增加参数loadUpFn、loadDownFn，删除参数direction + +[所有更新日志](Changelog.md) \ No newline at end of file diff --git a/bower.json b/bower.json index cab2f7e..603bc26 100644 --- a/bower.json +++ b/bower.json @@ -1,6 +1,6 @@ { "name": "dropload", - "version": "0.1.0", + "version": "0.2.0", "homepage": "https://github.com/ximan/dropload", "authors": [ "ximan" diff --git a/dist/dropload.js b/dist/dropload.js index a63a9df..9380ecf 100644 --- a/dist/dropload.js +++ b/dist/dropload.js @@ -1,170 +1,188 @@ /** * dropload * 西门 - * 20141024 v0.1.0 + * 0.2.0(150325) */ ;(function($){ 'use strict'; - var args = { - loadClass : 'dropload-box', // 下拉容器class - refreshDOM : '
↓下拉刷新
', // 下拉DOM - updateDOM : '
↑释放更新
', // 更新DOM - loadDOM : '
○加载中...
', // 加载DOM - direction : 'up', // 加载内容方向 - distance : 50 // 下拉距离 - }, - _startY = 0, - _moveY = 0, - _curY = 0, - _offsetY = 0, - _loadHeight = 0, - _childrenHeight = 0, - _scrollTop = 0, - insertDOM = false, - loading = false, - loadName = ''; $.fn.dropload = function(options){ - new MyDropLoad(this, options); - return this; + return new MyDropLoad(this, options); }; var MyDropLoad = function(element, options){ var me = this; me.$element = $(element); - me.init(element, options); + me.insertDOM = false; + me.loading = false; + me.init(options); }; // 初始化 - MyDropLoad.prototype.init = function(element, options){ + MyDropLoad.prototype.init = function(options){ var me = this; - me.options = $.extend({}, args, options); - loadName = '.'+me.options.loadClass; + me.opts = $.extend({}, { + domUp : { // 上方DOM + domClass : 'dropload-up', + domRefresh : '
↓下拉刷新
', + domUpdate : '
↑释放更新
', + domLoad : '
○加载中...
' + }, + domDown : { // 下方DOM + domClass : 'dropload-down', + domRefresh : '
↑上拉加载更多
', + domUpdate : '
↓释放加载
', + domLoad : '
○加载中...
' + }, + distance : 50, // 拉动距离 + loadUpFn : '', // 上方function + loadDownFn : '' // 下方function + }, options); + // 绑定触摸 - me.$element.on('touchstart',function(e){ - if(loading){ - return; - } - me.fnTouches(e); - me.fnTouchstart(e); - }); - me.$element.on('touchmove',function(e){ - if(loading){ - return; - } - me.fnTouches(e); - me.fnTouchmove(e); - }); - me.$element.on('touchend',function(){ - if(loading){ - return; - } - me.fnTouchend(); - }); + if(!me.loading){ + me.$element.on('touchstart',function(e){ + fnTouches(e); + fnTouchstart(e, me); + }); + me.$element.on('touchmove',function(e){ + fnTouches(e, me); + fnTouchmove(e, me); + }); + me.$element.on('touchend',function(){ + fnTouchend(me); + }); + } }; // touches - MyDropLoad.prototype.fnTouches = function(e){ + function fnTouches(e){ if(!e.touches){ e.touches = e.originalEvent.touches; } - }; + } // touchstart - MyDropLoad.prototype.fnTouchstart = function(e){ - var me = this; - _startY = e.touches[0].pageY; - _loadHeight = me.$element.height(); - _childrenHeight = me.$element.children().height(); - _scrollTop = me.$element.scrollTop(); - }; + function fnTouchstart(e, me){ + me._startY = e.touches[0].pageY; + me._loadHeight = me.$element.height(); + me._childrenHeight = me.$element.children().height(); + me._scrollTop = me.$element.scrollTop(); + } // touchmove - MyDropLoad.prototype.fnTouchmove = function(e){ - _curY = e.touches[0].pageY; - _moveY = _curY - _startY; - var me = this, - _absMoveY = Math.abs(_moveY); - // 加载上放 - if(me.options.direction == 'up' && _scrollTop <= 0 && _moveY > 0){ + function fnTouchmove(e, me){ + me._curY = e.touches[0].pageY; + me._moveY = me._curY - me._startY; + + if(me._moveY > 0){ + me.direction = 'down'; + }else if(me._moveY < 0){ + me.direction = 'up'; + } + + var _absMoveY = Math.abs(me._moveY); + + // 加载上方 + if(me.opts.loadUpFn != '' && me._scrollTop <= 0 && me.direction == 'down'){ e.preventDefault(); - if(!insertDOM){ - me.$element.prepend('
'); - insertDOM = true; + if(!me.insertDOM){ + me.$element.prepend('
'); + me.insertDOM = true; } - fnTransition($(loadName),0); + + me.$domUp = $('.'+me.opts.domUp.domClass); + fnTransition(me.$domUp,0); + // 下拉 - if(_absMoveY <= me.options.distance){ - _offsetY = _absMoveY; - $(loadName).html('').append(me.options.refreshDOM); + if(_absMoveY <= me.opts.distance){ + me._offsetY = _absMoveY; + me.$domUp.html('').append(me.opts.domUp.domRefresh); // 指定距离 < 下拉距离 < 指定距离*2 - }else if(_absMoveY > me.options.distance && _absMoveY <= me.options.distance*2){ - _offsetY = me.options.distance+(_absMoveY-me.options.distance)*0.5; - $(loadName).html('').append(me.options.updateDOM); + }else if(_absMoveY > me.opts.distance && _absMoveY <= me.opts.distance*2){ + me._offsetY = me.opts.distance+(_absMoveY-me.opts.distance)*0.5; + me.$domUp.html('').append(me.opts.domUp.domUpdate); // 下拉距离 > 指定距离*2 }else{ - _offsetY = me.options.distance+me.options.distance*0.5+(_absMoveY-me.options.distance*2)*0.2; + me._offsetY = me.opts.distance+me.opts.distance*0.5+(_absMoveY-me.opts.distance*2)*0.2; } - $(loadName).css({'height': _offsetY}); + + me.$domUp.css({'height': me._offsetY}); } + // 加载下方 - if(me.options.direction == 'down' && _childrenHeight <= (_loadHeight+_scrollTop) && _moveY < 0){ + if(me.opts.loadDownFn != '' && me._childrenHeight <= (me._loadHeight+me._scrollTop) && me.direction == 'up'){ e.preventDefault(); - if(!insertDOM){ - me.$element.append('
'); - insertDOM = true; + if(!me.insertDOM){ + me.$element.append('
'); + me.insertDOM = true; } - fnTransition($(loadName),0); - // 下拉 - if(_absMoveY <= me.options.distance){ - _offsetY = _absMoveY; - $(loadName).html('').append(me.options.refreshDOM); - // 指定距离 < 下拉距离 < 指定距离*2 - }else if(_absMoveY > me.options.distance && _absMoveY <= me.options.distance*2){ - _offsetY = me.options.distance+(_absMoveY-me.options.distance)*0.5; - $(loadName).html('').append(me.options.updateDOM); - // 下拉距离 > 指定距离*2 + + me.$domDown = $('.'+me.opts.domDown.domClass); + fnTransition(me.$domDown,0); + + // 上拉 + if(_absMoveY <= me.opts.distance){ + me._offsetY = _absMoveY; + me.$domDown.html('').append(me.opts.domDown.domRefresh); + // 指定距离 < 上拉距离 < 指定距离*2 + }else if(_absMoveY > me.opts.distance && _absMoveY <= me.opts.distance*2){ + me._offsetY = me.opts.distance+(_absMoveY-me.opts.distance)*0.5; + me.$domDown.html('').append(me.opts.domDown.domUpdate); + // 上拉距离 > 指定距离*2 }else{ - _offsetY = me.options.distance+me.options.distance*0.5+(_absMoveY-me.options.distance*2)*0.2; + me._offsetY = me.opts.distance+me.opts.distance*0.5+(_absMoveY-me.opts.distance*2)*0.2; } - $(loadName).css({'height': _offsetY}); - me.$element.scrollTop(_offsetY+_scrollTop); + + me.$domDown.css({'height': me._offsetY}); + me.$element.scrollTop(me._offsetY+me._scrollTop); } - }; + } // touchend - MyDropLoad.prototype.fnTouchend = function(){ - var me = this, - _absMoveY = Math.abs(_moveY); - if(insertDOM){ - fnTransition($(loadName),300); - if(_absMoveY > me.options.distance){ - $(loadName).css({'height':$(loadName).children().height()}); - $(loadName).html('').append(me.options.loadDOM); - me.fnCallback(); + function fnTouchend(me){ + var _absMoveY = Math.abs(me._moveY); + if(me.insertDOM){ + if(me.direction == 'down'){ + me.$domResult = me.$domUp; + me.domLoad = me.opts.domUp.domLoad; + }else if(me.direction == 'up'){ + me.$domResult = me.$domDown; + me.domLoad = me.opts.domDown.domLoad; + } + + fnTransition(me.$domResult,300); + + if(_absMoveY > me.opts.distance){ + me.$domResult.css({'height':me.$domResult.children().height()}); + me.$domResult.html('').append(me.domLoad); + fnCallback(me); }else{ - $(loadName).css({'height':'0'}).on('webkitTransitionEnd',function(){ - insertDOM = false; + me.$domResult.css({'height':'0'}).on('webkitTransitionEnd',function(){ + me.insertDOM = false; $(this).remove(); }); } - _moveY = 0; + me._moveY = 0; } - }; + } // 回调 - MyDropLoad.prototype.fnCallback = function(){ - var me = this; - loading = true; - me.$element.trigger('dropload',me); - }; + function fnCallback(me){ + me.loading = true; + if(me.opts.loadUpFn != '' && me.direction == 'down'){ + me.opts.loadUpFn(me); + }else if(me.opts.loadDownFn != '' && me.direction == 'up'){ + me.opts.loadDownFn(me); + } + } // 重置 MyDropLoad.prototype.resetload = function(){ var me = this; - if($(loadName)){ - $(loadName).css({'height':'0'}).on('webkitTransitionEnd',function(){ - loading = false; - insertDOM = false; + if(!!me.$domResult){ + me.$domResult.css({'height':'0'}).on('webkitTransitionEnd',function(){ + me.loading = false; + me.insertDOM = false; $(this).remove(); }); } diff --git a/dist/dropload.min.js b/dist/dropload.min.js index 86af0e6..8a8e575 100644 --- a/dist/dropload.min.js +++ b/dist/dropload.min.js @@ -1,7 +1,6 @@ /** * dropload * 西门 - * 20141024 v0.1.0 + * 0.2.0(150325) */ - -!function(a){"use strict";function n(a,b){a.css({"-webkit-transition":"all "+b+"ms",transition:"all "+b+"ms"})}var m,b={loadClass:"dropload-box",refreshDOM:'
↓下拉刷新
',updateDOM:'
↑释放更新
',loadDOM:'
○加载中...
',direction:"up",distance:50},c=0,d=0,e=0,f=0,g=0,h=0,i=0,j=!1,k=!1,l="";a.fn.dropload=function(a){return new m(this,a),this},m=function(b,c){var d=this;d.$element=a(b),d.init(b,c)},m.prototype.init=function(c,d){var e=this;e.options=a.extend({},b,d),l="."+e.options.loadClass,e.$element.on("touchstart",function(a){k||(e.fnTouches(a),e.fnTouchstart(a))}),e.$element.on("touchmove",function(a){k||(e.fnTouches(a),e.fnTouchmove(a))}),e.$element.on("touchend",function(){k||e.fnTouchend()})},m.prototype.fnTouches=function(a){a.touches||(a.touches=a.originalEvent.touches)},m.prototype.fnTouchstart=function(a){var b=this;c=a.touches[0].pageY,g=b.$element.height(),h=b.$element.children().height(),i=b.$element.scrollTop()},m.prototype.fnTouchmove=function(b){e=b.touches[0].pageY,d=e-c;var k=this,m=Math.abs(d);"up"==k.options.direction&&0>=i&&d>0&&(b.preventDefault(),j||(k.$element.prepend('
'),j=!0),n(a(l),0),m<=k.options.distance?(f=m,a(l).html("").append(k.options.refreshDOM)):m>k.options.distance&&m<=2*k.options.distance?(f=k.options.distance+.5*(m-k.options.distance),a(l).html("").append(k.options.updateDOM)):f=k.options.distance+.5*k.options.distance+.2*(m-2*k.options.distance),a(l).css({height:f})),"down"==k.options.direction&&g+i>=h&&0>d&&(b.preventDefault(),j||(k.$element.append('
'),j=!0),n(a(l),0),m<=k.options.distance?(f=m,a(l).html("").append(k.options.refreshDOM)):m>k.options.distance&&m<=2*k.options.distance?(f=k.options.distance+.5*(m-k.options.distance),a(l).html("").append(k.options.updateDOM)):f=k.options.distance+.5*k.options.distance+.2*(m-2*k.options.distance),a(l).css({height:f}),k.$element.scrollTop(f+i))},m.prototype.fnTouchend=function(){var b=this,c=Math.abs(d);j&&(n(a(l),300),c>b.options.distance?(a(l).css({height:a(l).children().height()}),a(l).html("").append(b.options.loadDOM),b.fnCallback()):a(l).css({height:"0"}).on("webkitTransitionEnd",function(){j=!1,a(this).remove()}),d=0)},m.prototype.fnCallback=function(){var a=this;k=!0,a.$element.trigger("dropload",a)},m.prototype.resetload=function(){a(l)&&a(l).css({height:"0"}).on("webkitTransitionEnd",function(){k=!1,j=!1,a(this).remove()})}}(window.Zepto||window.jQuery); \ No newline at end of file +!function(a){"use strict";function c(a){a.touches||(a.touches=a.originalEvent.touches)}function d(a,b){b._startY=a.touches[0].pageY,b._loadHeight=b.$element.height(),b._childrenHeight=b.$element.children().height(),b._scrollTop=b.$element.scrollTop()}function e(b,c){c._curY=b.touches[0].pageY,c._moveY=c._curY-c._startY,c._moveY>0?c.direction="down":c._moveY<0&&(c.direction="up");var d=Math.abs(c._moveY);""!=c.opts.loadUpFn&&c._scrollTop<=0&&"down"==c.direction&&(b.preventDefault(),c.insertDOM||(c.$element.prepend('
'),c.insertDOM=!0),c.$domUp=a("."+c.opts.domUp.domClass),h(c.$domUp,0),d<=c.opts.distance?(c._offsetY=d,c.$domUp.html("").append(c.opts.domUp.domRefresh)):d>c.opts.distance&&d<=2*c.opts.distance?(c._offsetY=c.opts.distance+.5*(d-c.opts.distance),c.$domUp.html("").append(c.opts.domUp.domUpdate)):c._offsetY=c.opts.distance+.5*c.opts.distance+.2*(d-2*c.opts.distance),c.$domUp.css({height:c._offsetY})),""!=c.opts.loadDownFn&&c._childrenHeight<=c._loadHeight+c._scrollTop&&"up"==c.direction&&(b.preventDefault(),c.insertDOM||(c.$element.append('
'),c.insertDOM=!0),c.$domDown=a("."+c.opts.domDown.domClass),h(c.$domDown,0),d<=c.opts.distance?(c._offsetY=d,c.$domDown.html("").append(c.opts.domDown.domRefresh)):d>c.opts.distance&&d<=2*c.opts.distance?(c._offsetY=c.opts.distance+.5*(d-c.opts.distance),c.$domDown.html("").append(c.opts.domDown.domUpdate)):c._offsetY=c.opts.distance+.5*c.opts.distance+.2*(d-2*c.opts.distance),c.$domDown.css({height:c._offsetY}),c.$element.scrollTop(c._offsetY+c._scrollTop))}function f(b){var c=Math.abs(b._moveY);b.insertDOM&&("down"==b.direction?(b.$domResult=b.$domUp,b.domLoad=b.opts.domUp.domLoad):"up"==b.direction&&(b.$domResult=b.$domDown,b.domLoad=b.opts.domDown.domLoad),h(b.$domResult,300),c>b.opts.distance?(b.$domResult.css({height:b.$domResult.children().height()}),b.$domResult.html("").append(b.domLoad),g(b)):b.$domResult.css({height:"0"}).on("webkitTransitionEnd",function(){b.insertDOM=!1,a(this).remove()}),b._moveY=0)}function g(a){a.loading=!0,""!=a.opts.loadUpFn&&"down"==a.direction?a.opts.loadUpFn(a):""!=a.opts.loadDownFn&&"up"==a.direction&&a.opts.loadDownFn(a)}function h(a,b){a.css({"-webkit-transition":"all "+b+"ms",transition:"all "+b+"ms"})}a.fn.dropload=function(a){return new b(this,a)};var b=function(b,c){var d=this;d.$element=a(b),d.insertDOM=!1,d.loading=!1,d.init(c)};b.prototype.init=function(b){var g=this;g.opts=a.extend({},{domUp:{domClass:"dropload-up",domRefresh:'
↓下拉刷新
',domUpdate:'
↑释放更新
',domLoad:'
○加载中...
'},domDown:{domClass:"dropload-down",domRefresh:'
↑上拉加载更多
',domUpdate:'
↓释放加载
',domLoad:'
○加载中...
'},distance:50,loadUpFn:"",loadDownFn:""},b),g.loading||(g.$element.on("touchstart",function(a){c(a),d(a,g)}),g.$element.on("touchmove",function(a){c(a,g),e(a,g)}),g.$element.on("touchend",function(){f(g)}))},b.prototype.resetload=function(){var b=this;b.$domResult&&b.$domResult.css({height:"0"}).on("webkitTransitionEnd",function(){b.loading=!1,b.insertDOM=!1,a(this).remove()})}}(window.Zepto||window.jQuery); \ No newline at end of file diff --git a/examples/jquery.min.js b/examples/js/jquery.min.js similarity index 100% rename from examples/jquery.min.js rename to examples/js/jquery.min.js diff --git a/examples/zepto.min.js b/examples/js/zepto.min.js similarity index 100% rename from examples/zepto.min.js rename to examples/js/zepto.min.js diff --git a/examples/json/more.json b/examples/json/more.json new file mode 100644 index 0000000..2da1bfd --- /dev/null +++ b/examples/json/more.json @@ -0,0 +1,22 @@ +{ + "lists":[ + { + "title":"Samsung 三星 Galaxy Note4 N9108V 移动4G手机 幻影白", + "pic":"http://d8.yihaodianimg.com/N06/M06/8A/B9/CgQIzVQj87GAZ2-bAAMyoIZt8v863301_80x80.jpg", + "link":"#1", + "date":"2015-02-02" + }, + { + "title":"HTC Desire 826T 魔幻蓝 移动4G手机 双卡双待", + "pic":"http://d8.yihaodianimg.com/N06/M04/DC/24/ChEbu1T4HVeASjwEAAGHikpYgyQ10901_80x80.jpg", + "link":"#2", + "date":"2015-01-03" + }, + { + "title":"华为 荣耀畅玩4X Che2-UL00 联通标配版4G手机 双卡双待双通 白色", + "pic":"http://d8.yihaodianimg.com/N05/M05/BE/72/ChEbulTYbhyAY_DmAAGmsWjdGgY32601_80x80.jpg", + "link":"#3", + "date":"2015-02-02" + } + ] +} \ No newline at end of file diff --git a/examples/json/update.json b/examples/json/update.json new file mode 100644 index 0000000..25386fe --- /dev/null +++ b/examples/json/update.json @@ -0,0 +1,64 @@ +{ + "lists":[ + { + "title":"Apple 苹果 iPhone 6 Plus 16G 4G手机 金色 公开版（三网通用A1524)", + "pic":"http://d8.yihaodianimg.com/N05/M00/24/DF/CgQI0lQ3umiAYat_AAMa5tG_TXY20001_80x80.jpg", + "link":"#1", + "date":"2015-01-02" + }, + { + "title":"Meizu 魅族 魅蓝note 移动4G手机16G版 蓝色 双卡双待", + "pic":"http://d7.yihaodianimg.com/N06/M06/A3/BE/CgQIzlSrnfaAHAzvAAJ8k2SN73Q20901_80x80.jpg", + "link":"#2", + "date":"2015-01-03" + }, + { + "title":"Meizu 魅族 MX4 Pro 移动4G手机16G版 金色", + "pic":"http://d6.yihaodianimg.com/N06/M0B/10/41/CgQIzlUGpeeAXg4zAAOEHqy2RVU97901_80x80.jpg", + "link":"#3", + "date":"2015-02-02" + }, + { + "title":"华为 Mate7 MT7-CL00 标准版 电信4G手机 月光银 双卡双待双通 16G存储内存版", + "pic":"http://d6.yihaodianimg.com/N07/M04/F0/85/CgQI0FRHF-KAbTYpAANdzqOuu-411501_80x80.jpg", + "link":"#4", + "date":"2015-03-02" + }, + { + "title":"小米 小米4 MI4 4G智能手机 白色 联通合约版", + "pic":"http://d9.yihaodianimg.com/N06/M0B/F2/B7/CgQIzlTz89-AfGaAAAJZPMkqd-476801_80x80.jpg", + "link":"#5", + "date":"2015-01-04" + }, + { + "title":"Lenovo 联想 笋尖 S60-t 樱花粉 移动4G手机 双卡双待", + "pic":"http://d8.yihaodianimg.com/V00/M03/D9/36/CgQDslT9YrKAMMsoAABq-UGgxY401201_80x80.jpg", + "link":"#6", + "date":"2015-01-07" + }, + { + "title":"Sony 索尼 Xperia Z2 L50U 4G智能手机 白色 联通定制", + "pic":"http://d9.yihaodianimg.com/N04/M07/C6/07/CgQDr1Ny7EOAax5LAAENzd6wWAI46401_80x80.jpg", + "link":"#7", + "date":"2015-02-04" + }, + { + "title":"Nubia 努比亚 大牛3 Z7 Max （NX505H）联通移动双4G手机 黑色 双卡双待", + "pic":"http://d8.yihaodianimg.com/N03/M04/82/54/CgQCs1Ppq7uAFJV1AAanTDJTG3091901_80x80.jpg", + "link":"#8", + "date":"2015-03-04" + }, + { + "title":"Lenovo 联想 乐檬 K3（K30-W）16G 典雅黄 联通4G手机 双卡双待", + "pic":"http://d6.yihaodianimg.com/N06/M0A/E7/B7/ChEbu1T_9eyAcy-fAAFIOWgIFnY38501_80x80.jpg", + "link":"#9", + "date":"2015-02-14" + }, + { + "title":"华为 荣耀 3X畅玩版 G750-T01 移动3G手机 手机 白色", + "pic":"http://d8.yihaodianimg.com/N02/M0A/A5/5B/CgQCsFM-HxyAP2alAARr1DWBiAM30401_80x80.jpg", + "link":"#10", + "date":"2015-02-15" + } + ] +} \ No newline at end of file diff --git a/examples/product-list.html b/examples/product-list.html new file mode 100644 index 0000000..57a364d --- /dev/null +++ b/examples/product-list.html @@ -0,0 +1,310 @@ + + + + + 下拉刷新 + + + +
+

头部

+
+
+ + +

1文字描述文字描述

+ 2014-14-14 + + + +

2文字描述文字描述文字描述文字描述文字描述文字描述文字描述文字描述文字描述文字描述

+ 2014-14-14 + + + +

3文字描述文字描述文字描述文字描述文字描述

+ 2014-14-14 + + + +

4文字描述文字描述文字描述文字描述文字描述

+ 2014-14-14 + + + +

5文字描述文字描述文字描述文字描述文字描述

+ 2014-14-14 + + + +

6文字描述文字描述文字描述文字描述文字描述

+ 2014-14-14 + + + +

7文字描述文字描述文字描述文字描述文字描述

+ 2014-14-14 + + + +

8文字描述文字描述文字描述文字描述文字描述

+ 2014-14-14 + + + +

9文字描述文字描述文字描述文字描述文字描述

+ 2014-14-14 + + + +

10文字描述文字描述文字描述文字描述文字描述

+ 2014-14-14 + + + +

11文字描述文字描述文字描述文字描述文字描述

+ 2014-14-14 + + + +

12文字描述文字描述文字描述文字描述文字描述

+ 2014-14-14 + +
+
+
+ + + + + \ No newline at end of file diff --git a/examples/product-list.png b/examples/product-list.png new file mode 100644 index 0000000..5b457ea Binary files /dev/null and b/examples/product-list.png differ diff --git a/examples/pull-down.html b/examples/pull-down.html deleted file mode 100644 index 1f8d92c..0000000 --- a/examples/pull-down.html +++ /dev/null @@ -1,200 +0,0 @@ - - - - - 下拉刷新 - - - -
-

头部

-
-
-
- - 1文字描述文字描述 - 2014-14-14 -
-
- - 2文字描述文字描述文字描述文字描述 - 2014-14-14 -
-
- - 3文字描述文字描述文字描述文字描述文字描述文字描述文字描述文字描述 - 2014-14-14 -
-
- - 4文字描述文字描述文字描述文字描述文字描述文字描述文字描述文字描述 - 2014-14-14 -
-
- - 5文字描述文字描述文字描述文字描述文字描述文字描述文字描述文字描述 - 2014-14-14 -
-
- - 6文字描述文字描述文字描述文字描述文字描述文字描述文字描述文字描述 - 2014-14-14 -
-
- - 7文字描述文字描述文字描述文字描述文字描述文字描述文字描述文字描述 - 2014-14-14 -
-
- - 8文字描述文字描述文字描述文字描述文字描述文字描述文字描述文字描述 - 2014-14-14 -
-
- - 9文字描述文字描述文字描述文字描述文字描述文字描述文字描述文字描述 - 2014-14-14 -
-
- - 10文字描述文字描述文字描述文字描述文字描述文字描述文字描述文字描述 - 2014-14-14 -
-
- - 11文字描述文字描述文字描述文字描述文字描述文字描述文字描述文字描述 - 2014-14-14 -
-
- - 12文字描述文字描述文字描述文字描述文字描述文字描述文字描述文字描述 - 2014-14-14 -
-
-
-
- - - - - \ No newline at end of file diff --git a/examples/pull-up.html b/examples/pull-up.html deleted file mode 100644 index a639bb2..0000000 --- a/examples/pull-up.html +++ /dev/null @@ -1,205 +0,0 @@ - - - - - 上拉刷新 - - - -
-

头部

-
-
-
- - 1文字描述文字描述 - 2014-14-14 -
-
- - 2文字描述文字描述文字描述文字描述 - 2014-14-14 -
-
- - 3文字描述文字描述文字描述文字描述文字描述文字描述文字描述文字描述 - 2014-14-14 -
-
- - 4文字描述文字描述文字描述文字描述文字描述文字描述文字描述文字描述 - 2014-14-14 -
-
- - 5文字描述文字描述文字描述文字描述文字描述文字描述文字描述文字描述 - 2014-14-14 -
-
- - 6文字描述文字描述文字描述文字描述文字描述文字描述文字描述文字描述 - 2014-14-14 -
-
- - 7文字描述文字描述文字描述文字描述文字描述文字描述文字描述文字描述 - 2014-14-14 -
-
- - 8文字描述文字描述文字描述文字描述文字描述文字描述文字描述文字描述 - 2014-14-14 -
-
- - 9文字描述文字描述文字描述文字描述文字描述文字描述文字描述文字描述 - 2014-14-14 -
-
- - 10文字描述文字描述文字描述文字描述文字描述文字描述文字描述文字描述 - 2014-14-14 -
-
- - 11文字描述文字描述文字描述文字描述文字描述文字描述文字描述文字描述 - 2014-14-14 -
-
- - 12文字描述文字描述文字描述文字描述文字描述文字描述文字描述文字描述 - 2014-14-14 -
-
-
-
- - - - - \ No newline at end of file diff --git a/images/bg_hr.png b/images/bg_hr.png deleted file mode 100644 index 514aee5..0000000 Binary files a/images/bg_hr.png and /dev/null differ diff --git a/images/blacktocat.png b/images/blacktocat.png deleted file mode 100644 index e160053..0000000 Binary files a/images/blacktocat.png and /dev/null differ diff --git a/images/icon_download.png b/images/icon_download.png deleted file mode 100644 index 5a793f1..0000000 Binary files a/images/icon_download.png and /dev/null differ diff --git a/images/sprite_download.png b/images/sprite_download.png deleted file mode 100644 index f9f8de2..0000000 Binary files a/images/sprite_download.png and /dev/null differ diff --git a/index.html b/index.html deleted file mode 100644 index 73f2dde..0000000 --- a/index.html +++ /dev/null @@ -1,79 +0,0 @@ - - - - - - - - - - - Dropload - - - - - -
-
- View on GitHub - -

Dropload

-

移动端下拉刷新（基于Zepto/jQuery）

- -
- Download this project as a .zip file - Download this project as a tar.gz file -
-
-
- - -
-
-

-Welcome to GitHub Pages.

- -

This automatic page generator is the easiest way to create beautiful pages for all of your projects. Author your page content here using GitHub Flavored Markdown, select a template crafted by a designer, and publish. After your page is generated, you can check out the new branch:

- -
$ cd your_repo_root/repo_name
-$ git fetch origin
-$ git checkout gh-pages
-
- -

If you're using the GitHub for Mac, simply sync your repository and you'll see the new branch.

- -

-Designer Templates

- -

We've crafted some handsome templates for you to use. Go ahead and continue to layouts to browse through them. You can easily go back to edit your page before publishing. After publishing your page, you can revisit the page generator and switch to another theme. Your Page content will be preserved if it remained markdown format.

- -

-Rather Drive Stick?

- -

If you prefer to not use the automatic generator, push a branch named gh-pages to your repository to create a page manually. In addition to supporting regular HTML content, GitHub Pages support Jekyll, a simple, blog aware static site generator written by our own Tom Preston-Werner. Jekyll makes it easy to create site-wide headers and footers without having to copy them across every page. It also offers intelligent blog support and other advanced templating features.

- -

-Authors and Contributors

- -

You can @mention a GitHub username to generate a link to their profile. The resulting <a> element will link to the contributor's GitHub Profile. For example: In 2007, Chris Wanstrath (@defunkt), PJ Hyett (@pjhyett), and Tom Preston-Werner (@mojombo) founded GitHub.

- -

-Support or Contact

- -

Having trouble with Pages? Check out the documentation at https://help.github.com/pages or contact support@github.com and we’ll help you sort it out.

-
-
- - - - - - - - diff --git a/javascripts/main.js b/javascripts/main.js deleted file mode 100644 index d8135d3..0000000 --- a/javascripts/main.js +++ /dev/null @@ -1 +0,0 @@ -console.log('This would be the main JS file.'); diff --git a/params.json b/params.json deleted file mode 100644 index 9d26463..0000000 --- a/params.json +++ /dev/null @@ -1 +0,0 @@ -{"name":"Dropload","tagline":"移动端下拉刷新（基于Zepto/jQuery）","body":"### Welcome to GitHub Pages.\r\nThis automatic page generator is the easiest way to create beautiful pages for all of your projects. Author your page content here using GitHub Flavored Markdown, select a template crafted by a designer, and publish. After your page is generated, you can check out the new branch:\r\n\r\n```\r\n$ cd your_repo_root/repo_name\r\n$ git fetch origin\r\n$ git checkout gh-pages\r\n```\r\n\r\nIf you're using the GitHub for Mac, simply sync your repository and you'll see the new branch.\r\n\r\n### Designer Templates\r\nWe've crafted some handsome templates for you to use. Go ahead and continue to layouts to browse through them. You can easily go back to edit your page before publishing. After publishing your page, you can revisit the page generator and switch to another theme. Your Page content will be preserved if it remained markdown format.\r\n\r\n### Rather Drive Stick?\r\nIf you prefer to not use the automatic generator, push a branch named `gh-pages` to your repository to create a page manually. In addition to supporting regular HTML content, GitHub Pages support Jekyll, a simple, blog aware static site generator written by our own Tom Preston-Werner. Jekyll makes it easy to create site-wide headers and footers without having to copy them across every page. It also offers intelligent blog support and other advanced templating features.\r\n\r\n### Authors and Contributors\r\nYou can @mention a GitHub username to generate a link to their profile. The resulting `` element will link to the contributor's GitHub Profile. For example: In 2007, Chris Wanstrath (@defunkt), PJ Hyett (@pjhyett), and Tom Preston-Werner (@mojombo) founded GitHub.\r\n\r\n### Support or Contact\r\nHaving trouble with Pages? Check out the documentation at https://help.github.com/pages or contact support@github.com and we’ll help you sort it out.\r\n","google":"","note":"Don't delete this file! It's used internally to help with page regeneration."} \ No newline at end of file diff --git a/stylesheets/pygment_trac.css b/stylesheets/pygment_trac.css deleted file mode 100644 index e65cedf..0000000 --- a/stylesheets/pygment_trac.css +++ /dev/null @@ -1,70 +0,0 @@ -.highlight .hll { background-color: #ffffcc } -.highlight { background: #f0f3f3; } -.highlight .c { color: #0099FF; font-style: italic } /* Comment */ -.highlight .err { color: #AA0000; background-color: #FFAAAA } /* Error */ -.highlight .k { color: #006699; font-weight: bold } /* Keyword */ -.highlight .o { color: #555555 } /* Operator */ -.highlight .cm { color: #0099FF; font-style: italic } /* Comment.Multiline */ -.highlight .cp { color: #009999 } /* Comment.Preproc */ -.highlight .c1 { color: #0099FF; font-style: italic } /* Comment.Single */ -.highlight .cs { color: #0099FF; font-weight: bold; font-style: italic } /* Comment.Special */ -.highlight .gd { background-color: #FFCCCC; border: 1px solid #CC0000 } /* Generic.Deleted */ -.highlight .ge { font-style: italic } /* Generic.Emph */ -.highlight .gr { color: #FF0000 } /* Generic.Error */ -.highlight .gh { color: #003300; font-weight: bold } /* Generic.Heading */ -.highlight .gi { background-color: #CCFFCC; border: 1px solid #00CC00 } /* Generic.Inserted */ -.highlight .go { color: #AAAAAA } /* Generic.Output */ -.highlight .gp { color: #000099; font-weight: bold } /* Generic.Prompt */ -.highlight .gs { font-weight: bold } /* Generic.Strong */ -.highlight .gu { color: #003300; font-weight: bold } /* Generic.Subheading */ -.highlight .gt { color: #99CC66 } /* Generic.Traceback */ -.highlight .kc { color: #006699; font-weight: bold } /* Keyword.Constant */ -.highlight .kd { color: #006699; font-weight: bold } /* Keyword.Declaration */ -.highlight .kn { color: #006699; font-weight: bold } /* Keyword.Namespace */ -.highlight .kp { color: #006699 } /* Keyword.Pseudo */ -.highlight .kr { color: #006699; font-weight: bold } /* Keyword.Reserved */ -.highlight .kt { color: #007788; font-weight: bold } /* Keyword.Type */ -.highlight .m { color: #FF6600 } /* Literal.Number */ -.highlight .s { color: #CC3300 } /* Literal.String */ -.highlight .na { color: #330099 } /* Name.Attribute */ -.highlight .nb { color: #336666 } /* Name.Builtin */ -.highlight .nc { color: #00AA88; font-weight: bold } /* Name.Class */ -.highlight .no { color: #336600 } /* Name.Constant */ -.highlight .nd { color: #9999FF } /* Name.Decorator */ -.highlight .ni { color: #999999; font-weight: bold } /* Name.Entity */ -.highlight .ne { color: #CC0000; font-weight: bold } /* Name.Exception */ -.highlight .nf { color: #CC00FF } /* Name.Function */ -.highlight .nl { color: #9999FF } /* Name.Label */ -.highlight .nn { color: #00CCFF; font-weight: bold } /* Name.Namespace */ -.highlight .nt { color: #330099; font-weight: bold } /* Name.Tag */ -.highlight .nv { color: #003333 } /* Name.Variable */ -.highlight .ow { color: #000000; font-weight: bold } /* Operator.Word */ -.highlight .w { color: #bbbbbb } /* Text.Whitespace */ -.highlight .mf { color: #FF6600 } /* Literal.Number.Float */ -.highlight .mh { color: #FF6600 } /* Literal.Number.Hex */ -.highlight .mi { color: #FF6600 } /* Literal.Number.Integer */ -.highlight .mo { color: #FF6600 } /* Literal.Number.Oct */ -.highlight .sb { color: #CC3300 } /* Literal.String.Backtick */ -.highlight .sc { color: #CC3300 } /* Literal.String.Char */ -.highlight .sd { color: #CC3300; font-style: italic } /* Literal.String.Doc */ -.highlight .s2 { color: #CC3300 } /* Literal.String.Double */ -.highlight .se { color: #CC3300; font-weight: bold } /* Literal.String.Escape */ -.highlight .sh { color: #CC3300 } /* Literal.String.Heredoc */ -.highlight .si { color: #AA0000 } /* Literal.String.Interpol */ -.highlight .sx { color: #CC3300 } /* Literal.String.Other */ -.highlight .sr { color: #33AAAA } /* Literal.String.Regex */ -.highlight .s1 { color: #CC3300 } /* Literal.String.Single */ -.highlight .ss { color: #FFCC33 } /* Literal.String.Symbol */ -.highlight .bp { color: #336666 } /* Name.Builtin.Pseudo */ -.highlight .vc { color: #003333 } /* Name.Variable.Class */ -.highlight .vg { color: #003333 } /* Name.Variable.Global */ -.highlight .vi { color: #003333 } /* Name.Variable.Instance */ -.highlight .il { color: #FF6600 } /* Literal.Number.Integer.Long */ - -.type-csharp .highlight .k { color: #0000FF } -.type-csharp .highlight .kt { color: #0000FF } -.type-csharp .highlight .nf { color: #000000; font-weight: normal } -.type-csharp .highlight .nc { color: #2B91AF } -.type-csharp .highlight .nn { color: #000000 } -.type-csharp .highlight .s { color: #A31515 } -.type-csharp .highlight .sc { color: #A31515 } diff --git a/stylesheets/stylesheet.css b/stylesheets/stylesheet.css deleted file mode 100644 index 619d19d..0000000 --- a/stylesheets/stylesheet.css +++ /dev/null @@ -1,425 +0,0 @@ -/******************************************************************************* -Slate Theme for GitHub Pages -by Jason Costello, @jsncostello -*******************************************************************************/ - -@import url(pygment_trac.css); - -/******************************************************************************* -MeyerWeb Reset -*******************************************************************************/ - -html, body, div, span, applet, object, iframe, -h1, h2, h3, h4, h5, h6, p, blockquote, pre, -a, abbr, acronym, address, big, cite, code, -del, dfn, em, img, ins, kbd, q, s, samp, -small, strike, strong, sub, sup, tt, var, -b, u, i, center, -dl, dt, dd, ol, ul, li, -fieldset, form, label, legend, -table, caption, tbody, tfoot, thead, tr, th, td, -article, aside, canvas, details, embed, -figure, figcaption, footer, header, hgroup, -menu, nav, output, ruby, section, summary, -time, mark, audio, video { - margin: 0; - padding: 0; - border: 0; - font: inherit; - vertical-align: baseline; -} - -/* HTML5 display-role reset for older browsers */ -article, aside, details, figcaption, figure, -footer, header, hgroup, menu, nav, section { - display: block; -} - -ol, ul { - list-style: none; -} - -table { - border-collapse: collapse; - border-spacing: 0; -} - -/******************************************************************************* -Theme Styles -*******************************************************************************/ - -body { - box-sizing: border-box; - color:#373737; - background: #212121; - font-size: 16px; - font-family: 'Myriad Pro', Calibri, Helvetica, Arial, sans-serif; - line-height: 1.5; - -webkit-font-smoothing: antialiased; -} - -h1, h2, h3, h4, h5, h6 { - margin: 10px 0; - font-weight: 700; - color:#222222; - font-family: 'Lucida Grande', 'Calibri', Helvetica, Arial, sans-serif; - letter-spacing: -1px; -} - -h1 { - font-size: 36px; - font-weight: 700; -} - -h2 { - padding-bottom: 10px; - font-size: 32px; - background: url('../images/bg_hr.png') repeat-x bottom; -} - -h3 { - font-size: 24px; -} - -h4 { - font-size: 21px; -} - -h5 { - font-size: 18px; -} - -h6 { - font-size: 16px; -} - -p { - margin: 10px 0 15px 0; -} - -footer p { - color: #f2f2f2; -} - -a { - text-decoration: none; - color: #007edf; - text-shadow: none; - - transition: color 0.5s ease; - transition: text-shadow 0.5s ease; - -webkit-transition: color 0.5s ease; - -webkit-transition: text-shadow 0.5s ease; - -moz-transition: color 0.5s ease; - -moz-transition: text-shadow 0.5s ease; - -o-transition: color 0.5s ease; - -o-transition: text-shadow 0.5s ease; - -ms-transition: color 0.5s ease; - -ms-transition: text-shadow 0.5s ease; -} - -a:hover, a:focus {text-decoration: underline;} - -footer a { - color: #F2F2F2; - text-decoration: underline; -} - -em { - font-style: italic; -} - -strong { - font-weight: bold; -} - -img { - position: relative; - margin: 0 auto; - max-width: 739px; - padding: 5px; - margin: 10px 0 10px 0; - border: 1px solid #ebebeb; - - box-shadow: 0 0 5px #ebebeb; - -webkit-box-shadow: 0 0 5px #ebebeb; - -moz-box-shadow: 0 0 5px #ebebeb; - -o-box-shadow: 0 0 5px #ebebeb; - -ms-box-shadow: 0 0 5px #ebebeb; -} - -p img { - display: inline; - margin: 0; - padding: 0; - vertical-align: middle; - text-align: center; - border: none; -} - -pre, code { - width: 100%; - color: #222; - background-color: #fff; - - font-family: Monaco, "Bitstream Vera Sans Mono", "Lucida Console", Terminal, monospace; - font-size: 14px; - - border-radius: 2px; - -moz-border-radius: 2px; - -webkit-border-radius: 2px; -} - -pre { - width: 100%; - padding: 10px; - box-shadow: 0 0 10px rgba(0,0,0,.1); - overflow: auto; -} - -code { - padding: 3px; - margin: 0 3px; - box-shadow: 0 0 10px rgba(0,0,0,.1); -} - -pre code { - display: block; - box-shadow: none; -} - -blockquote { - color: #666; - margin-bottom: 20px; - padding: 0 0 0 20px; - border-left: 3px solid #bbb; -} - - -ul, ol, dl { - margin-bottom: 15px -} - -ul { - list-style-position: inside; - list-style: disc; - padding-left: 20px; -} - -ol { - list-style-position: inside; - list-style: decimal; - padding-left: 20px; -} - -dl dt { - font-weight: bold; -} - -dl dd { - padding-left: 20px; - font-style: italic; -} - -dl p { - padding-left: 20px; - font-style: italic; -} - -hr { - height: 1px; - margin-bottom: 5px; - border: none; - background: url('../images/bg_hr.png') repeat-x center; -} - -table { - border: 1px solid #373737; - margin-bottom: 20px; - text-align: left; - } - -th { - font-family: 'Lucida Grande', 'Helvetica Neue', Helvetica, Arial, sans-serif; - padding: 10px; - background: #373737; - color: #fff; - } - -td { - padding: 10px; - border: 1px solid #373737; - } - -form { - background: #f2f2f2; - padding: 20px; -} - -/******************************************************************************* -Full-Width Styles -*******************************************************************************/ - -.outer { - width: 100%; -} - -.inner { - position: relative; - max-width: 640px; - padding: 20px 10px; - margin: 0 auto; -} - -#forkme_banner { - display: block; - position: absolute; - top:0; - right: 10px; - z-index: 10; - padding: 10px 50px 10px 10px; - color: #fff; - background: url('../images/blacktocat.png') #0090ff no-repeat 95% 50%; - font-weight: 700; - box-shadow: 0 0 10px rgba(0,0,0,.5); - border-bottom-left-radius: 2px; - border-bottom-right-radius: 2px; -} - -#header_wrap { - background: #212121; - background: -moz-linear-gradient(top, #373737, #212121); - background: -webkit-linear-gradient(top, #373737, #212121); - background: -ms-linear-gradient(top, #373737, #212121); - background: -o-linear-gradient(top, #373737, #212121); - background: linear-gradient(top, #373737, #212121); -} - -#header_wrap .inner { - padding: 50px 10px 30px 10px; -} - -#project_title { - margin: 0; - color: #fff; - font-size: 42px; - font-weight: 700; - text-shadow: #111 0px 0px 10px; -} - -#project_tagline { - color: #fff; - font-size: 24px; - font-weight: 300; - background: none; - text-shadow: #111 0px 0px 10px; -} - -#downloads { - position: absolute; - width: 210px; - z-index: 10; - bottom: -40px; - right: 0; - height: 70px; - background: url('../images/icon_download.png') no-repeat 0% 90%; -} - -.zip_download_link { - display: block; - float: right; - width: 90px; - height:70px; - text-indent: -5000px; - overflow: hidden; - background: url(../images/sprite_download.png) no-repeat bottom left; -} - -.tar_download_link { - display: block; - float: right; - width: 90px; - height:70px; - text-indent: -5000px; - overflow: hidden; - background: url(../images/sprite_download.png) no-repeat bottom right; - margin-left: 10px; -} - -.zip_download_link:hover { - background: url(../images/sprite_download.png) no-repeat top left; -} - -.tar_download_link:hover { - background: url(../images/sprite_download.png) no-repeat top right; -} - -#main_content_wrap { - background: #f2f2f2; - border-top: 1px solid #111; - border-bottom: 1px solid #111; -} - -#main_content { - padding-top: 40px; -} - -#footer_wrap { - background: #212121; -} - - - -/******************************************************************************* -Small Device Styles -*******************************************************************************/ - -@media screen and (max-width: 480px) { - body { - font-size:14px; - } - - #downloads { - display: none; - } - - .inner { - min-width: 320px; - max-width: 480px; - } - - #project_title { - font-size: 32px; - } - - h1 { - font-size: 28px; - } - - h2 { - font-size: 24px; - } - - h3 { - font-size: 21px; - } - - h4 { - font-size: 18px; - } - - h5 { - font-size: 14px; - } - - h6 { - font-size: 12px; - } - - code, pre { - min-width: 320px; - max-width: 480px; - font-size: 11px; - } - -}