您最多选择25个主题 主题必须以字母或数字开头,可以包含连字符 (-),并且长度不得超过35个字符
 
 
 
 
 
 

181 行
5.0 KiB

  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. <link rel="stylesheet" href="css/style.css">
  11. <link rel="stylesheet" href="css/icons-extra.css">
  12. <style>
  13. html,
  14. body {
  15. background-color: #efeff4;
  16. }
  17. .mui-bar {
  18. background-color: #c70f1a;
  19. }
  20. .mui-title {
  21. color: #FFFFFF;
  22. }
  23. </style>
  24. </head>
  25. <body>
  26. <style>
  27. .mui-control-content .mui-loading {
  28. margin-top: 50px;
  29. }
  30. </style>
  31. <header class="mui-bar mui-bar-nav">
  32. <h1 id="title" class="mui-title"><img style="max-width:220px; height: 33px; padding-top: 8px;" src="images/h_logo.png"></h1>
  33. </header>
  34. <nav class="mui-bar mui-bar-tab">
  35. <a id="defaultTab" class="mui-tab-item mui-active" href="index.html">
  36. <span class="mui-icon mui-icon-extra mui-icon-extra-class"></span>
  37. <span class="mui-tab-label">学院</span>
  38. </a>
  39. <a id="applyTab" class="mui-tab-item " href="apply.html">
  40. <span class="mui-icon mui-icon mui-icon-compose"></span>
  41. <span class="mui-tab-label">报名</span>
  42. </a>
  43. <a class="mui-tab-item " href="interact.html">
  44. <span class="mui-icon mui-icon mui-icon-chat"></span>
  45. <span class="mui-tab-label">互动</span>
  46. </a>
  47. <a class="mui-tab-item" href="personage.html">
  48. <span class="mui-icon mui-icon-person"></span>
  49. <span class="mui-tab-label">个人</span>
  50. </a>
  51. </nav>
  52. <script src="js/mui.min.js"></script>
  53. <script type="text/javascript" charset="utf-8">
  54. //打开校区tab
  55. function GoScholldTab() {
  56. var defaultTab = document.getElementById("defaultTab");
  57. //模拟首页点击
  58. mui.trigger(defaultTab, 'tap');
  59. //切换选项卡高亮
  60. var current = document.querySelector(".mui-bar-tab>.mui-tab-item.mui-active");
  61. if (defaultTab !== current) {
  62. current.classList.remove('mui-active');
  63. defaultTab.classList.add('mui-active');
  64. }
  65. }
  66. //mui初始化
  67. mui.init();
  68. var subpages = ['index.html', 'apply.html', 'interact.html', 'personage.html'];
  69. var subpage_style = {
  70. top: '45px',
  71. bottom: '51px'
  72. };
  73. var aniShow = {};
  74. //创建子页面,首个选项卡页面显示,其它均隐藏;
  75. mui.plusReady(function() {
  76. try {
  77. plus.webview.currentWebview().opener().close();
  78. } catch (e) {}
  79. var B = window.plus.bridge;
  80. var Yuntx = {
  81. Logout: function(successCallback, errorCallback) {
  82. var success = typeof successCallback !== 'function' ? null : function(args) {
  83. successCallback(args);
  84. },
  85. fail = typeof errorCallback !== 'function' ? null : function(code) {
  86. errorCallback(code);
  87. },
  88. callbackID = B.callbackId(success, fail);
  89. return B.exec("Yuntx", "Logout", [callbackID]);
  90. }
  91. };
  92. window.plus.Yuntx = Yuntx;
  93. var self = plus.webview.currentWebview();
  94. for (var i = 0; i < 4; i++) {
  95. var temp = {};
  96. var sub = plus.webview.create(subpages[i], subpages[i], subpage_style);
  97. if (i > 0) {
  98. sub.hide();
  99. } else {
  100. temp[subpages[i]] = "true";
  101. mui.extend(aniShow, temp);
  102. }
  103. self.append(sub);
  104. }
  105. var defaultTab = document.getElementById("defaultTab");
  106. //模拟首页点击
  107. mui.trigger(defaultTab, 'tap');
  108. //切换选项卡高亮
  109. var current = document.querySelector(".mui-bar-tab>.mui-tab-item.mui-active");
  110. if (defaultTab !== current) {
  111. current.classList.remove('mui-active');
  112. defaultTab.classList.add('mui-active');
  113. }
  114. });
  115. //当前激活选项
  116. var activeTab = subpages[0];
  117. var title = document.getElementById("title");
  118. //选项卡点击事件
  119. mui('.mui-bar-tab').on('tap', 'a', function(e) {
  120. var targetTab = this.getAttribute('href');
  121. if (targetTab == activeTab) {
  122. return;
  123. }
  124. //更换标题
  125. title.innerHTML = this.querySelector('.mui-tab-label').innerHTML;
  126. //显示目标选项卡
  127. //若为iOS平台或非首次显示,则直接显示
  128. if (mui.os.ios || aniShow[targetTab]) {
  129. plus.webview.show(targetTab);
  130. } else {
  131. //否则,使用fade-in动画,且保存变量
  132. var temp = {};
  133. temp[targetTab] = "true";
  134. mui.extend(aniShow, temp);
  135. plus.webview.show(targetTab);
  136. }
  137. //隐藏当前;
  138. plus.webview.hide(activeTab);
  139. //更改当前活跃的选项卡
  140. activeTab = targetTab;
  141. });
  142. var backButtonPress = 0;
  143. mui.back = function(event) {
  144. backButtonPress++;
  145. if (backButtonPress > 1) {
  146. //logout yuntx
  147. plus.Yuntx.Logout(
  148. function(contact) { //成功
  149. },
  150. function(status) { //失败
  151. });
  152. plus.runtime.quit();
  153. } else {
  154. plus.nativeUI.toast('再按一次退出应用');
  155. }
  156. setTimeout(function() {
  157. backButtonPress = 0;
  158. }, 1000);
  159. return false;
  160. };
  161. </script>
  162. </body>
  163. </html>