Quo.js实现网站触屏功能

浏览数：28 / 时间：2015年06月09日

随着NLifeBill的完成，手机版的我也在开始处理了。本来想写个安卓版的，但是我不会安卓啊，而且我想到如果安卓版的就算我会那么在其他平台上面一样还是不能使用，我干脆直接修改网站支持手机就可以了，这样各个平台就都OK了。想着就这么做了，

最开始的时候我想的是jquery mobile的，其实我也用了，但是弄了一天之后我就不用了，组件太少，定制不方便，和bootstrap不能完美的结合。而且加载不同页面的方式也不一样，传值也不方便等待。所以我就不用了，而是选择了Angularjs+bootstrap+自己写样式和js的方式来实现，这里字节写样式主要是因为bootstrap我其实只是用了一小部分，大部分的地方也都是自己写的css，动画都是jquery来处理。当然今天主要是讲解触屏实现这一块的。

最开始为了实现触屏方便的功能我找了好多相关的js,最后发现还是Quo.js最好用。其实这里也没有什么要记录的，因为官网上面的记录太TM详细了。地址：
http://quojs.tapquo.com/
这里面真的是太详细，都配图了都。

这里就记录一点以便以后忘记，因为我的整体框架是使用的是Angularjs。所以要在Angularjs中使用Quo.js，但是Quo.js的获取元素的方式是使用`$$`而这正好和Angularjs有冲突(我去)http://docs.angularjs.org/api这里有说明。然后就要稍作修改。把`Quo.js`的`$$`的方式改成`Quo`这样就行了。

贴上一段代码：

 1         Quo("#p_pub_cont").swipeUp(function(){
 2             //判断天
 3             if(day == 1 && month != 1){   //这个月的第一天，那么前一天就是上个月
 4                 //获取上个月有多少天
 5                 day = daysInMonth(year, month-1);
 6 
 7                 //月份减一
 8                 month--;
 9             }else if(day == 1 && month == 1){  //某年的第一个月第一天，前一天就是上年最后一天
10                 year--;
11                 month = 12;
12                 day = daysInMonth(year, 12);
13             }else if(day > 1){
14                 day--;
15             }
16 
17             showRl(year, month, day);    
18         }).swipeDown(function(){   //向左滑动后一天
19         
20             //获取当月有多少天
21             var days = daysInMonth(year, month);
22 
23             //判断天
24             if(day == days && month != 12){
25                 day = 1;
26 
27                 month++;
28             }else if(day == days && month == 12){  
29                 year++;
30                 month = 1;
31                 day = 1;
32             }else if(day < days){
33                 day++;
34             }
35 
36             showRl(year, month, day);   
37         });