1. 程式人生 > >mui框架 選擇器的使用

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>

 

html

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

 

js

document.querySelector('#showUserPicker').addEventListener("tap", 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);
     });
});