Home Verkennen Help
Inloggen
yb
/
wms-pda-app
geforked van project/wms-pda-app
1
0
Vork 0
Bestanden
Aftakking: master
Aftakkingen Labels
wms-pda-app
/
examples
/
icons.html

icons.html 6.9 KB
Permalink Geschiedenis Ruwe

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182 
  1. <!DOCTYPE html>
    2. 

  2. <html>
    3. 

  3. 

  4. 	<head>
    5. 

  5. 		<meta charset="utf-8">
    6. 

  6. 		<title>Hello MUI</title>
    7. 

  7. 		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
    8. 

  8. 		<meta name="apple-mobile-web-app-capable" content="yes">
    9. 

  9. 		<meta name="apple-mobile-web-app-status-bar-style" content="black">
    10. 

  10. 

  11. 		<!--标准mui.css-->
    12. 

  12. 		<link rel="stylesheet" href="../css/mui.min.css">
    13. 

  13. 		<!--App自定义的css-->
    14. 

  14. 		<link rel="stylesheet" type="text/css" href="../css/app.css"/>
    15. 

  15. 		<style>
    16. 

  16. 			.flex-container {
    17. 

  17. 				display: -webkit-box;
    18. 

  18. 				display: -webkit-flex;
    19. 

  19. 				display: flex;
    20. 

  20. 				-webkit-flex-flow: row wrap;
    21. 

  21. 				justify-content: space-between;
    22. 

  22. 				text-align: center;
    23. 

  23. 			}
    24. 

  24. 			.mui-content-padded {
    25. 

  25. 				padding: 10px;
    26. 

  26. 			}
    27. 

  27. 			.mui-content-padded a {
    28. 

  28. 				margin: 3px;
    29. 

  29. 				width: 50px;
    30. 

  30. 				height: 50px;
    31. 

  31. 				display: inline-block;
    32. 

  32. 				text-align: center;
    33. 

  33. 				background-color: #fff;
    34. 

  34. 				border: 1px solid #ddd;
    35. 

  35. 				border-radius: 25px;
    36. 

  36. 				background-clip: padding-box;
    37. 

  37. 			}
    38. 

  38. 			.mui-content-padded a .mui-icon {
    39. 

  39. 				margin-top: 12px;
    40. 

  40. 			}
    41. 

  41. 			.mui-spinner,
    42. 

  42. 			.mui-spinner-white {
    43. 

  43. 				margin-top: 12px
    44. 

  44. 			}
    45. 

  45. 			.active .mui-spinner-indicator {
    46. 

  46. 				background: #007AFF;
    47. 

  47. 			}
    48. 

  48. 			.mui-content a {
    49. 

  49. 				color: #8F8F94;
    50. 

  50. 			}
    51. 

  51. 			.mui-content a.active {
    52. 

  52. 				color: #007aff;
    53. 

  53. 			}
    54. 

  54. 		</style>
    55. 

  55. 	</head>
    56. 

  56. 

  57. 	<body>
    58. 

  58. 		<header class="mui-bar mui-bar-nav">
    59. 

  59. 			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
    60. 

  60. 			<h1 class="mui-title">icon（图标）</h1>
    61. 

  61. 		</header>
    62. 

  62. 		<div class="mui-content">
    63. 

  63. 			<div class="mui-content-padded">
    64. 

  64. 				<p style="text-align: center;">点击图标查看高亮样式</p>
    65. 

  65. 				<div class="flex-container">
    66. 

  66. 					<a id="icon-icon-contact"><span class="mui-icon mui-icon-contact"></span></a>
    67. 

  67. 					<a id="icon-person"><span class="mui-icon mui-icon-person"></span></a>
    68. 

  68. 					<a id="icon-personadd"><span class="mui-icon mui-icon-personadd"></span></a>
    69. 

  69. 					<a id="icon-phone"><span class="mui-icon mui-icon-phone"></span></a>
    70. 

  70. 					<a id="icon-email"><span class="mui-icon mui-icon-email"></span></a>
    71. 

  71. 					<a id="icon-chatbubble"><span class="mui-icon mui-icon-chatbubble"></span></a>
    72. 

  72. 					<a id="icon-chatboxes"><span class="mui-icon mui-icon-chatboxes"></span></a>
    73. 

  73. 					<a><span class="mui-icon mui-icon-weibo"></span></a>
    74. 

  74. 					<a><span class="mui-icon mui-icon-weixin"></span></a>
    75. 

  75. 					<a><span class="mui-icon mui-icon-pengyouquan"></span></a>
    76. 

  76. 					<a><span class="mui-icon mui-icon-chat"></span></a>
    77. 

  77. 					<a><span class="mui-icon mui-icon-qq"></span></a>
    78. 

  78. 

  79. 					<a><span class="mui-icon mui-icon-videocam"></span></a>
    80. 

  80. 					<a><span class="mui-icon mui-icon-camera"></span></a>
    81. 

  81. 					<a><span class="mui-icon mui-icon-image"></span></a>
    82. 

  82. 					<a id="icon-mic"><span class="mui-icon mui-icon-mic"></span></a>
    83. 

  83. 					<a><span class="mui-icon mui-icon-micoff"></span></a>
    84. 

  84. 					<a id="icon-location"><span class="mui-icon mui-icon-location"></span></a>
    85. 

  85. 					<a><span class="mui-icon mui-icon-map"></span></a>
    86. 

  86. 					<a><span class="mui-icon mui-icon-compose"></span></a>
    87. 

  87. 					<a><span class="mui-icon mui-icon-trash"></span></a>
    88. 

  88. 					<a><span class="mui-icon mui-icon-upload"></span></a>
    89. 

  89. 					<a><span class="mui-icon mui-icon-download"></span></a>
    90. 

  90. 					<a id="icon-close"><span class="mui-icon mui-icon-close"></span></a>
    91. 

  91. 					<a><span class="mui-icon mui-icon-closeempty"></span></a>
    92. 

  92. 					<a><span class="mui-icon mui-icon-redo"></span></a>
    93. 

  93. 					<a><span class="mui-icon mui-icon-undo"></span></a>
    94. 

  94. 					<a id="icon-refresh"><span class="mui-icon mui-icon-refresh"></span></a>
    95. 

  95. 					<a><span class="mui-icon mui-icon-refreshempty"></span></a>
    96. 

  96. 					<a><span class="mui-icon mui-icon-reload"></span></a>
    97. 

  97. 					<a><span class="mui-icon mui-icon-loop"></span></a>
    98. 

  98. 					<!--<a><span class="mui-icon mui-icon-loopstrong"></span></a>-->
    99. 

  99. 					<a>
    100. 

  100. 						<span class="mui-spinner"></span>
    101. 

  101. 					</a>
    102. 

  102. 					<a id="icon-star"><span class="mui-icon mui-icon-star"></span></a>
    103. 

  103. 					<a><span class="mui-icon mui-icon-starhalf"></span></a>
    104. 

  104. 					<a id="icon-plus"><span class="mui-icon mui-icon-plus"></span></a>
    105. 

  105. 					<a><span class="mui-icon mui-icon-plusempty"></span></a>
    106. 

  106. 					<a id="icon-minus"><span class="mui-icon mui-icon-minus"></span></a>
    107. 

  107. 					<a><span class="mui-icon mui-icon-checkmarkempty"></span></a>
    108. 

  108. 					<a><span class="mui-icon mui-icon-search"></span></a>
    109. 

  109. 					<!--<a><span class="mui-icon mui-icon-searchstrong"></span></a>-->
    110. 

  110. 					<!--<a><span class="mui-icon mui-icon-share"></span></a>-->
    111. 

  111. 

  112. 					<a id="icon-home"><span class="mui-icon mui-icon-home"></span></a>
    113. 

  113. 					<a><span class="mui-icon mui-icon-navigate"></span></a>
    114. 

  114. 					<a id="icon-gear"><span class="mui-icon mui-icon-gear"></span></a>
    115. 

  115. 					<a><span class="mui-icon mui-icon-settings"></span></a>
    116. 

  116. 					<!--<a><span class="mui-icon mui-icon-settingsstrong"></span></a>-->
    117. 

  117. 					<a><span class="mui-icon mui-icon-list"></span></a>
    118. 

  118. 					<a><span class="mui-icon mui-icon-bars"></span></a>
    119. 

  119. 					<a><span class="mui-icon mui-icon-paperplane"></span></a>
    120. 

  120. 					<a id="icon-info"><span class="mui-icon mui-icon-info"></span></a>
    121. 

  121. 					<a id="icon-help"><span class="mui-icon mui-icon-help"></span></a>
    122. 

  122. 					<a><span class="mui-icon mui-icon-locked"></span></a>
    123. 

  123. 					<a id="icon-more"><span class="mui-icon mui-icon-more"></span></a>
    124. 

  124. 					<a><span class="mui-icon mui-icon-flag"></span></a>
    125. 

  125. 					<a><span class="mui-icon mui-icon-paperclip"></span></a>
    126. 

  126. 					<a><span class="mui-icon mui-icon-eye"></span></a>
    127. 

  127. 

  128. 					<a><span class="mui-icon mui-icon-back"></span></a>
    129. 

  129. 					<a><span class="mui-icon mui-icon-forward"></span></a>
    130. 

  130. 

  131. 					<a><span class="mui-icon mui-icon-arrowup"></span></a>
    132. 

  132. 					<a><span class="mui-icon mui-icon-arrowdown"></span></a>
    133. 

  133. 					<a><span class="mui-icon mui-icon-arrowleft"></span></a>
    134. 

  134. 					<a><span class="mui-icon mui-icon-arrowright"></span></a>
    135. 

  135. 

  136. 					<a><span class="mui-icon mui-icon-arrowthinup"></span></a>
    137. 

  137. 					<a><span class="mui-icon mui-icon-arrowthindown"></span></a>
    138. 

  138. 					<a><span class="mui-icon mui-icon-arrowthinleft"></span></a>
    139. 

  139. 					<a><span class="mui-icon mui-icon-arrowthinright"></span></a>
    140. 

  140. 

  141. 					<a><span class="mui-icon mui-icon-pulldown"></span></a>
    142. 

  142. 				</div>
    143. 

  143. 			</div>
    144. 

  144. 		</div>
    145. 

  145. 		<script src="../js/mui.min.js"></script>
    146. 

  146. 		<script type="text/javascript" charset="utf-8">
    147. 

  147. 			mui.init({
    148. 

  148. 				swipeBack:true //启用右滑关闭功能
    149. 

  149. 			});
    150. 

  150. 			var active = null,
    151. 

  151. 				lastid, span;
    152. 

  152. 			mui(".mui-content").on("tap", "a", function() {
    153. 

  153. 				var id = this.getAttribute("id");
    154. 

  154. 				if (!active) {
    155. 

  155. 					this.classList.add("active");
    156. 

  156. 					if (id) {
    157. 

  157. 						span = this.querySelector("span");
    158. 

  158. 						span.classList.remove("mui-" + id);
    159. 

  159. 						span.classList.add("mui-" + id + "-filled");
    160. 

  160. 					}
    161. 

  161. 					active = this;
    162. 

  162. 				} else {
    163. 

  163. 					active.classList.remove("active");
    164. 

  164. 					if (lastid) {
    165. 

  165. 						span.classList.remove("mui-" + lastid + "-filled");
    166. 

  166. 						span.classList.add("mui-" + lastid);
    167. 

  167. 					}
    168. 

  168. 

  169. 					this.classList.add("active");
    170. 

  170. 					if (id) {
    171. 

  171. 						span = this.querySelector("span");
    172. 

  172. 						span.classList.remove("mui-" + id);
    173. 

  173. 						span.classList.add("mui-" + id + "-filled");
    174. 

  174. 					}
    175. 

  175. 

  176. 					active = this;
    177. 

  177. 				}
    178. 

  178. 				lastid = id;
    179. 

  179. 			});
    180. 

  180. 		</script>
    181. 

  181. 	</body>
    182. 

  182. </html>
    183.