MUI 底部彈出的選擇框

大致是這樣：

第一種方法：這種方法是使用5+的nativeUI原生動畫

1)引入：mui.css或者mui.min.css

　　　　mui.js或者mui.min.js也行

　　　　mui.picker.min.js

代碼：

document.getElementById('觸發對象的ID').addEventListener('tap', function() { 

　　　　if (mui.os.plus) { 

　　　　　　var a = [{ 

　　　　　　　　title: "拍照"          //這些都是可以點擊的選項的內容

　　　　　　}, { 

　　　　　　　　title: "從手機相冊選擇" 

　　　　　　}]; 

　　　　　　plus.nativeUI.actionSheet({ 

　　　　　　　　title: "修改用戶頭像",           //這里就是這個彈窗的title

　　　　　　　　cancel: "取消",                     //取消按鈕

　　　　　　　　buttons: a 

　　　　　　}, function(b) { /*actionSheet 按鈕點擊事件*/ 

　　　　　　　　//這里面就是觸發的事件，比如想做一個選擇性別的彈窗，就可以通過a[b.index].title來獲取當前點擊了男還是女，注意，此處的b.index是從1開始的。要從0開始的話，要記得減1.

　　　　　　}) 

　　　　} 

　　}, false);

 第二種方法：使用mui自帶的彈窗框actionsheet

　1.html

<a href="#picture" class="mui-btn mui-btn-primary ">打開actionsheet</a>

<div id="picture" class="mui-popover 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="#picture"><b>取消</b></a>
        </li>
    </ul>
</div>

 

2. js

mui('#picture').on('tap', 'li>a', function() {
    mui.alert("你剛點擊了\"" + this.innerHTML + "\"按鈕");
//  mui("#picture").popover('toggle');//這是可以用來關閉底部彈窗的事件
})

效果圖：