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);（自己的逻辑代码）
             }
         }