tab-webview-subpage-contact.html 4.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>Hello MUI</title>
  6. <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
  7. <meta name="apple-mobile-web-app-capable" content="yes">
  8. <meta name="apple-mobile-web-app-status-bar-style" content="black">
  9. <link rel="stylesheet" href="../css/mui.min.css">
  10. <style>
  11. html,body {
  12. background-color: #efeff4;
  13. }
  14. .title{
  15. margin: 20px 15px 10px;
  16. color: #6d6d72;
  17. font-size: 15px;
  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: 75px;
  29. }
  30. .oa-contact-avatar img {
  31. border-radius: 50%;
  32. }
  33. .oa-contact-content {
  34. width: 100%;
  35. }
  36. .oa-contact-name {
  37. margin-right: 20px;
  38. }
  39. .oa-contact-name, oa-contact-position {
  40. float: left;
  41. }
  42. </style>
  43. </head>
  44. <body>
  45. <div class="mui-content">
  46. <div class="title">
  47. 这是webview模式选项卡中的第3个子页面,该页面展示一个通讯录示例
  48. </div>
  49. <ul class="mui-table-view mui-table-view-striped mui-table-view-condensed">
  50. <li class="mui-table-view-cell">
  51. <div class="mui-slider-cell">
  52. <div class="oa-contact-cell mui-table">
  53. <div class="oa-contact-avatar mui-table-cell">
  54. <img src="../images/60x60.gif" />
  55. </div>
  56. <div class="oa-contact-content mui-table-cell">
  57. <div class="mui-clearfix">
  58. <h4 class="oa-contact-name">叶文洁</h4>
  59. <span class="oa-contact-position mui-h6">董事长</span>
  60. </div>
  61. <p class="oa-contact-email mui-h6">
  62. yewenjie@sina.com
  63. </p>
  64. </div>
  65. </div>
  66. </div>
  67. </li>
  68. <li class="mui-table-view-cell">
  69. <div class="mui-slider-cell">
  70. <div class="oa-contact-cell mui-table">
  71. <div class="oa-contact-avatar mui-table-cell">
  72. <img src="../images/60x60.gif" />
  73. </div>
  74. <div class="oa-contact-content mui-table-cell">
  75. <div class="mui-clearfix">
  76. <h4 class="oa-contact-name">艾AA</h4>
  77. <span class="oa-contact-position mui-h6">总经理</span>
  78. </div>
  79. <p class="oa-contact-email mui-h6">
  80. aaa@163.com
  81. </p>
  82. </div>
  83. </div>
  84. </div>
  85. </li>
  86. <li class="mui-table-view-cell">
  87. <div class="mui-slider-cell">
  88. <div class="oa-contact-cell mui-table">
  89. <div class="oa-contact-avatar mui-table-cell">
  90. <img src="../images/60x60.gif" />
  91. </div>
  92. <div class="oa-contact-content mui-table-cell">
  93. <div class="mui-clearfix">
  94. <h4 class="oa-contact-name">罗辑</h4>
  95. <span class="oa-contact-position mui-h6">员工</span>
  96. </div>
  97. <p class="oa-contact-email mui-h6">
  98. luoji@126.com
  99. </p>
  100. </div>
  101. </div>
  102. </div>
  103. </li>
  104. <li class="mui-table-view-cell">
  105. <div class="mui-slider-cell">
  106. <div class="oa-contact-cell mui-table">
  107. <div class="oa-contact-avatar mui-table-cell">
  108. <img src="../images/60x60.gif" />
  109. </div>
  110. <div class="oa-contact-content mui-table-cell">
  111. <div class="mui-clearfix">
  112. <h4 class="oa-contact-name">云天明</h4>
  113. <span class="oa-contact-position mui-h6">员工</span>
  114. </div>
  115. <p class="oa-contact-email mui-h6">
  116. ytm@163.com
  117. </p>
  118. </div>
  119. </div>
  120. </div>
  121. </li>
  122. <li class="mui-table-view-cell">
  123. <div class="mui-slider-cell">
  124. <div class="oa-contact-cell mui-table">
  125. <div class="oa-contact-avatar mui-table-cell">
  126. <img src="../images/60x60.gif" />
  127. </div>
  128. <div class="oa-contact-content mui-table-cell">
  129. <div class="mui-clearfix">
  130. <h4 class="oa-contact-name">史强</h4>
  131. <span class="oa-contact-position mui-h6">员工</span>
  132. </div>
  133. <p class="oa-contact-email mui-h6">
  134. shiqiang@gmail.com
  135. </p>
  136. </div>
  137. </div>
  138. </div>
  139. </li>
  140. </ul>
  141. </div>
  142. </body>
  143. <script src="../js/mui.min.js"></script>
  144. <script>
  145. mui.init({
  146. swipeBack:true //启用右滑关闭功能
  147. });
  148. </script>
  149. </html>