MUI-城市聯動，日期聯動-picker(選擇器)學習筆記（附最詳註釋）

weixin_34357887發表於2017-06-24
UI筆記
知識點：

城市篇

  • addEventListener(event,function,useCapture) ：方法用於向指定元素新增事件。
addEventListener(事件名，事件需要執行的函式，布林值)
支援：所有HTML DOM事件 
（1）tap和click的區別：
        兩者都會在點選時觸發，但是在手機WEB端，click會有 200~300 ms，所以請用tap代替click作為點選事件。
        (tap有擊穿現象，現在效能過剩，用click可行)
        singleTap和doubleTap 分別代表單次點選和雙次點選。
  • *poppicker元件依賴mui.picker.js/.css mui.poppicker.js/.css請務必在mui.js/css後中引用,也可統一引用 壓縮版本:mui.picker.min.js
這裡需要引入 mui.picker.js   mui.picker.css   mui.poppicker.js   mui.poppicker.css
四個檔案，或者這四個檔案的min檔案
  • 通過new mui.PopPicker() - 初始化popPicker元件
var picker = new  mui.PopPicker({   //這裡注意大小寫PopPicker
layer: 3 ,  //表示三列，即三級選單或者聯動
buttons:['取消', '確定']     //顯示按鈕
})
  • 通過picker.setData - 給picker物件新增資料
setData() 支援資料格式為: 陣列 
 picker.setData([{value:'zz',text:'智子'}]);   //一列樣式
 picker.setData([{     //二列樣式
        value: '110000',
        text: '北京市',
        children: [{
                value: "110101",
                text: "東城區"
        }]
    }])
 picker.setData([{     //三列樣式
        value: '110000',
        text: '北京市',
        children: [{
                value: "110101",
                text: "東城區",
                children:[{
                      value: "111000",
                      text: "中關村" 
                      }]
        }]
    }])
  • 通過picker.show() - 顯示picker
  • 通過picker.show( function(getSelectedItems) { } ) 獲取選中的項（陣列）
PopPicker 建立例項並填充資料後，可以設定每個層級的選中項，因為 PopPicker 
是支援多層級聯的，所以:
(1)可通過 instance.pickers[index] 拿到指定層級的例項，
(2)然後通過setSelectedIndex()和setSelectedValue()兩個方法,設定指定層級的選中項
var picker = new mui.PopPicker();
picker.setData([{
    value: "first",
    text: "第一項"
}, {
    value: "second",
    text: "第一項"
}, {
    value: "third",
    text: "第三項"
}, {
    value: "fourth",
    text: "第四項"
}, {
    value: "fifth",
    text: "第五項"
}])
//picker.pickers[0].setSelectedIndex(4, 2000);     //4和value:''fourth''的區別 
picker.pickers[0].setSelectedValue('fourth', 2000);  
//這裡表示預設選中第一列的第四項，時間是2000毫秒
picker.show(function(SelectedItem) {    //獲取選中的項（陣列）注意大小寫
    console.log(SelectedItem);
})
  • .mui-picker{}可以設定選擇器css樣式；
.mui-picker{
    background-color: #fff;   //設定選擇器背景為白色
   }

日期篇

  • 通過new mui.DtPicker() - 初始化DtPicker元件 //城市是new mui.PopPicker()
  • 通過type - 設定日曆初始檢視模式
  • 通過labels - 設定預設標籤區域提示語
  • 通過beginDate和endDate設定開始，結束日期
  • 通過customData -設定時間/日期別名
  • 通過dtPicker.show( SelectedItemsCallback ) - 顯示dtPicker
var dtpicker = new mui.DtPicker({    //注意大小寫
    "type": "time",  // 時間格式(時分)
                     // "type":"datetime"(年月日時分)
                     // "type":"date"(年月日)
                     // "type":"hour"(年月日時)
    "labels": ['年', 'Mon', 'Day', 'Hour', 'min'],//設定預設標籤區域提示語 
    "beginDate": new Date(2015, 04, 25),//設定開始日期 
    "endDate": new Date(2016, 04, 25),//設定結束日期 
    "customData": {
        "h": [      //時
            { value: "am", text: "上午" },
            { value: "pm", text: "下午" },
        ],
        "i":[
           {value: "10", text: "10分"},
           {value: "20", text: "20分"},
        ]
    } 
})
dtpicker.show(function(items) { 
    /* * items.value 拼合後的 value 
     * items.text 拼合後的 text 
     * items.y 年，可以通過 rs.y.vaue 和 rs.y.text 獲取值和文字 
     * items.m 月，用法同年 
     * items.d 日，用法同年 
     * items.h 時，用法同年 
     * items.i 分（minutes 的第二個字母），用法同年 
     */ 
     console.log(items.d);  //得到選中的年
     })
6493119-d7d008a465205bce.png
QQ截圖20170624231049.png
完整程式碼：

<!DOCTYPE html>
<html>

   <head>
       <meta charset="utf-8">
       <title>Hello MUI</title>
       <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
       <meta name="apple-mobile-web-app-capable" content="yes">
       <meta name="apple-mobile-web-app-status-bar-style" content="black">

       <!--標準mui.css-->
       <link rel="stylesheet" href="mui.min.css">
       <link rel="stylesheet" type="text/css" href="mui.picker.min.css">
       <link rel="stylesheet" type="text/css" href="mui.poppicker.css">
       <!--App自定義的css-->
       <!--<link rel="stylesheet" type="text/css" href="../css/app.css"/>-->
       <style type="text/css">
           /*.mui-poppicker-body{
               background-color: white;
               border: 1px solid red;
               color:yellow;
           }*/
           .mui-picker{
               background-color: white;
           }
           .mui-poppicker-header{
               background-color: white;
           }
       </style>
   </head>

   <body>
       <div id="aa" style="margin: 10px auto;background:yellow;heigth:30px;width: 300px;">選擇城市</div>
   </body>
   <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
   <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script>
   <script type="text/javascript" src="./jquery-1.8.3.min.js" ></script>
   <script src="mui.min.js"></script>
   <script type="text/javascript" src="mui.picker.min.js"></script>
   <script type="text/javascript" src="mui.poppicker.js"></script>
   <script>
var picker = new mui.PopPicker({
   layer: 3,   //3層選單
   buttons:['取消','確定']   // 顯示按鈕名字

});
   picker.setData([{      
       value: '110000',
       text: '北京市',
       children: [{
               value: "110101",
               text: "東城區",
               children: [
                   {
                       value: '110111',
                       text:'中關村'
                   },
                   {
                       value: '110112',
                       text:'中關村2'
                   }
               ]
       }],
   
   }, {
       value: '120000',
       text: '天津市',
       children: [
       {
           value: "120101",
           text: "和平區"
       }, {
           value: "120102",
           text: "河東區"
       }, {
           value: "120104",
           text: "南開區",
           children: [
                   {
                       value:'120105',
                       text:'地下城'
                   },
                   {
                       value:'120106',
                       text:'英雄聯盟'
                   }
               ]
       }
       ]
   }])
picker.pickers[0].setSelectedIndex(1); //預設選擇第1列，第2個元素（即天津市）
picker.pickers[1].setSelectedIndex(2,200,function() {});  //第2列，第三個元素（南開區）
picker.pickers[2].setSelectedIndex(1); // 第3列，（英雄聯盟）
document.getElementById('aa').addEventListener('tap',function() {
   picker.show(function(getSelectedItems){   //獲取選中的項（陣列）
       console.log(getSelectedItems[0].text);  //輸出結果為： 天津市
   })
   // picker.show(function(SelectedItem) {
//     console.log(SelectedItem[0].text);
   // })

});
   </script>
</html>

相關文章