最近一个小应用需要做播放器,当然首选jplayer,由于是手机应用,还是用zepto代替了jquery,昨晚折腾了很晚,也没找到为何出错了,比较晚耐心也不好,最终放到了今天。

官方文档,硬是把使用zepto代替jquery的说明拆成了几段,一不小心就跳过了重点

View Code JAVASCRIPT
1
2
3
//如果使用了AMD module需要修改下面的代码
//替换define(['jquery'], factory); 为
define(['zepto'], factory);

那么zepto源码中是没有amd加载支持,这个时候我们需要补充一下

View Code JAVASCRIPT
1
define("zepto", [], function(){return Zepto;});

但发现其实还是使用不了,设置如下可以使jplayer打印出错误日志

View Code JAVASCRIPT
1
2
3
my_jPlayer.jPlayer({
    errorAlerts: true //显示错误信息
})

发现错误日志如下:

jPlayer 2.9.2 : id=’jquery_jplayer’ : Error!
Attempt to issue media playback commands, while no media url is set.
Use setMedia() to set the media URL.
Context: play

那么就是setMedia没有调用到,跟一下源码,在第57行代码var instance = $(this).data(name);得到的结果是”[object Object]”,一看zepto不支持data为object,然后我再看官方文档,重点来了

Zepto
Compatibility verified with:
Zepto 1.0 compiled with Data module

整个人都很难受,为何不仔细看文档,为何不仔细看文档

      最近本来一直忙于写c++的配置中心,写博客的时间越来越少了,前段时间无线同事有几个touch事件的需求我就接了顺便学习练手。我把touch事件抽离出来做了一个封装,理论上这个plugin应该是兼容jquery的,代码不多,下面先上使用方法:

演示地址test.mjix.com下载地址:http://www.mjix.com/wp-code/plugin/zepto.touchwipe.js

View Code JAVASCRIPT
1
2
3
4
5
6
7
8
9
10
11
12
$('#test').touchwipe({
    listen : 'x', //监听x轴方向的滑动
    start  :  function(result){
        alert('开始触屏了');
    },
    move   : function(result){
        alert('正在滑动:'+result.dx+"____"+result.dy);
    },
    stop   : function(result){
        alert('结束了');
    }
});

      目前事件就三个start doing stop,下面对touchwipe的入参配置做一下说明:
1、listen:①、x监听x轴方面的滑动,不影响y轴方面的滚动;②、y监听y轴方面的滑动,不影响x轴方向浏览器自带的切换效果(uc);③、a监听x、y两个方向的触屏,这样浏览器的x和y方向默认事件都将被屏蔽,除非业务需要应该明确指定x和y

2、min_distance:最小触发距离,默认为6像素。

3、start:触屏开始回调事件。参数有{x:起点x值, y:起点y值},适合做一些初始化事情

4、move:触屏移动回调事件。参数有{x:x值, y:y值, dx:x方向移动差值, dy:y方向移动差值, du:(‘x’, ‘y’)其中一值,表明当前趋势为“水平方面滑动”或“垂直方向滑动”},适合做一些效果

5、stop:触屏结束回调事件。参数有{dx:x方向移动差值, dy:y方向移动差值, speed:du方向的速度,可以再移动速度大于多少时做一些触发事件}

备注:方向一致原则:一旦方向确定以后都不会变化,如触屏上去第一次move感知到时为水平反向移动,那么在移动过程中从水平移动变成垂直移动也不会影响du的值。这跟四川麻将的缺一门很像,第一轮打出的那一张就是你注定要缺的那一门,中途是不可以更换的