html代码:
<li class="mui-table-view-cell mui-media mui-collapse-content"></li>
再在CSS样式中定义一个变灰状态的样式:
.active{
background-color: #EEEEEE;
}
最后使用.on()
方法实现元素的事件绑定,在按住屏幕的时候,给列表加上述样式:
mui('body').on('hold','li',function(){
$(this).addClass('active');
})
在手指离开屏幕的时候在去除点中样式即可:
mui('body').on('release','li',function(){
$(this).removeClass('active');
})
注意:绑定hold事件和release事件前应在init方法中配置该事件为打开状态,因为大部分事件都是默认关闭的
mui.init({
gestureConfig:{
hold:true,//默认为false,不监听
release:true//默认为false,不监听
}
});
附:mui目前支持的手势事件见如下列表:
分类 | 参数 | 描述 |
---|---|---|
点击 | tap | 单击屏幕 |
doubletap | 双击屏幕 | |
长按 | longtap | 长按屏幕 |
hold | 按住屏幕 | |
release | 离开屏幕 | |
滑动 | swipeleft | 向左滑动 |
swiperight | 向右滑动 | |
swipeup | 向上滑动 | |
swipedown | 向下滑动 | |
拖动 | dragstart | 开始拖动 |
drag | 拖动中 | |
dragend | 拖动结束 |