Html5+Mui前端框架,開發記錄（四）：下拉菜單綁定數據、搜索、時間控件

1.下拉菜單綁定數據，選擇后回傳值

1）html:

    <div class="mui-input-row">
    <label>xxx：</label>
    <input id='zxyy' type="text" class="mui-input-clear mui-input" placeholder="請選擇xxx">
    </div>

2)js:

 1           document.getElementById("zxyy").addEventListener('tap', function() {
                Selectzxyy();
            });

            function Selectzxyy() {
                var specModel = new mui.PopPicker(); //初始化 picker
                mui.ajax({
                    url: getAddress() + '/api/Hospital/get?jsoncallback=?',
                    data: {},
                    async: true,
                    dataType: 'json',
                    crossDomain: true, //強制使用5+跨域  
                    type: 'get',
                    timeout: 10000,
                    success: function(data) {
                        if (data.length > 0) {
                            var item = [];
                            for (var i = 0; i < data.length; i++) {
                                arrStr = {
                                    text: data[i].HospitalName,
                                    value: data[i].Id
                                };
                                item.push(arrStr);
                            }
                            specModel.setData(item);
                            specModel.show(function(item) {

                                var specModelName = item[0].text;
                                var t = document.getElementById('zxyy');
                                t.value = specModelName;
                                t.tabIndex = item[0].value;
                                var specModelValue = item[0].Id;
                            });
                        }
                    },
                    error: function(xhr, type, errorThrown) {}
                });
            }

2.時間控件

1）html:

                <div class="mui-input-row">
                            <label>日期：</label>
                            <input type="datetime" id="startdate" placeholder="請選擇時間" onclick="dtime()">
                        </div>

2)js:

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

 

    function dtime() {
                var Date = new mui.DtPicker({
                    type: 'date'
                });
                var endDate = "";
                Date.show(function(item) {
                    //這里你可以用console 看看回調函數中的item的值                          
                    endDate = item;
                    var s = document.getElementById('startdate');
                    s.value = endDate.toString();
                });
            }

3.搜索

1）html：

1                  <div class="mui-indexed-list-search mui-input-row mui-search">
                
                     <input type="search" id="searchInput" onkeyup="enterSearch(event)" class="mui-input-clear" placeholder="關鍵字">
                    </div>

2）js：

function enterSearch(event){
            if(event.keyCode == 13) {//用戶點擊回車的事件號為13
                var keyword = document.getElementById('searchInput').value;                
        //createFragment(keyword);（自己的邏輯代碼）
            }
        }