点击列表中某一条内容时整体颜色变灰

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 拖动结束
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章