永城市12345_前端 - 这个不用

tab-phone.html 4.6KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
  6. <meta name="apple-mobile-web-app-capable" content="yes">
  7. <meta name="apple-mobile-web-app-status-bar-style" content="black">
  8. <title>通讯录</title>
  9. <link href="css/mui.min.css" rel="stylesheet" />
  10. <link rel="stylesheet" href="css/iconfont.css" />
  11. <style>
  12. .mui-bar {
  13. -webkit-box-shadow: none;
  14. box-shadow: none;
  15. }
  16. .mui-bar-nav {
  17. background-color: #00a1cb;
  18. }
  19. .oa-contact-cell.mui-table .mui-table-cell {
  20. padding: 11px 0;
  21. vertical-align: middle;
  22. }
  23. .oa-contact-cell {
  24. position: relative;
  25. margin: -11px 0;
  26. }
  27. .oa-contact-avatar {
  28. width: 50px;
  29. }
  30. .oa-contact-avatar img {
  31. border-radius: 50%;
  32. width: 30px;
  33. height: 30px;
  34. }
  35. .oa-contact-content {
  36. width: 100%;
  37. }
  38. .oa-contact-name {
  39. margin-right: 10px;
  40. }
  41. .go_search {
  42. background: #fff!important;
  43. border: 1px solid #ccc!important;
  44. border-radius: 17px!important;
  45. }
  46. a {
  47. color: #000;
  48. }
  49. .mui-search.mui-active:before {
  50. top: 25px;
  51. }
  52. </style>
  53. </head>
  54. <body>
  55. <div class="">
  56. <div class="mui-content mui-scroll-wrapper" id="pullrefresh">
  57. <div class="mui-scroll">
  58. <ul class="mui-table-view mui-table-view-striped mui-table-view-condensed" id="">
  59. <li class="mui-table-view-cell">
  60. <div class="mui-input-row mui-search">
  61. <input type="search" class="mui-input-clear go_search" placeholder="请输入关键字" style="margin-bottom: 0;">
  62. </div>
  63. </li>
  64. </ul>
  65. <ul class="mui-table-view mui-table-view-striped mui-table-view-condensed TX" id="">
  66. </ul>
  67. </div>
  68. <!--右上角弹出菜单-->
  69. </div>
  70. </div>
  71. <script src="js/mui.min.js"></script>
  72. <script src="js/zepto.js"></script>
  73. <script src="js/huayi.config.js"></script>
  74. <script type="text/javascript" charset="utf-8">
  75. mui.init();
  76. mui.ready(function() {
  77. var keyw = '';
  78. mui('.mui-scroll-wrapper').scroll({
  79. deceleration: 0.0005
  80. }); //设置减速系数,系数越大,滚动速度越慢,滚动距离越小,默认值0.0006
  81. var a = localStorage.getItem("token");
  82. Ajax();
  83. $('.go_search').on('input focus', function() {
  84. keyw = $(this).val();
  85. console.log(keyw);
  86. Ajax(keyw);
  87. })
  88. function Ajax() {
  89. console.log(keyw);
  90. $(".TX").empty();
  91. mui.ajax(huayi.config.callcenter_url + 'AddressBook/GetAppList?', {
  92. data: {
  93. token: localStorage.getItem('token'),
  94. keyWord:keyw
  95. },
  96. dataType: 'json', //服务器返回json格式数据
  97. type: 'get', //HTTP请求类型
  98. timeout: 10000, //超时时间设置为10秒;
  99. headers: {
  100. 'Content-Type': 'application/x-www-form-urlencoded; charset=utf-8'
  101. },
  102. success: function(data) {
  103. if(data.state = "success") {
  104. console.log(data);
  105. var html;
  106. $(data.rows).each(function(i, n) {
  107. html = '<li data-group="'+n.NameOneCode+'" class="mui-table-view-divider mui-indexed-list-group">'+n.NameOneCode+'</li>';
  108. $(n.AddressBooklist).each(function(j, m) {
  109. html += '<li data-value="'+m.NameOneCode+'" data-tags="'+m.NameOneCode+'" class="mui-table-view-cell mui-indexed-list-item">'+
  110. '<div class="mui-slider-cell">'+
  111. '<a href="tel:'+m.F_Mobile+'">'+
  112. '<div class="oa-contact-cell mui-table">'+
  113. '<div class="oa-contact-avatar mui-table-cell">'+
  114. '<img src="img/2.png"/>'+
  115. '</div>'+
  116. '<div class="oa-contact-content mui-table-cell">'+
  117. '<h4 class="oa-contact-name size-14">'+m.F_Name+'</h4>'+
  118. '<span class="oa-contact-position mui-h6">'+m.F_Company+'</span>'+
  119. '<h4 class="oa-contact-email mui-h6">'+m.F_Mobile+'</h4>'+
  120. '</div>'+
  121. '</div>'+
  122. '</a>'+
  123. '</div>'+
  124. '</li>';
  125. })
  126. html += '</li>';
  127. $(html).appendTo($(".TX"));
  128. })
  129. // var header = document.querySelector('header.mui-bar');
  130. // var list = document.getElementById('list');
  131. // //calc hieght
  132. // list.style.height = (document.body.offsetHeight - header.offsetHeight) + 'px';
  133. // //create
  134. // window.indexedList = new mui.IndexedList(list);
  135. }
  136. },
  137. error: function(xhr, type, errorThrown) {
  138. //异常处理;
  139. mui.alert("");
  140. }
  141. });
  142. }
  143. });
  144. //点击两次就退出软件
  145. </script>
  146. </body>
  147. </html>