MUI框架 選擇器的使用

js、css引用

<script type="text/javascript" src="librarys/mui/js/mui.min.js"></script>
<script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>

<link rel="stylesheet" href="librarys/mui/css/mui.picker.min.css" />
<script type="text/javascript" src="librarys/mui/js/mui.picker.min.js"></script>

 css

 浮層樣式

.mui-backdrop{
    width: 100%;
    height: 100%;
    position: fixed;
    bottom: 0;
   background: rgba(0,0,0,.6);
}

html

<div><span>選擇套餐</span><i placeholder="點擊選擇套餐" id="showUserPicker"></i></div>

 

js

document.querySelector('#showUserPicker').addEventListener("click", function() {
       var roadPick = new mui.PopPicker();//獲取彈出列表組建，假如是二聯則在括號里面加入{layer:2}
       roadPick.setData([{//設置彈出列表的信息，假如是二聯，還需要一個children屬性
                 value: "1",
                 text: "套餐一"
       }, {
                 value: "2",
                 text: "套餐二"
      }]);
      roadPick.show(function(item) {//彈出列表並在里面寫業務代碼
              var itemCallback=roadPick.getSelectedItems();
              $('#showUserPicker').html(itemCallback[0].text);
     });
});