├── .gitignore
├── examples
├── tab.png
├── load-bottom.png
├── product-list.png
├── load-top-bottom.png
├── multiple-load.png
├── json
│ ├── update.json
│ └── more.json
├── load-bottom.html
├── multiple-load.html
├── tab.html
├── load-top-bottom.html
├── product-list.html
└── js
│ ├── zepto.min.js
│ └── jquery.min.js
├── bower.json
├── Intro.md
├── dist
├── dropload.css
├── dropload.min.js
└── dropload.js
└── README.md
/.gitignore:
--------------------------------------------------------------------------------
1 | *.DS_Store
2 | .idea/
--------------------------------------------------------------------------------
/examples/tab.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Alan809/dropLoad/HEAD/examples/tab.png
--------------------------------------------------------------------------------
/examples/load-bottom.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Alan809/dropLoad/HEAD/examples/load-bottom.png
--------------------------------------------------------------------------------
/examples/product-list.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Alan809/dropLoad/HEAD/examples/product-list.png
--------------------------------------------------------------------------------
/examples/load-top-bottom.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Alan809/dropLoad/HEAD/examples/load-top-bottom.png
--------------------------------------------------------------------------------
/examples/multiple-load.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Alan809/dropLoad/HEAD/examples/multiple-load.png
--------------------------------------------------------------------------------
/bower.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "dropload",
3 | "version": "0.3.0",
4 | "homepage": "https://github.com/ximan/dropload",
5 | "authors": [
6 | "ximan"
7 | ],
8 | "description": "移动端下拉刷新(基于Zepto/jQuery)",
9 | "main": "dist/dropload.min.js",
10 | "keywords": [
11 | "jquery",
12 | "zepto",
13 | "dropload",
14 | "drop",
15 | "drag",
16 | "load"
17 | ],
18 | "license": "MIT",
19 | "ignore": [
20 | "**/.*",
21 | "node_modules",
22 | "bower_components",
23 | "examples",
24 | ".gitignore",
25 | "README.md"
26 | ]
27 | }
--------------------------------------------------------------------------------
/Intro.md:
--------------------------------------------------------------------------------
1 | ### 0.9.0(160215)
2 |
3 | 年前把tab例子加上来让群友测试,果然群众的力量是伟大的!立马就检测出来bug,我当即修复好,只是用法比较复杂,暂时还想不出更方便的办法。顺便把上个版本的`dropReload()` API删掉,功能集成到之前`resetload()`里。另外还修复一个朋友发现的只调用下拉刷新,代码判断bug。
4 |
5 | ### 0.8.0(160202)
6 |
7 | 上次加了默认内容过少自动触发加载下方内容。结果又被吐槽,只有加个参数autoLoad,要么自动触发加载内容,不够一屏继续加载,要么不触发。另外,增加`dropReload()` API,可以方便类似微博APP点首页就加载页面效果。目前是默认加载下方内容。另外tab功能还没想出来怎么做,容我再想想~~~
8 |
9 | ### 0.7.0(151225)
10 |
11 | 根据网友提议,默认内容过少时,自动触发加载下方内容,只会加载一次,如果内容还不够一屏,无法继续触发。并且修复`lock()`,增加参数可以手动锁定上方或者下方。
12 |
13 | ### 0.6.0(151218)
14 |
15 | 根据网友提议,增加提前加载距离threshold,适用于上拉加载更多功能。默认显示到加载区高度2/3时加载。
16 |
17 | ### 0.5.0(151217)
18 |
19 | 感谢交流群里网友各种吐槽上拉加载抖动。发现`touch`和`scroll`同时作用会发生抖动,干脆把上拉加载改为滑到底部自动加载。如依旧需要上拉加载效果,可以下载[releases0.4.0版本](https://github.com/ximan/dropload/releases/tag/0.4.0)。
20 |
21 | ### 0.4.0(150927)
22 |
23 | 根据网友提供demo,修改至适用大部分普通列表网页,终于可以大规模使用啦!
24 |
25 | ### 0.3.0(150410)
26 |
27 | 项目中通知列表有可编辑、删除等状态,需要锁定和解锁下拉刷新功能。
28 |
29 | ### 0.2.0(150325)
30 |
31 | 公司项目APP内嵌页需要下拉刷新,终于可以实战了!这一版大家可以开始使用和反馈。
32 |
33 | ### 0.1.0(141024)
34 |
35 | 虽然有**上拉加载更多**的需求,但一直都是用的scroll方法。写**dropload**完全是为了练习插件写法和touch的使用。
--------------------------------------------------------------------------------
/dist/dropload.css:
--------------------------------------------------------------------------------
1 | .dropload-up,.dropload-down{
2 | position: relative;
3 | height: 0;
4 | overflow: hidden;
5 | font-size: 12px;
6 | /* 开启硬件加速 */
7 | -webkit-transform:translateZ(0);
8 | transform:translateZ(0);
9 | }
10 | .dropload-down{
11 | height: 50px;
12 | }
13 | .dropload-refresh,.dropload-update,.dropload-load,.dropload-noData{
14 | height: 50px;
15 | line-height: 50px;
16 | text-align: center;
17 | }
18 | .dropload-load .loading{
19 | display: inline-block;
20 | height: 15px;
21 | width: 15px;
22 | border-radius: 100%;
23 | margin: 6px;
24 | border: 2px solid #666;
25 | border-bottom-color: transparent;
26 | vertical-align: middle;
27 | -webkit-animation: rotate 0.75s linear infinite;
28 | animation: rotate 0.75s linear infinite;
29 | }
30 | @-webkit-keyframes rotate {
31 | 0% {
32 | -webkit-transform: rotate(0deg);
33 | }
34 | 50% {
35 | -webkit-transform: rotate(180deg);
36 | }
37 | 100% {
38 | -webkit-transform: rotate(360deg);
39 | }
40 | }
41 | @keyframes rotate {
42 | 0% {
43 | transform: rotate(0deg);
44 | }
45 | 50% {
46 | transform: rotate(180deg);
47 | }
48 | 100% {
49 | transform: rotate(360deg);
50 | }
51 | }
--------------------------------------------------------------------------------
/examples/json/update.json:
--------------------------------------------------------------------------------
1 | {
2 | "lists":[
3 | {
4 | "title":"Apple 苹果 iPhone 6 Plus 16G 4G手机 金色 公开版(三网通用A1524)",
5 | "pic":"http://d8.yihaodianimg.com/N05/M00/24/DF/CgQI0lQ3umiAYat_AAMa5tG_TXY20001_80x80.jpg",
6 | "link":"#1",
7 | "date":"2015-01-01"
8 | },
9 | {
10 | "title":"Meizu 魅族 魅蓝note 移动4G手机16G版 蓝色 双卡双待",
11 | "pic":"http://d7.yihaodianimg.com/N06/M06/A3/BE/CgQIzlSrnfaAHAzvAAJ8k2SN73Q20901_80x80.jpg",
12 | "link":"#2",
13 | "date":"2015-01-02"
14 | },
15 | {
16 | "title":"Meizu 魅族 MX4 Pro 移动4G手机16G版 金色",
17 | "pic":"http://d6.yihaodianimg.com/N06/M0B/10/41/CgQIzlUGpeeAXg4zAAOEHqy2RVU97901_80x80.jpg",
18 | "link":"#3",
19 | "date":"2015-01-03"
20 | },
21 | {
22 | "title":"华为 Mate7 MT7-CL00 标准版 电信4G手机 月光银 双卡双待双通 16G存储内存版",
23 | "pic":"http://d6.yihaodianimg.com/N07/M04/F0/85/CgQI0FRHF-KAbTYpAANdzqOuu-411501_80x80.jpg",
24 | "link":"#4",
25 | "date":"2015-01-04"
26 | },
27 | {
28 | "title":"小米 小米4 MI4 4G智能手机 白色 联通合约版",
29 | "pic":"http://d9.yihaodianimg.com/N06/M0B/F2/B7/CgQIzlTz89-AfGaAAAJZPMkqd-476801_80x80.jpg",
30 | "link":"#5",
31 | "date":"2015-01-05"
32 | },
33 | {
34 | "title":"Lenovo 联想 笋尖 S60-t 樱花粉 移动4G手机 双卡双待",
35 | "pic":"http://d8.yihaodianimg.com/V00/M03/D9/36/CgQDslT9YrKAMMsoAABq-UGgxY401201_80x80.jpg",
36 | "link":"#6",
37 | "date":"2015-01-06"
38 | },
39 | {
40 | "title":"Sony 索尼 Xperia Z2 L50U 4G智能手机 白色 联通定制",
41 | "pic":"http://d9.yihaodianimg.com/N04/M07/C6/07/CgQDr1Ny7EOAax5LAAENzd6wWAI46401_80x80.jpg",
42 | "link":"#7",
43 | "date":"2015-01-07"
44 | },
45 | {
46 | "title":"Nubia 努比亚 大牛3 Z7 Max (NX505H)联通移动双4G手机 黑色 双卡双待",
47 | "pic":"http://d8.yihaodianimg.com/N03/M04/82/54/CgQCs1Ppq7uAFJV1AAanTDJTG3091901_80x80.jpg",
48 | "link":"#8",
49 | "date":"2015-01-08"
50 | },
51 | {
52 | "title":"Lenovo 联想 乐檬 K3(K30-W)16G 典雅黄 联通4G手机 双卡双待",
53 | "pic":"http://d6.yihaodianimg.com/N06/M0A/E7/B7/ChEbu1T_9eyAcy-fAAFIOWgIFnY38501_80x80.jpg",
54 | "link":"#9",
55 | "date":"2015-01-09"
56 | },
57 | {
58 | "title":"华为 荣耀 3X畅玩版 G750-T01 移动3G手机 手机 白色",
59 | "pic":"http://d8.yihaodianimg.com/N02/M0A/A5/5B/CgQCsFM-HxyAP2alAARr1DWBiAM30401_80x80.jpg",
60 | "link":"#10",
61 | "date":"2015-01-10"
62 | }
63 | ]
64 | }
--------------------------------------------------------------------------------
/examples/json/more.json:
--------------------------------------------------------------------------------
1 | {
2 | "lists":[
3 | {
4 | "title":"Apple 苹果 iPhone 6s Plus (A1699) 16G 玫瑰金色 移动联通电信4G 全网通手机",
5 | "pic":"http://d8.yihaodianimg.com/N05/M03/D4/1E/CgQI0lYEBwWAQIvJAAFyostaOYY12501_80x80.jpg",
6 | "link":"#1",
7 | "date":"2015-12-01"
8 | },
9 | {
10 | "title":"Letv 乐视1S 乐1S 移动联通双4G 双卡双待 16GB 金",
11 | "pic":"http://d9.yihaodianimg.com/N07/M00/6B/E6/CgQIz1ZNQWeALuYuAASH8T5MJzY38001_80x80.jpg",
12 | "link":"#2",
13 | "date":"2015-12-02"
14 | },
15 | {
16 | "title":"NOKIA/诺基亚 2610 nokia 2610 经典诺基亚直板手机 学生备用老人手机 诺基亚低端功能机",
17 | "pic":"http://d8.yihaodianimg.com/N08/M0A/6B/E1/ChEi1lZhlgSAEES9AAIPUw3996808600_80x80.jpg",
18 | "link":"#3",
19 | "date":"2015-12-03"
20 | },
21 | {
22 | "title":"华为 Mate8 NXT-TL00 3GB+32GB版 移动定制 月光银",
23 | "pic":"http://d6.yihaodianimg.com/N09/M00/78/AA/ChEi2VZpRZCAeyz-AAP2yE5HMTQ17001_80x80.jpg",
24 | "link":"#4",
25 | "date":"2015-12-04"
26 | },
27 | {
28 | "title":"锤子 坚果 32GB 红色 移动联通4G手机 双卡双待",
29 | "pic":"http://d6.yihaodianimg.com/N07/M01/98/48/CgQI0FY3GNuAeKARAARTi1sTc0E99401_80x80.jpg",
30 | "link":"#5",
31 | "date":"2015-12-05"
32 | },
33 | {
34 | "title":"华为荣耀7i ATH-AL00 3G内存增强版 移动联通电信4G 沙滩金 双卡双待",
35 | "pic":"http://d9.yihaodianimg.com/N05/M0A/B6/5A/CgQI0lX45JWANx7NAANWUytnWfY51201_80x80.jpg",
36 | "link":"#6",
37 | "date":"2015-12-06"
38 | },
39 | {
40 | "title":"小米 红米2A 增强版 白色 16G 移动4G手机 官网版 双卡双待",
41 | "pic":"http://d6.yihaodianimg.com/N08/M08/94/33/ChEi1FX_oHWAWJYUAAL4rKvikTE54401_80x80.jpg",
42 | "link":"#7",
43 | "date":"2015-12-07"
44 | },
45 | {
46 | "title":"Samsung 三星 Galaxy Note4 N9108V 移动4G手机 幻影白",
47 | "pic":"http://d8.yihaodianimg.com/N06/M06/8A/B9/CgQIzVQj87GAZ2-bAAMyoIZt8v863301_80x80.jpg",
48 | "link":"#8",
49 | "date":"2015-12-08"
50 | },
51 | {
52 | "title":"HTC Desire 826T 魔幻蓝 移动4G手机 双卡双待",
53 | "pic":"http://d8.yihaodianimg.com/N06/M04/DC/24/ChEbu1T4HVeASjwEAAGHikpYgyQ10901_80x80.jpg",
54 | "link":"#9",
55 | "date":"2015-12-09"
56 | },
57 | {
58 | "title":"华为 荣耀畅玩4X Che2-UL00 联通标配版4G手机 双卡双待双通 白色",
59 | "pic":"http://d8.yihaodianimg.com/N05/M05/BE/72/ChEbulTYbhyAY_DmAAGmsWjdGgY32601_80x80.jpg",
60 | "link":"#10",
61 | "date":"2015-12-10"
62 | },
63 | {
64 | "title":"vivo X6A 全网通4G手机 4GB+64GB 双卡双待 金色",
65 | "pic":"http://d7.yihaodianimg.com/N05/M0B/89/7D/CgQI01Zb6yGAL2SWAAWXMCmZ7gk97001_80x80.jpg",
66 | "link":"#11",
67 | "date":"2015-12-11"
68 | },
69 | {
70 | "title":"金来 X7 5.5英寸大屏 移动联通双4G手机 智能指纹识别 双卡双待土豪金16GB非合约机官方标配",
71 | "pic":"http://d9.yihaodianimg.com/N10/M09/69/F7/ChEi3FZf6C-AIC74AAOQYliXK7g41100_80x80.jpg",
72 | "link":"#12",
73 | "date":"2015-12-12"
74 | },
75 | {
76 | "title":"Haier海尔 M351L 中文超大按键 一键呼救超大音量弧面老人手机黑色0MB非合约机官方标配",
77 | "pic":"http://d8.yihaodianimg.com/N07/M0A/26/E3/CgQI0FaOLTqAYj5tAAJ-GtDx_Fk90800_80x80.jpg",
78 | "link":"#13",
79 | "date":"2015-12-13"
80 | },
81 | {
82 | "title":"Samsung 三星 Galaxy A7(2016) A7100 白色 16G 移动联通电信4G手机 双卡双待",
83 | "pic":"http://d7.yihaodianimg.com/N06/M05/F8/C4/ChEbu1Zw_n6ALMiLAAILdjwAoqw20801_80x80.jpg",
84 | "link":"#14",
85 | "date":"2015-12-14"
86 | },
87 | {
88 | "title":"Haier海尔 M352L 移动/联通2G 翻盖老人机 2.4英寸屏老人手机 长待机老年机金色0MB非合约机官方标配",
89 | "pic":"http://d8.yihaodianimg.com/N05/M0A/82/F7/CgQI01ZYI-KAMMwzAAFW6ZSR3Tg50500_80x80.jpg",
90 | "link":"#15",
91 | "date":"2015-12-15"
92 | }
93 | ]
94 | }
--------------------------------------------------------------------------------
/dist/dropload.min.js:
--------------------------------------------------------------------------------
1 | /**
2 | * dropload
3 | * 西门(http://ons.me/526.html)
4 | * 0.9.0(160215)
5 | */
6 | !function(a){"use strict";function g(a){a.touches||(a.touches=a.originalEvent.touches)}function h(a,b){b._startY=a.touches[0].pageY,b.touchScrollTop=b.$scrollArea.scrollTop()}function i(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.touchScrollTop<=0&&"down"==c.direction&&!c.isLockUp&&(b.preventDefault(),c.$domUp=a("."+c.opts.domUp.domClass),c.upInsertDOM||(c.$element.prepend('
'),c.upInsertDOM=!0),n(c.$domUp,0),d<=c.opts.distance?(c._offsetY=d,c.$domUp.html(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(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}))}function j(b){var c=Math.abs(b._moveY);""!=b.opts.loadUpFn&&b.touchScrollTop<=0&&"down"==b.direction&&!b.isLockUp&&(n(b.$domUp,300),c>b.opts.distance?(b.$domUp.css({height:b.$domUp.children().height()}),b.$domUp.html(b.opts.domUp.domLoad),b.loading=!0,b.opts.loadUpFn(b)):b.$domUp.css({height:"0"}).on("webkitTransitionEnd mozTransitionEnd transitionend",function(){b.upInsertDOM=!1,a(this).remove()}),b._moveY=0)}function k(a){a.opts.autoLoad&&a._scrollContentHeight-a._threshold<=a._scrollWindowHeight&&m(a)}function l(a){a._scrollContentHeight=a.opts.scrollArea==b?e.height():a.$element[0].scrollHeight}function m(a){a.direction="up",a.$domDown.html(a.opts.domDown.domLoad),a.loading=!0,a.opts.loadDownFn(a)}function n(a,b){a.css({"-webkit-transition":"all "+b+"ms",transition:"all "+b+"ms"})}var f,b=window,c=document,d=a(b),e=a(c);a.fn.dropload=function(a){return new f(this,a)},f=function(a,b){var c=this;c.$element=a,c.upInsertDOM=!1,c.loading=!1,c.isLockUp=!1,c.isLockDown=!1,c.isData=!0,c._scrollTop=0,c._threshold=0,c.init(b)},f.prototype.init=function(f){var l=this;l.opts=a.extend(!0,{},{scrollArea:l.$element,domUp:{domClass:"dropload-up",domRefresh:'↓下拉刷新
',domUpdate:'↑释放更新
',domLoad:'加载中...
'},domDown:{domClass:"dropload-down",domRefresh:'↑上拉加载更多
',domLoad:'加载中...
',domNoData:'暂无数据
'},autoLoad:!0,distance:50,threshold:"",loadUpFn:"",loadDownFn:""},f),""!=l.opts.loadDownFn&&(l.$element.append(''+l.opts.domDown.domRefresh+"
"),l.$domDown=a("."+l.opts.domDown.domClass)),l._threshold=l.$domDown&&""===l.opts.threshold?Math.floor(1*l.$domDown.height()/3):l.opts.threshold,l.opts.scrollArea==b?(l.$scrollArea=d,l._scrollContentHeight=e.height(),l._scrollWindowHeight=c.documentElement.clientHeight):(l.$scrollArea=l.opts.scrollArea,l._scrollContentHeight=l.$element[0].scrollHeight,l._scrollWindowHeight=l.$element.height()),k(l),d.on("resize",function(){l._scrollWindowHeight=l.opts.scrollArea==b?b.innerHeight:l.$element.height()}),l.$element.on("touchstart",function(a){l.loading||(g(a),h(a,l))}),l.$element.on("touchmove",function(a){l.loading||(g(a,l),i(a,l))}),l.$element.on("touchend",function(){l.loading||j(l)}),l.$scrollArea.on("scroll",function(){l._scrollTop=l.$scrollArea.scrollTop(),""!=l.opts.loadDownFn&&!l.loading&&!l.isLockDown&&l._scrollContentHeight-l._threshold<=l._scrollWindowHeight+l._scrollTop&&m(l)})},f.prototype.lock=function(a){var b=this;void 0===a?"up"==b.direction?b.isLockDown=!0:"down"==b.direction?b.isLockUp=!0:(b.isLockUp=!0,b.isLockDown=!0):"up"==a?b.isLockUp=!0:"down"==a&&(b.isLockDown=!0,b.direction="up")},f.prototype.unlock=function(){var a=this;a.isLockUp=!1,a.isLockDown=!1,a.direction="up"},f.prototype.noData=function(a){var b=this;void 0===a||1==a?b.isData=!1:0==a&&(b.isData=!0)},f.prototype.resetload=function(){var b=this;"down"==b.direction&&b.upInsertDOM?b.$domUp.css({height:"0"}).on("webkitTransitionEnd mozTransitionEnd transitionend",function(){b.loading=!1,b.upInsertDOM=!1,a(this).remove(),l(b)}):"up"==b.direction&&(b.loading=!1,b.isData?(b.$domDown.html(b.opts.domDown.domRefresh),l(b),k(b)):b.$domDown.html(b.opts.domDown.domNoData))}}(window.Zepto||window.jQuery);
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # dropload
2 | a javascript implementation of pull to refresh and up to loadmore
3 |
4 | 移动端下拉刷新、上拉加载更多插件
5 |
6 | ## 背景介绍 (introduce)
7 |
8 | 年前把tab例子加上来让群友测试,果然群众的力量是伟大的!立马就检测出来bug,我当即修复好,只是用法比较复杂,暂时还想不出更方便的办法。顺便把上个版本的`dropReload()` API删掉,功能集成到之前`resetload()`里。另外还修复一个朋友发现的只调用下拉刷新,代码判断bug。
9 |
10 | [历史背景介绍](Intro.md)
11 |
12 | ## 最新版本 (The latest version)
13 |
14 | ### 0.9.0(160215)
15 |
16 | * 删除`dropReload()` API,功能集成到之前`resetload()`里
17 | * 优化`noData()`,`noData(false)`为有数据
18 | * 修复只调用下拉刷新,不调用上拉加载更多bug
19 |
20 | [所有更新日志](Changelog.md)
21 |
22 | ## 示例 (demo)
23 |
24 | 
25 | [DEMO1,加载底部(loadmore)](http://ximan.github.io/dropload/examples/load-bottom.html)
26 |
27 | 
28 | [DEMO2,加载顶部、底部(refresh & loadmore)](http://ximan.github.io/dropload/examples/load-top-bottom.html)
29 |
30 | 
31 | [DEMO3,特殊布局,加载顶部、底部(refresh & loadmore with fixed navbar)](http://ximan.github.io/dropload/examples/product-list.html)
32 |
33 | 
34 | [DEMO4,按需加载](http://ximan.github.io/dropload/examples/multiple-load.html)
35 |
36 | 
37 | [DEMO5,tab加载数据](http://ximan.github.io/dropload/examples/tab.html)
38 |
39 | ## 依赖 (dependence)
40 |
41 | Zepto 或者 jQuery 1.7以上版本,推荐jQuery 2.x版本(二者不要同时引用)
42 |
43 | Zepto or jQuery 1.7+,recommend to use jQuery 2.x(not use them at the same time)
44 |
45 | ## 使用方法 (usage)
46 |
47 | 引用css和js
48 |
49 | (basic)
50 |
51 |
52 |
53 |
54 | ````
55 | $('.element').dropload({
56 | scrollArea : window,
57 | loadDownFn : function(me){
58 | $.ajax({
59 | type: 'GET',
60 | url: 'json/more.json',
61 | dataType: 'json',
62 | success: function(data){
63 | alert(data);
64 | // 每次数据加载完,必须重置
65 | me.resetload();
66 | },
67 | error: function(xhr, type){
68 | alert('Ajax error!');
69 | // 即使加载出错,也得重置
70 | me.resetload();
71 | }
72 | });
73 | }
74 | });
75 | ````
76 | (注明:所有示例里`ajax`和`setTimeout`都是为了模拟加载效果而写的,与本插件无直接关系。`ajax`建议自己写,无特殊情况不必copy我的`ajax`写法,因为写得太烂。如需下载本地运行,请在本机装服务器环境,否则`ajax`会报错。)
77 |
78 | ## 参数列表 (options)
79 |
80 | | 参数 | 说明 | 默认值 | 可填值 |
81 | |------------|-------------|--------|----------------|
82 | | scrollArea | 滑动区域 | 绑定元素自身 | window |
83 | | domUp | 上方DOM | {
domClass : 'dropload-up',
domRefresh : '<div class="dropload-refresh">↓下拉刷新</div>',
domUpdate : '<div class="dropload-update">↑释放更新</div>',
domLoad : '<div class="dropload-load">○加载中...</div>'
} | 数组 |
84 | | domDown | 下方DOM | {
domClass : 'dropload-down',
domRefresh : '<div class="dropload-refresh">↑上拉加载更多</div>',
domLoad : '<div class="dropload-load">○加载中...</div>',
domNoData : '<div class="dropload-noData">暂无数据</div>'
} | 数组 |
85 | | autoLoad | 自动加载 | true | true和false |
86 | | distance | 拉动距离 | 50 | 数字 |
87 | | threshold | 提前加载距离 | 加载区高度2/3 | 正整数 |
88 | | loadUpFn | 上方function | 空 | function(me){
//你的代码
me.resetload();
} |
89 | | loadDownFn | 下方function | 空 | function(me){
//你的代码
me.resetload();
} |
90 |
91 | ## API
92 |
93 | 暴露一些功能,可以让dropload更灵活的使用
94 |
95 | `lock()` 锁定dropload
96 |
97 | | 参数 | 说明 |
98 | |----------------|----------------------------|
99 | | `lock()` | 智能锁定,锁定上一次加载的方向 |
100 | | `lock('up')` | 锁定上方 |
101 | | `lock('down')` | 锁定下方 |
102 |
103 | `unlock()` 解锁dropload
104 |
105 | `noData()` 无数据
106 |
107 | | 参数 | 说明 |
108 | |----------------|----------------------------|
109 | | `noData()` | 无数据 |
110 | | `noData(true)` | 无数据 |
111 | | `noData(false)`| 有数据 |
112 |
113 | `resetload()` 重置。每次数据加载完,必须重置
114 |
115 | `dropReload()` 手动加载
116 |
117 | ## 已知问题
118 |
119 | * 由于部分Android中UC和QQ浏览器头部有地址栏,并且一开始滑动页面隐藏地址栏时,无法触发scroll和resize,所以会导致部分情况无法使用。解决方案1:增加distance距离,例如DEMO2中distance:50;解决方案2:加`meta`使之全屏显示
120 | ````
121 |
122 |
123 | ````
124 | 例如DEMO1
125 |
126 | ## dropload使用交流群
127 |
128 | [群号:290725368,点击加群](http://shang.qq.com/wpa/qunwpa?idkey=2c58606fdfb5d6be4021a678e1506fdbbbc480aabdca0eeb115c2f4ff5bc69ee)
129 |
--------------------------------------------------------------------------------
/examples/load-bottom.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | 加载底部
6 |
7 |
8 |
9 |
10 |
99 |
100 |
101 |
102 |
105 |
108 |
109 |
110 |
111 |
163 |
164 |
--------------------------------------------------------------------------------
/examples/multiple-load.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | 多次加载
6 |
102 |
103 |
104 |
105 |
108 |
111 |
112 |
113 |
114 |
181 |
182 |
--------------------------------------------------------------------------------
/examples/tab.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | tab加载多个数据
6 |
111 |
112 |
113 |
114 |
118 |
122 |
123 |
124 |
125 |
250 |
251 |
--------------------------------------------------------------------------------
/examples/load-top-bottom.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | 加载顶部、底部
6 |
132 |
133 |
134 |
135 |
138 |
202 |
208 |
209 |
210 |
211 |
309 |
310 |
--------------------------------------------------------------------------------
/dist/dropload.js:
--------------------------------------------------------------------------------
1 | /**
2 | * dropload
3 | * 西门(http://ons.me/526.html)
4 | * 0.9.0(160215)
5 | */
6 |
7 | ;(function($){
8 | 'use strict';
9 | var win = window;
10 | var doc = document;
11 | var $win = $(win);
12 | var $doc = $(doc);
13 | //设置下拉距离dist的标记
14 | var dist1 = false,dist2 = false,dist3 = false;
15 | $.fn.dropload = function(options){
16 | return new MyDropLoad(this, options);
17 | };
18 | var MyDropLoad = function(element, options){
19 | var me = this;
20 | me.$element = element;
21 | // 上方是否插入DOM
22 | me.upInsertDOM = false;
23 | // loading状态
24 | me.loading = false;
25 | // 是否锁定
26 | me.isLockUp = false;
27 | me.isLockDown = false;
28 | // 是否有数据
29 | me.isData = true;
30 | me._scrollTop = 0;
31 | me._threshold = 0;
32 | me.init(options);
33 | };
34 |
35 | // 初始化
36 | MyDropLoad.prototype.init = function(options){
37 | var me = this;
38 | me.opts = $.extend(true, {}, {
39 | scrollArea : me.$element, // 滑动区域
40 | domUp : { // 上方DOM
41 | domClass : 'dropload-up',
42 | domRefresh : '↓下拉刷新
',
43 | domUpdate : '↑释放更新
',
44 | domLoad : '加载中...
'
45 | },
46 | domDown : { // 下方DOM
47 | domClass : 'dropload-down',
48 | domRefresh : '↑上拉加载更多
',
49 | domLoad : '加载中...
',
50 | domNoData : '暂无数据
'
51 | },
52 | autoLoad : true, // 自动加载
53 | distance : 50, // 拉动距离
54 | threshold : '', // 提前加载距离
55 | loadUpFn : '', // 上方function
56 | loadDownFn : '' // 下方function
57 | }, options);
58 |
59 | // 如果加载下方,事先在下方插入DOM
60 | if(me.opts.loadDownFn != ''){
61 | me.$element.append(''+me.opts.domDown.domRefresh+'
');
62 | me.$domDown = $('.'+me.opts.domDown.domClass);
63 | }
64 |
65 | // 计算提前加载距离
66 | if(!!me.$domDown && me.opts.threshold === ''){
67 | // 默认滑到加载区2/3处时加载
68 | me._threshold = Math.floor(me.$domDown.height()*1/3);
69 | }else{
70 | me._threshold = me.opts.threshold;
71 | }
72 |
73 | // 判断滚动区域
74 | if(me.opts.scrollArea == win){
75 | me.$scrollArea = $win;
76 | // 获取文档高度
77 | me._scrollContentHeight = $doc.height();
78 | // 获取win显示区高度 —— 这里有坑
79 | me._scrollWindowHeight = doc.documentElement.clientHeight;
80 | }else{
81 | me.$scrollArea = me.opts.scrollArea;
82 | me._scrollContentHeight = me.$element[0].scrollHeight;
83 | me._scrollWindowHeight = me.$element.height();
84 | }
85 | fnAutoLoad(me);
86 |
87 | // 窗口调整
88 | $win.on('resize',function(){
89 | if(me.opts.scrollArea == win){
90 | // 重新获取win显示区高度
91 | me._scrollWindowHeight = win.innerHeight;
92 | }else{
93 | me._scrollWindowHeight = me.$element.height();
94 | }
95 | });
96 |
97 | // 绑定触摸
98 | me.$element.on('touchstart',function(e){
99 | if(!me.loading){
100 | fnTouches(e);
101 | fnTouchstart(e, me);
102 | }
103 | });
104 | me.$element.on('touchmove',function(e){
105 | if(!me.loading){
106 | fnTouches(e, me);
107 | fnTouchmove(e, me);
108 | }
109 | });
110 | me.$element.on('touchend',function(){
111 | if(!me.loading){
112 | fnTouchend(me);
113 | }
114 | });
115 |
116 | // 加载下方
117 | me.$scrollArea.on('scroll',function(){
118 | me._scrollTop = me.$scrollArea.scrollTop();
119 |
120 | // 滚动页面触发加载数据
121 | if(me.opts.loadDownFn != '' && !me.loading && !me.isLockDown && (me._scrollContentHeight - me._threshold) <= (me._scrollWindowHeight + me._scrollTop)){
122 | loadDown(me);
123 | }
124 | });
125 | };
126 |
127 | // touches
128 | function fnTouches(e){
129 | if(!e.touches){
130 | e.touches = e.originalEvent.touches;
131 | }
132 | }
133 |
134 | // touchstart
135 | function fnTouchstart(e, me){
136 | me._startY = e.touches[0].pageY;
137 | // 记住触摸时的scrolltop值
138 | me.touchScrollTop = me.$scrollArea.scrollTop();
139 | }
140 |
141 | // touchmove
142 | function fnTouchmove(e, me){
143 | me._curY = e.touches[0].pageY;
144 | me._moveY = me._curY - me._startY;
145 |
146 | if(me._moveY > 0){
147 | me.direction = 'down';
148 | }else if(me._moveY < 0){
149 | me.direction = 'up';
150 | }
151 |
152 | var _absMoveY = Math.abs(me._moveY);
153 |
154 | // 加载上方
155 | if(me.opts.loadUpFn != '' && me.touchScrollTop <= 0 && me.direction == 'down' && !me.isLockUp){
156 | e.preventDefault();
157 |
158 | me.$domUp = $('.'+me.opts.domUp.domClass);
159 | // 如果加载区没有DOM
160 | if(!me.upInsertDOM){
161 | me.$element.prepend('');
162 | me.upInsertDOM = true;
163 | }
164 |
165 | fnTransition(me.$domUp,0);
166 |
167 | // 下拉
168 | if(_absMoveY <= me.opts.distance){
169 | me._offsetY = _absMoveY;
170 | // todo:move时会不断清空、增加dom,有可能影响性能,下同
171 | (!dist1 || dist2)?dist1=false:'';
172 | if (_absMoveY>15){
173 | !dist1 && me.$domUp.html(me.opts.domUp.domRefresh);
174 | dist1 = true;
175 | dist2 = false;
176 | }
177 | // 指定距离 < 下拉距离 < 指定距离*2
178 | }else if(_absMoveY > me.opts.distance && _absMoveY <= me.opts.distance*2){
179 | me._offsetY = me.opts.distance+(_absMoveY-me.opts.distance)*0.5;
180 | (!dist2 || dist3)?dist2=false:'';
181 | !dist2 && me.$domUp.html(me.opts.domUp.domUpdate);
182 | dist2 = true;
183 | dist3 = false;
184 | // 下拉距离 > 指定距离*2
185 | }else{
186 | me._offsetY = me.opts.distance+me.opts.distance*0.5+(_absMoveY-me.opts.distance*2)*0.2;
187 | dist3 = true;
188 | }
189 |
190 | me.$domUp.css({'height': me._offsetY});
191 | }
192 | }
193 |
194 | // touchend
195 | function fnTouchend(me){
196 | var _absMoveY = Math.abs(me._moveY);
197 | if(me.opts.loadUpFn != '' && me.touchScrollTop <= 0 && me.direction == 'down' && !me.isLockUp){
198 | fnTransition(me.$domUp,300);
199 |
200 | if(_absMoveY > me.opts.distance){
201 | me.$domUp.css({'height':me.$domUp.children().height()});
202 | me.$domUp.html(me.opts.domUp.domLoad);
203 | me.loading = true;
204 | me.opts.loadUpFn(me);
205 | }else{
206 | me.$domUp.css({'height':'0'}).on('webkitTransitionEnd mozTransitionEnd transitionend',function(){
207 | me.upInsertDOM = false;
208 | $(this).remove();
209 | });
210 | }
211 | me._moveY = 0;
212 | }
213 | }
214 |
215 | // 如果文档高度不大于窗口高度,数据较少,自动加载下方数据
216 | function fnAutoLoad(me){
217 | if(me.opts.autoLoad){
218 | if((me._scrollContentHeight - me._threshold) <= me._scrollWindowHeight){
219 | loadDown(me);
220 | }
221 | }
222 | }
223 |
224 | // 重新获取文档高度
225 | function fnRecoverContentHeight(me){
226 | if(me.opts.scrollArea == win){
227 | me._scrollContentHeight = $doc.height();
228 | }else{
229 | me._scrollContentHeight = me.$element[0].scrollHeight;
230 | }
231 | }
232 |
233 | // 加载下方
234 | function loadDown(me){
235 | me.direction = 'up';
236 | me.$domDown.html(me.opts.domDown.domLoad);
237 | me.loading = true;
238 | me.opts.loadDownFn(me);
239 | }
240 |
241 | // 锁定
242 | MyDropLoad.prototype.lock = function(direction){
243 | var me = this;
244 | // 如果不指定方向
245 | if(direction === undefined){
246 | // 如果操作方向向上
247 | if(me.direction == 'up'){
248 | me.isLockDown = true;
249 | // 如果操作方向向下
250 | }else if(me.direction == 'down'){
251 | me.isLockUp = true;
252 | }else{
253 | me.isLockUp = true;
254 | me.isLockDown = true;
255 | }
256 | // 如果指定锁上方
257 | }else if(direction == 'up'){
258 | me.isLockUp = true;
259 | // 如果指定锁下方
260 | }else if(direction == 'down'){
261 | me.isLockDown = true;
262 | // 为了解决DEMO5中tab效果bug,因为滑动到下面,再滑上去点tab,direction=down,所以有bug
263 | me.direction = 'up';
264 | }
265 | };
266 |
267 | // 解锁
268 | MyDropLoad.prototype.unlock = function(){
269 | var me = this;
270 | // 简单粗暴解锁
271 | me.isLockUp = false;
272 | me.isLockDown = false;
273 | // 为了解决DEMO5中tab效果bug,因为滑动到下面,再滑上去点tab,direction=down,所以有bug
274 | me.direction = 'up';
275 | };
276 |
277 | // 无数据
278 | MyDropLoad.prototype.noData = function(flag){
279 | var me = this;
280 | if(flag === undefined || flag == true){
281 | me.isData = false;
282 | }else if(flag == false){
283 | me.isData = true;
284 | }
285 | };
286 |
287 | // 重置
288 | MyDropLoad.prototype.resetload = function(){
289 | var me = this;
290 | if(me.direction == 'down' && me.upInsertDOM){
291 | me.$domUp.css({'height':'0'}).on('webkitTransitionEnd mozTransitionEnd transitionend',function(){
292 | me.loading = false;
293 | me.upInsertDOM = false;
294 | $(this).remove();
295 | fnRecoverContentHeight(me);
296 | });
297 | }else if(me.direction == 'up'){
298 | me.loading = false;
299 | // 如果有数据
300 | if(me.isData){
301 | // 加载区修改样式
302 | me.$domDown.html(me.opts.domDown.domRefresh);
303 | fnRecoverContentHeight(me);
304 | fnAutoLoad(me);
305 | }else{
306 | // 如果没数据
307 | me.$domDown.html(me.opts.domDown.domNoData);
308 | }
309 | }
310 | };
311 |
312 | // css过渡
313 | function fnTransition(dom,num){
314 | dom.css({
315 | '-webkit-transition':'all '+num+'ms',
316 | 'transition':'all '+num+'ms'
317 | });
318 | }
319 | })(window.Zepto || window.jQuery);
--------------------------------------------------------------------------------
/examples/product-list.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | 固定布局,加载顶部、底部
6 |
133 |
134 |
135 |
136 |
210 |
211 |
212 |
213 |
306 |
307 |
--------------------------------------------------------------------------------
/examples/js/zepto.min.js:
--------------------------------------------------------------------------------
1 | /* Zepto v1.1.4 - zepto event ajax form ie - zeptojs.com/license */
2 | var Zepto=function(){function L(t){return null==t?String(t):j[S.call(t)]||"object"}function Z(t){return"function"==L(t)}function $(t){return null!=t&&t==t.window}function _(t){return null!=t&&t.nodeType==t.DOCUMENT_NODE}function D(t){return"object"==L(t)}function R(t){return D(t)&&!$(t)&&Object.getPrototypeOf(t)==Object.prototype}function M(t){return"number"==typeof t.length}function k(t){return s.call(t,function(t){return null!=t})}function z(t){return t.length>0?n.fn.concat.apply([],t):t}function F(t){return t.replace(/::/g,"/").replace(/([A-Z]+)([A-Z][a-z])/g,"$1_$2").replace(/([a-z\d])([A-Z])/g,"$1_$2").replace(/_/g,"-").toLowerCase()}function q(t){return t in f?f[t]:f[t]=new RegExp("(^|\\s)"+t+"(\\s|$)")}function H(t,e){return"number"!=typeof e||c[F(t)]?e:e+"px"}function I(t){var e,n;return u[t]||(e=a.createElement(t),a.body.appendChild(e),n=getComputedStyle(e,"").getPropertyValue("display"),e.parentNode.removeChild(e),"none"==n&&(n="block"),u[t]=n),u[t]}function V(t){return"children"in t?o.call(t.children):n.map(t.childNodes,function(t){return 1==t.nodeType?t:void 0})}function B(n,i,r){for(e in i)r&&(R(i[e])||A(i[e]))?(R(i[e])&&!R(n[e])&&(n[e]={}),A(i[e])&&!A(n[e])&&(n[e]=[]),B(n[e],i[e],r)):i[e]!==t&&(n[e]=i[e])}function U(t,e){return null==e?n(t):n(t).filter(e)}function J(t,e,n,i){return Z(e)?e.call(t,n,i):e}function X(t,e,n){null==n?t.removeAttribute(e):t.setAttribute(e,n)}function W(e,n){var i=e.className||"",r=i&&i.baseVal!==t;return n===t?r?i.baseVal:i:void(r?i.baseVal=n:e.className=n)}function Y(t){var e;try{return t?"true"==t||("false"==t?!1:"null"==t?null:/^0/.test(t)||isNaN(e=Number(t))?/^[\[\{]/.test(t)?n.parseJSON(t):t:e):t}catch(i){return t}}function G(t,e){e(t);for(var n=0,i=t.childNodes.length;i>n;n++)G(t.childNodes[n],e)}var t,e,n,i,C,N,r=[],o=r.slice,s=r.filter,a=window.document,u={},f={},c={"column-count":1,columns:1,"font-weight":1,"line-height":1,opacity:1,"z-index":1,zoom:1},l=/^\s*<(\w+|!)[^>]*>/,h=/^<(\w+)\s*\/?>(?:<\/\1>|)$/,p=/<(?!area|br|col|embed|hr|img|input|link|meta|param)(([\w:]+)[^>]*)\/>/gi,d=/^(?:body|html)$/i,m=/([A-Z])/g,g=["val","css","html","text","data","width","height","offset"],v=["after","prepend","before","append"],y=a.createElement("table"),x=a.createElement("tr"),b={tr:a.createElement("tbody"),tbody:y,thead:y,tfoot:y,td:x,th:x,"*":a.createElement("div")},w=/complete|loaded|interactive/,E=/^[\w-]*$/,j={},S=j.toString,T={},O=a.createElement("div"),P={tabindex:"tabIndex",readonly:"readOnly","for":"htmlFor","class":"className",maxlength:"maxLength",cellspacing:"cellSpacing",cellpadding:"cellPadding",rowspan:"rowSpan",colspan:"colSpan",usemap:"useMap",frameborder:"frameBorder",contenteditable:"contentEditable"},A=Array.isArray||function(t){return t instanceof Array};return T.matches=function(t,e){if(!e||!t||1!==t.nodeType)return!1;var n=t.webkitMatchesSelector||t.mozMatchesSelector||t.oMatchesSelector||t.matchesSelector;if(n)return n.call(t,e);var i,r=t.parentNode,o=!r;return o&&(r=O).appendChild(t),i=~T.qsa(r,e).indexOf(t),o&&O.removeChild(t),i},C=function(t){return t.replace(/-+(.)?/g,function(t,e){return e?e.toUpperCase():""})},N=function(t){return s.call(t,function(e,n){return t.indexOf(e)==n})},T.fragment=function(e,i,r){var s,u,f;return h.test(e)&&(s=n(a.createElement(RegExp.$1))),s||(e.replace&&(e=e.replace(p,"<$1>$2>")),i===t&&(i=l.test(e)&&RegExp.$1),i in b||(i="*"),f=b[i],f.innerHTML=""+e,s=n.each(o.call(f.childNodes),function(){f.removeChild(this)})),R(r)&&(u=n(s),n.each(r,function(t,e){g.indexOf(t)>-1?u[t](e):u.attr(t,e)})),s},T.Z=function(t,e){return t=t||[],t.__proto__=n.fn,t.selector=e||"",t},T.isZ=function(t){return t instanceof T.Z},T.init=function(e,i){var r;if(!e)return T.Z();if("string"==typeof e)if(e=e.trim(),"<"==e[0]&&l.test(e))r=T.fragment(e,RegExp.$1,i),e=null;else{if(i!==t)return n(i).find(e);r=T.qsa(a,e)}else{if(Z(e))return n(a).ready(e);if(T.isZ(e))return e;if(A(e))r=k(e);else if(D(e))r=[e],e=null;else if(l.test(e))r=T.fragment(e.trim(),RegExp.$1,i),e=null;else{if(i!==t)return n(i).find(e);r=T.qsa(a,e)}}return T.Z(r,e)},n=function(t,e){return T.init(t,e)},n.extend=function(t){var e,n=o.call(arguments,1);return"boolean"==typeof t&&(e=t,t=n.shift()),n.forEach(function(n){B(t,n,e)}),t},T.qsa=function(t,e){var n,i="#"==e[0],r=!i&&"."==e[0],s=i||r?e.slice(1):e,a=E.test(s);return _(t)&&a&&i?(n=t.getElementById(s))?[n]:[]:1!==t.nodeType&&9!==t.nodeType?[]:o.call(a&&!i?r?t.getElementsByClassName(s):t.getElementsByTagName(e):t.querySelectorAll(e))},n.contains=a.documentElement.contains?function(t,e){return t!==e&&t.contains(e)}:function(t,e){for(;e&&(e=e.parentNode);)if(e===t)return!0;return!1},n.type=L,n.isFunction=Z,n.isWindow=$,n.isArray=A,n.isPlainObject=R,n.isEmptyObject=function(t){var e;for(e in t)return!1;return!0},n.inArray=function(t,e,n){return r.indexOf.call(e,t,n)},n.camelCase=C,n.trim=function(t){return null==t?"":String.prototype.trim.call(t)},n.uuid=0,n.support={},n.expr={},n.map=function(t,e){var n,r,o,i=[];if(M(t))for(r=0;r=0?e:e+this.length]},toArray:function(){return this.get()},size:function(){return this.length},remove:function(){return this.each(function(){null!=this.parentNode&&this.parentNode.removeChild(this)})},each:function(t){return r.every.call(this,function(e,n){return t.call(e,n,e)!==!1}),this},filter:function(t){return Z(t)?this.not(this.not(t)):n(s.call(this,function(e){return T.matches(e,t)}))},add:function(t,e){return n(N(this.concat(n(t,e))))},is:function(t){return this.length>0&&T.matches(this[0],t)},not:function(e){var i=[];if(Z(e)&&e.call!==t)this.each(function(t){e.call(this,t)||i.push(this)});else{var r="string"==typeof e?this.filter(e):M(e)&&Z(e.item)?o.call(e):n(e);this.forEach(function(t){r.indexOf(t)<0&&i.push(t)})}return n(i)},has:function(t){return this.filter(function(){return D(t)?n.contains(this,t):n(this).find(t).size()})},eq:function(t){return-1===t?this.slice(t):this.slice(t,+t+1)},first:function(){var t=this[0];return t&&!D(t)?t:n(t)},last:function(){var t=this[this.length-1];return t&&!D(t)?t:n(t)},find:function(t){var e,i=this;return e=t?"object"==typeof t?n(t).filter(function(){var t=this;return r.some.call(i,function(e){return n.contains(e,t)})}):1==this.length?n(T.qsa(this[0],t)):this.map(function(){return T.qsa(this,t)}):[]},closest:function(t,e){var i=this[0],r=!1;for("object"==typeof t&&(r=n(t));i&&!(r?r.indexOf(i)>=0:T.matches(i,t));)i=i!==e&&!_(i)&&i.parentNode;return n(i)},parents:function(t){for(var e=[],i=this;i.length>0;)i=n.map(i,function(t){return(t=t.parentNode)&&!_(t)&&e.indexOf(t)<0?(e.push(t),t):void 0});return U(e,t)},parent:function(t){return U(N(this.pluck("parentNode")),t)},children:function(t){return U(this.map(function(){return V(this)}),t)},contents:function(){return this.map(function(){return o.call(this.childNodes)})},siblings:function(t){return U(this.map(function(t,e){return s.call(V(e.parentNode),function(t){return t!==e})}),t)},empty:function(){return this.each(function(){this.innerHTML=""})},pluck:function(t){return n.map(this,function(e){return e[t]})},show:function(){return this.each(function(){"none"==this.style.display&&(this.style.display=""),"none"==getComputedStyle(this,"").getPropertyValue("display")&&(this.style.display=I(this.nodeName))})},replaceWith:function(t){return this.before(t).remove()},wrap:function(t){var e=Z(t);if(this[0]&&!e)var i=n(t).get(0),r=i.parentNode||this.length>1;return this.each(function(o){n(this).wrapAll(e?t.call(this,o):r?i.cloneNode(!0):i)})},wrapAll:function(t){if(this[0]){n(this[0]).before(t=n(t));for(var e;(e=t.children()).length;)t=e.first();n(t).append(this)}return this},wrapInner:function(t){var e=Z(t);return this.each(function(i){var r=n(this),o=r.contents(),s=e?t.call(this,i):t;o.length?o.wrapAll(s):r.append(s)})},unwrap:function(){return this.parent().each(function(){n(this).replaceWith(n(this).children())}),this},clone:function(){return this.map(function(){return this.cloneNode(!0)})},hide:function(){return this.css("display","none")},toggle:function(e){return this.each(function(){var i=n(this);(e===t?"none"==i.css("display"):e)?i.show():i.hide()})},prev:function(t){return n(this.pluck("previousElementSibling")).filter(t||"*")},next:function(t){return n(this.pluck("nextElementSibling")).filter(t||"*")},html:function(t){return 0 in arguments?this.each(function(e){var i=this.innerHTML;n(this).empty().append(J(this,t,e,i))}):0 in this?this[0].innerHTML:null},text:function(t){return 0 in arguments?this.each(function(e){var n=J(this,t,e,this.textContent);this.textContent=null==n?"":""+n}):0 in this?this[0].textContent:null},attr:function(n,i){var r;return"string"!=typeof n||1 in arguments?this.each(function(t){if(1===this.nodeType)if(D(n))for(e in n)X(this,e,n[e]);else X(this,n,J(this,i,t,this.getAttribute(n)))}):this.length&&1===this[0].nodeType?!(r=this[0].getAttribute(n))&&n in this[0]?this[0][n]:r:t},removeAttr:function(t){return this.each(function(){1===this.nodeType&&X(this,t)})},prop:function(t,e){return t=P[t]||t,1 in arguments?this.each(function(n){this[t]=J(this,e,n,this[t])}):this[0]&&this[0][t]},data:function(e,n){var i="data-"+e.replace(m,"-$1").toLowerCase(),r=1 in arguments?this.attr(i,n):this.attr(i);return null!==r?Y(r):t},val:function(t){return 0 in arguments?this.each(function(e){this.value=J(this,t,e,this.value)}):this[0]&&(this[0].multiple?n(this[0]).find("option").filter(function(){return this.selected}).pluck("value"):this[0].value)},offset:function(t){if(t)return this.each(function(e){var i=n(this),r=J(this,t,e,i.offset()),o=i.offsetParent().offset(),s={top:r.top-o.top,left:r.left-o.left};"static"==i.css("position")&&(s.position="relative"),i.css(s)});if(!this.length)return null;var e=this[0].getBoundingClientRect();return{left:e.left+window.pageXOffset,top:e.top+window.pageYOffset,width:Math.round(e.width),height:Math.round(e.height)}},css:function(t,i){if(arguments.length<2){var r=this[0],o=getComputedStyle(r,"");if(!r)return;if("string"==typeof t)return r.style[C(t)]||o.getPropertyValue(t);if(A(t)){var s={};return n.each(t,function(t,e){s[e]=r.style[C(e)]||o.getPropertyValue(e)}),s}}var a="";if("string"==L(t))i||0===i?a=F(t)+":"+H(t,i):this.each(function(){this.style.removeProperty(F(t))});else for(e in t)t[e]||0===t[e]?a+=F(e)+":"+H(e,t[e])+";":this.each(function(){this.style.removeProperty(F(e))});return this.each(function(){this.style.cssText+=";"+a})},index:function(t){return t?this.indexOf(n(t)[0]):this.parent().children().indexOf(this[0])},hasClass:function(t){return t?r.some.call(this,function(t){return this.test(W(t))},q(t)):!1},addClass:function(t){return t?this.each(function(e){if("className"in this){i=[];var r=W(this),o=J(this,t,e,r);o.split(/\s+/g).forEach(function(t){n(this).hasClass(t)||i.push(t)},this),i.length&&W(this,r+(r?" ":"")+i.join(" "))}}):this},removeClass:function(e){return this.each(function(n){if("className"in this){if(e===t)return W(this,"");i=W(this),J(this,e,n,i).split(/\s+/g).forEach(function(t){i=i.replace(q(t)," ")}),W(this,i.trim())}})},toggleClass:function(e,i){return e?this.each(function(r){var o=n(this),s=J(this,e,r,W(this));s.split(/\s+/g).forEach(function(e){(i===t?!o.hasClass(e):i)?o.addClass(e):o.removeClass(e)})}):this},scrollTop:function(e){if(this.length){var n="scrollTop"in this[0];return e===t?n?this[0].scrollTop:this[0].pageYOffset:this.each(n?function(){this.scrollTop=e}:function(){this.scrollTo(this.scrollX,e)})}},scrollLeft:function(e){if(this.length){var n="scrollLeft"in this[0];return e===t?n?this[0].scrollLeft:this[0].pageXOffset:this.each(n?function(){this.scrollLeft=e}:function(){this.scrollTo(e,this.scrollY)})}},position:function(){if(this.length){var t=this[0],e=this.offsetParent(),i=this.offset(),r=d.test(e[0].nodeName)?{top:0,left:0}:e.offset();return i.top-=parseFloat(n(t).css("margin-top"))||0,i.left-=parseFloat(n(t).css("margin-left"))||0,r.top+=parseFloat(n(e[0]).css("border-top-width"))||0,r.left+=parseFloat(n(e[0]).css("border-left-width"))||0,{top:i.top-r.top,left:i.left-r.left}}},offsetParent:function(){return this.map(function(){for(var t=this.offsetParent||a.body;t&&!d.test(t.nodeName)&&"static"==n(t).css("position");)t=t.offsetParent;return t})}},n.fn.detach=n.fn.remove,["width","height"].forEach(function(e){var i=e.replace(/./,function(t){return t[0].toUpperCase()});n.fn[e]=function(r){var o,s=this[0];return r===t?$(s)?s["inner"+i]:_(s)?s.documentElement["scroll"+i]:(o=this.offset())&&o[e]:this.each(function(t){s=n(this),s.css(e,J(this,r,t,s[e]()))})}}),v.forEach(function(t,e){var i=e%2;n.fn[t]=function(){var t,o,r=n.map(arguments,function(e){return t=L(e),"object"==t||"array"==t||null==e?e:T.fragment(e)}),s=this.length>1;return r.length<1?this:this.each(function(t,u){o=i?u:u.parentNode,u=0==e?u.nextSibling:1==e?u.firstChild:2==e?u:null;var f=n.contains(a.documentElement,o);r.forEach(function(t){if(s)t=t.cloneNode(!0);else if(!o)return n(t).remove();o.insertBefore(t,u),f&&G(t,function(t){null==t.nodeName||"SCRIPT"!==t.nodeName.toUpperCase()||t.type&&"text/javascript"!==t.type||t.src||window.eval.call(window,t.innerHTML)})})})},n.fn[i?t+"To":"insert"+(e?"Before":"After")]=function(e){return n(e)[t](this),this}}),T.Z.prototype=n.fn,T.uniq=N,T.deserializeValue=Y,n.zepto=T,n}();window.Zepto=Zepto,void 0===window.$&&(window.$=Zepto),function(t){function l(t){return t._zid||(t._zid=e++)}function h(t,e,n,i){if(e=p(e),e.ns)var r=d(e.ns);return(s[l(t)]||[]).filter(function(t){return!(!t||e.e&&t.e!=e.e||e.ns&&!r.test(t.ns)||n&&l(t.fn)!==l(n)||i&&t.sel!=i)})}function p(t){var e=(""+t).split(".");return{e:e[0],ns:e.slice(1).sort().join(" ")}}function d(t){return new RegExp("(?:^| )"+t.replace(" "," .* ?")+"(?: |$)")}function m(t,e){return t.del&&!u&&t.e in f||!!e}function g(t){return c[t]||u&&f[t]||t}function v(e,i,r,o,a,u,f){var h=l(e),d=s[h]||(s[h]=[]);i.split(/\s/).forEach(function(i){if("ready"==i)return t(document).ready(r);var s=p(i);s.fn=r,s.sel=a,s.e in c&&(r=function(e){var n=e.relatedTarget;return!n||n!==this&&!t.contains(this,n)?s.fn.apply(this,arguments):void 0}),s.del=u;var l=u||r;s.proxy=function(t){if(t=j(t),!t.isImmediatePropagationStopped()){t.data=o;var i=l.apply(e,t._args==n?[t]:[t].concat(t._args));return i===!1&&(t.preventDefault(),t.stopPropagation()),i}},s.i=d.length,d.push(s),"addEventListener"in e&&e.addEventListener(g(s.e),s.proxy,m(s,f))})}function y(t,e,n,i,r){var o=l(t);(e||"").split(/\s/).forEach(function(e){h(t,e,n,i).forEach(function(e){delete s[o][e.i],"removeEventListener"in t&&t.removeEventListener(g(e.e),e.proxy,m(e,r))})})}function j(e,i){return(i||!e.isDefaultPrevented)&&(i||(i=e),t.each(E,function(t,n){var r=i[t];e[t]=function(){return this[n]=x,r&&r.apply(i,arguments)},e[n]=b}),(i.defaultPrevented!==n?i.defaultPrevented:"returnValue"in i?i.returnValue===!1:i.getPreventDefault&&i.getPreventDefault())&&(e.isDefaultPrevented=x)),e}function S(t){var e,i={originalEvent:t};for(e in t)w.test(e)||t[e]===n||(i[e]=t[e]);return j(i,t)}var n,e=1,i=Array.prototype.slice,r=t.isFunction,o=function(t){return"string"==typeof t},s={},a={},u="onfocusin"in window,f={focus:"focusin",blur:"focusout"},c={mouseenter:"mouseover",mouseleave:"mouseout"};a.click=a.mousedown=a.mouseup=a.mousemove="MouseEvents",t.event={add:v,remove:y},t.proxy=function(e,n){var s=2 in arguments&&i.call(arguments,2);if(r(e)){var a=function(){return e.apply(n,s?s.concat(i.call(arguments)):arguments)};return a._zid=l(e),a}if(o(n))return s?(s.unshift(e[n],e),t.proxy.apply(null,s)):t.proxy(e[n],e);throw new TypeError("expected function")},t.fn.bind=function(t,e,n){return this.on(t,e,n)},t.fn.unbind=function(t,e){return this.off(t,e)},t.fn.one=function(t,e,n,i){return this.on(t,e,n,i,1)};var x=function(){return!0},b=function(){return!1},w=/^([A-Z]|returnValue$|layer[XY]$)/,E={preventDefault:"isDefaultPrevented",stopImmediatePropagation:"isImmediatePropagationStopped",stopPropagation:"isPropagationStopped"};t.fn.delegate=function(t,e,n){return this.on(e,t,n)},t.fn.undelegate=function(t,e,n){return this.off(e,t,n)},t.fn.live=function(e,n){return t(document.body).delegate(this.selector,e,n),this},t.fn.die=function(e,n){return t(document.body).undelegate(this.selector,e,n),this},t.fn.on=function(e,s,a,u,f){var c,l,h=this;return e&&!o(e)?(t.each(e,function(t,e){h.on(t,s,a,e,f)}),h):(o(s)||r(u)||u===!1||(u=a,a=s,s=n),(r(a)||a===!1)&&(u=a,a=n),u===!1&&(u=b),h.each(function(n,r){f&&(c=function(t){return y(r,t.type,u),u.apply(this,arguments)}),s&&(l=function(e){var n,o=t(e.target).closest(s,r).get(0);return o&&o!==r?(n=t.extend(S(e),{currentTarget:o,liveFired:r}),(c||u).apply(o,[n].concat(i.call(arguments,1)))):void 0}),v(r,e,u,a,s,l||c)}))},t.fn.off=function(e,i,s){var a=this;return e&&!o(e)?(t.each(e,function(t,e){a.off(t,i,e)}),a):(o(i)||r(s)||s===!1||(s=i,i=n),s===!1&&(s=b),a.each(function(){y(this,e,s,i)}))},t.fn.trigger=function(e,n){return e=o(e)||t.isPlainObject(e)?t.Event(e):j(e),e._args=n,this.each(function(){"dispatchEvent"in this?this.dispatchEvent(e):t(this).triggerHandler(e,n)})},t.fn.triggerHandler=function(e,n){var i,r;return this.each(function(s,a){i=S(o(e)?t.Event(e):e),i._args=n,i.target=a,t.each(h(a,e.type||e),function(t,e){return r=e.proxy(i),i.isImmediatePropagationStopped()?!1:void 0})}),r},"focusin focusout load resize scroll unload click dblclick mousedown mouseup mousemove mouseover mouseout mouseenter mouseleave change select keydown keypress keyup error".split(" ").forEach(function(e){t.fn[e]=function(t){return t?this.bind(e,t):this.trigger(e)}}),["focus","blur"].forEach(function(e){t.fn[e]=function(t){return t?this.bind(e,t):this.each(function(){try{this[e]()}catch(t){}}),this}}),t.Event=function(t,e){o(t)||(e=t,t=e.type);var n=document.createEvent(a[t]||"Events"),i=!0;if(e)for(var r in e)"bubbles"==r?i=!!e[r]:n[r]=e[r];return n.initEvent(t,i,!0),j(n)}}(Zepto),function(t){function l(e,n,i){var r=t.Event(n);return t(e).trigger(r,i),!r.isDefaultPrevented()}function h(t,e,i,r){return t.global?l(e||n,i,r):void 0}function p(e){e.global&&0===t.active++&&h(e,null,"ajaxStart")}function d(e){e.global&&!--t.active&&h(e,null,"ajaxStop")}function m(t,e){var n=e.context;return e.beforeSend.call(n,t,e)===!1||h(e,n,"ajaxBeforeSend",[t,e])===!1?!1:void h(e,n,"ajaxSend",[t,e])}function g(t,e,n,i){var r=n.context,o="success";n.success.call(r,t,o,e),i&&i.resolveWith(r,[t,o,e]),h(n,r,"ajaxSuccess",[e,n,t]),y(o,e,n)}function v(t,e,n,i,r){var o=i.context;i.error.call(o,n,e,t),r&&r.rejectWith(o,[n,e,t]),h(i,o,"ajaxError",[n,i,t||e]),y(e,n,i)}function y(t,e,n){var i=n.context;n.complete.call(i,e,t),h(n,i,"ajaxComplete",[e,n]),d(n)}function x(){}function b(t){return t&&(t=t.split(";",2)[0]),t&&(t==f?"html":t==u?"json":s.test(t)?"script":a.test(t)&&"xml")||"text"}function w(t,e){return""==e?t:(t+"&"+e).replace(/[&?]{1,2}/,"?")}function E(e){e.processData&&e.data&&"string"!=t.type(e.data)&&(e.data=t.param(e.data,e.traditional)),!e.data||e.type&&"GET"!=e.type.toUpperCase()||(e.url=w(e.url,e.data),e.data=void 0)}function j(e,n,i,r){return t.isFunction(n)&&(r=i,i=n,n=void 0),t.isFunction(i)||(r=i,i=void 0),{url:e,data:n,success:i,dataType:r}}function T(e,n,i,r){var o,s=t.isArray(n),a=t.isPlainObject(n);t.each(n,function(n,u){o=t.type(u),r&&(n=i?r:r+"["+(a||"object"==o||"array"==o?n:"")+"]"),!r&&s?e.add(u.name,u.value):"array"==o||!i&&"object"==o?T(e,u,i,n):e.add(n,u)})}var i,r,e=0,n=window.document,o=/