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 | 拖動結束 |