actionsheet一般從底部彈出,顯示一系列可供用戶選擇的操作按鈕; actionsheet是從popover控件基礎上演變而來,實際上就是一個固定從底部彈出的popover,故DOM結構和popove類似,只是需要在含.mui-popover類的節點上增加.mui-popover-bottom、.mui-popover-action類;
~~~
<div id="sheet1" class="mui-popover mui-popover-bottom mui-popover-action ">
<!-- 可選擇菜單 -->
<ul class="mui-table-view">
<li class="mui-table-view-cell">
<a href="#">菜單1</a>
</li>
<li class="mui-table-view-cell">
<a href="#">菜單2</a>
</li>
</ul>
<!-- 取消菜單 -->
<ul class="mui-table-view">
<li class="mui-table-view-cell">
<a href="#sheet1"><b>取消</b></a>
</li>
</ul>
</div>
~~~
和popover一樣,推薦使用錨點方式顯示、隱藏actionsheet;若要使用js代碼動態顯示、隱藏actionsheet,同樣在popover插件的構造方法中傳入"toggle"參數即可,如下:
~~~
//傳入toggle參數,用戶無需關心當前是顯示還是隱藏狀態,mui會自動識別處理;
mui('#sheet1').popover('toggle');
~~~
- 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示例匯總