Html5+Mui前端框架,开发记录（四）：下拉菜单绑定数据、搜索、时间控件

最新推荐文章于 2024-12-25 15:34:56 发布

原创最新推荐文章于 2024-12-25 15:34:56 发布 · 1.7k 阅读

4 ·

CC 4.0 BY-SA版权

UE/UI 专栏收录该内容

20 篇文章

订阅专栏

博客主要介绍前端相关功能实现，包括下拉菜单绑定数据并在选择后回传值，涉及 HTML 和 JS 代码；时间控件的实现，同样给出 HTML 和 JS 代码；还有搜索功能的实现，也包含 HTML 和 JS 代码。

1.下拉菜单绑定数据，选择后回传值

1）html:

1     <div class="mui-input-row">
2     <label>xxx：</label>
3     <input id='zxyy' type="text" class="mui-input-clear mui-input" placeholder="请选择xxx">
4     </div>

2)js:

 1           document.getElementById("zxyy").addEventListener('tap', function() {
 2                 Selectzxyy();
 3             });
 4 
 5             function Selectzxyy() {
 6                 var specModel = new mui.PopPicker(); //初始化 picker
 7                 mui.ajax({
 8                     url: getAddress() + '/api/Hospital/get?jsoncallback=?',
 9                     data: {},
10                     async: true,
11                     dataType: 'json',
12                     crossDomain: true, //强制使用5+跨域  
13                     type: 'get',
14                     timeout: 10000,
15                     success: function(data) {
16                         if (data.length > 0) {
17                             var item = [];
18                             for (var i = 0; i < data.length; i++) {
19                                 arrStr = {
20                                     text: data[i].HospitalName,
21                                     value: data[i].Id
22                                 };
23                                 item.push(arrStr);
24                             }
25                             specModel.setData(item);
26                             specModel.show(function(item) {
27 
28                                 var specModelName = item[0].text;
29                                 var t = document.getElementById('zxyy');
30                                 t.value = specModelName;
31                                 t.tabIndex = item[0].value;
32                                 var specModelValue = item[0].Id;
33                             });
34                         }
35                     },
36                     error: function(xhr, type, errorThrown) {}
37                 });
38             }

2.时间控件

1）html:

1                 <div class="mui-input-row">
2                             <label>日期：</label>
3                             <input type="datetime" id="startdate" placeholder="请选择时间" onclick="dtime()">
4                         </div>

2)js:

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

 1     function dtime() {
 2                 var Date = new mui.DtPicker({
 3                     type: 'date'
 4                 });
 5                 var endDate = "";
 6                 Date.show(function(item) {
 7                     //这里你可以用console 看看回调函数中的item的值                          
 8                     endDate = item;
 9                     var s = document.getElementById('startdate');
10                     s.value = endDate.toString();
11                 });
12             }

3.搜索

1）html：

1                  <div class="mui-indexed-list-search mui-input-row mui-search">
2                 
3                      <input type="search" id="searchInput" onkeyup="enterSearch(event)" class="mui-input-clear" placeholder="关键字">
4                     </div>

2）js：

1 function enterSearch(event){
2             if(event.keyCode == 13) {//用户点击回车的事件号为13
3                 var keyword = document.getElementById('searchInput').value;                
4         //createFragment(keyword);（自己的逻辑代码）
5             }
6         }