tab-webview-main.html 5.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162
  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 href="css/OA-style.css" rel="stylesheet" />
  11. <style>
  12. .mui-bar-nav{box-shadow: 0 1px 6px #00c4cb;}
  13. </style>
  14. </head>
  15. <body>
  16. <header class="mui-bar mui-bar-nav">
  17. <h1 id="title" class="mui-title">消息</h1>
  18. </header>
  19. <nav class="mui-bar mui-bar-tab">
  20. <a id="homeTab" class="mui-tab-item mui-active" href="tab-webview-subpage-message.html">
  21. <span class="mui-icon mui-icon-email"></span>
  22. <span class="mui-tab-label">消息</span>
  23. </a>
  24. <a id="process" class="mui-tab-item" href="page/flow/flow_main.html">
  25. <span class="mui-icon mui-icon-paperplane"></span>
  26. <span class="mui-tab-label">流程</span>
  27. </a>
  28. <a id="informationTab" class="mui-tab-item" href="tab-webview-subpage-app.html">
  29. <span class="mui-icon mui-icon-home"></span>
  30. <span class="mui-tab-label">应用</span>
  31. </a>
  32. <!--<a id="personTab" class="mui-tab-item" href="tab-webview-subpage-person.html">
  33. <span class="mui-icon mui-icon-contact"></span>
  34. <span class="mui-tab-label">通讯录</span>
  35. </a>-->
  36. <a id="mineTab" class="mui-tab-item" href="tab-webview-subpage-mine.html">
  37. <span class="mui-icon mui-icon-person"></span>
  38. <span class="mui-tab-label">我的</span>
  39. </a>
  40. </nav>
  41. <script src="js/mui.min.js"></script>
  42. <script src="js/app.js"></script>
  43. <script src="js/config.js"></script>
  44. <script src="js/update2.js"></script>
  45. <script type="text/javascript" charset="utf-8">
  46. //mui初始化
  47. (function($, doc) {
  48. $.init();
  49. var settings = app.getSettings();
  50. //
  51. $.plusReady(function() {
  52. $.oldBack = mui.back;
  53. var backButtonPress = 0;
  54. $.back = function(event) {
  55. backButtonPress++;
  56. if(backButtonPress > 1) {
  57. plus.runtime.quit();
  58. } else {
  59. plus.nativeUI.toast('再按一次退出应用');
  60. }
  61. setTimeout(function() {
  62. backButtonPress = 0;
  63. }, 1000);
  64. return false;
  65. };
  66. });
  67. }(mui, document));
  68. var subpages = ['tab-webview-subpage-message.html','page/flow/flow_main.html', 'tab-webview-subpage-app.html', 'tab-webview-subpage-mine.html'];
  69. var subpage_style = {
  70. top: '45px',
  71. bottom: '51px'
  72. };
  73. var aniShow = {};
  74. //创建子页面,首个选项卡页面显示,其它均隐藏;
  75. mui.plusReady(function() {
  76. var self = plus.webview.currentWebview();
  77. for(var i = 0; i < 4; i++) {
  78. var temp = {};
  79. var sub = plus.webview.create(subpages[i], subpages[i], subpage_style);
  80. if(i > 0) {
  81. sub.hide();
  82. } else {
  83. temp[subpages[i]] = "true";
  84. mui.extend(aniShow, temp);
  85. }
  86. self.append(sub);
  87. }
  88. });
  89. //当前激活选项
  90. var activeTab = subpages[0];
  91. var title = document.getElementById("title");
  92. //选项卡点击事件
  93. mui('.mui-bar-tab').on('tap', 'a', function(e) {
  94. var targetTab = this.getAttribute('href');
  95. if(targetTab == activeTab) {
  96. return;
  97. }
  98. //更换标题
  99. title.innerHTML = this.querySelector('.mui-tab-label').innerHTML;
  100. //显示目标选项卡
  101. //若为iOS平台或非首次显示,则直接显示
  102. if(mui.os.ios || aniShow[targetTab]) {
  103. plus.webview.show(targetTab);
  104. } else {
  105. //否则,使用fade-in动画,且保存变量
  106. var temp = {};
  107. temp[targetTab] = "true";
  108. mui.extend(aniShow, temp);
  109. plus.webview.show(targetTab, "fade-in", 300);
  110. }
  111. if(targetTab == subpages[0]) { //点击消息
  112. var messageWebview = plus.webview.getWebviewById(subpages[0]);
  113. //点击消息,触发消息中的自定义事件
  114. mui.fire(messageWebview, 'processEvent', {})
  115. } else if(targetTab == subpages[1]) { //点击流程
  116. var appWebview = plus.webview.getWebviewById(subpages[1]);
  117. //点击消息,触发消息中的自定义事件
  118. mui.fire(appWebview, 'appEvent', {})
  119. } else if(targetTab == subpages[2]) { //点击资讯
  120. var appWebview = plus.webview.getWebviewById(subpages[2]);
  121. //点击消息,触发消息中的自定义事件
  122. mui.fire(appWebview, 'appEvent', {})
  123. } else if(targetTab == subpages[3]) { //点击我的
  124. var mineWebview = plus.webview.getWebviewById(subpages[3]);
  125. //点击消息,触发消息中的自定义事件
  126. mui.fire(mineWebview, 'mineEvent', {})
  127. }
  128. //隐藏当前;
  129. plus.webview.hide(activeTab);
  130. //更改当前活跃的选项卡
  131. activeTab = targetTab;
  132. });
  133. //个人tab退出登录事件监听
  134. document.addEventListener('logoutEvent', function() {
  135. var homeTab = document.getElementById("homeTab");
  136. //模拟个人点击
  137. mui.trigger(homeTab, 'tap');
  138. var loginButton = document.getElementById('login');
  139. var userButton = document.getElementById('user_a');
  140. loginButton.style.display = "block";
  141. userButton.style.display = "none";
  142. //切换选项卡高亮
  143. var current = document.querySelector(".mui-bar-tab>.mui-tab-item.mui-active");
  144. if(homeTab !== current) {
  145. current.classList.remove('mui-active');
  146. homeTab.classList.add('mui-active');
  147. }
  148. });
  149. </script>
  150. </body>
  151. </html>