點擊列表中某一條內容時整體顏色變灰

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