在popover、側滑菜單等界面,經常會用到蒙版遮罩;比如popover彈出后,除popover控件外的其它區域都會遮罩一層蒙版,用戶點擊蒙版不會觸發蒙版下方的邏輯,而會關閉popover同時關閉蒙版;再比如側滑菜單界面,菜單劃出后,除側滑菜單之外的其它區域都會遮罩一層蒙版,用戶點擊蒙版會關閉側滑菜單同時關閉蒙版。
遮罩蒙版常用的操作包括:創建、顯示、關閉,如下代碼:
~~~
var mask = mui.createMask(callback);//callback為用戶點擊蒙版時自動執行的回調;
mask.show();//顯示遮罩
mask.close();//關閉遮罩
~~~
注意:關閉遮罩僅會關閉,不會銷毀;關閉之后可以再次調用mask.show();打開遮罩;
mui默認的蒙版遮罩使用.mui-backdrop類定義(如下代碼),若需自定義遮罩效果,只需覆蓋定義.mui-backdrop即可;
~~~
.mui-backdrop {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 998;
background-color: rgba(0,0,0,.3);
}
~~~
- mui
- 拓展
- 本地存儲
- 獲取時間
- 滾動幀聽
- ui組件
- accordion(折疊面板)
- actionsheet(操作表)
- badge(數字角標)
- button(按鈕)
- cardview(卡片視圖)
- checkbox(復選框)
- dialog(對話框)
- 圖片輪播
- 輸入增強
- list(列表)
- 遮罩蒙版
- media list(圖文列表)
- numbox(數字輸入框)
- 側滑導航
- 彈出菜單
- picker(選擇器)
- popPicker
- dtpicker
- progressbar(滾動條)
- radio(單選框)
- range(滑塊)
- scroll(區域滾動)
- slide(輪播組件)
- switch(開關)
- 手機底層
- 蜂鳴提示音和手機震動
- 設備信息
- 手機信息
- 電話
- 發送短信
- 消息框
- 瀏覽器打開網頁
- 界面
- 手勢
- 輪播組件
- 底部導航
- 打開新頁面
- 遮罩
- webview詳解
- js基礎
- 數組
- mui教程
- 教程— html5+ webview 底部欄用法詳解(二)(轉載)
- 自動彈出虛擬鍵盤
- Native.js示例匯總