tab-webview-main.html 4.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title></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,
  12. body {
  13. background-color: #efeff4;
  14. }
  15. </style>
  16. </head>
  17. <body>
  18. <header class="mui-bar mui-bar-nav">
  19. <a id="search-id" class="mui-icon mui-icon-search mui-pull-right" style="display: none;"></a>
  20. <h1 id="title" class="mui-title"></h1>
  21. </header>
  22. <nav class="mui-bar mui-bar-tab">
  23. <a id="defaultTab" class="mui-tab-item mui-active" href="tab-webview-subpage-first.html">
  24. <span class="mui-icon mui-icon-contact" style="font-weight: bolder"></span>
  25. <!--<span class="mui-icon iconfont icon-dianzishu"></span>-->
  26. <span class="mui-tab-label" style="font-weight: bolder">书&nbsp;&nbsp;&nbsp;&nbsp;吧</span>
  27. </a>
  28. <a search="true" class="mui-tab-item" href="tab-webview-subpage-second.html">
  29. <span class="mui-icon mui-icon-email" style="font-weight: bolder"></span>
  30. <span class="mui-tab-label" style="font-weight: bolder">书&nbsp;&nbsp;&nbsp;&nbsp;架</span>
  31. </a>
  32. <a class="mui-tab-item" href="tab-webview-subpage-third.html">
  33. <span class="mui-icon mui-icon-gear" style="font-weight: bolder"></span>
  34. <span class="mui-tab-label" style="font-weight: bolder">设&nbsp;&nbsp;&nbsp;&nbsp;置</span>
  35. </a>
  36. </nav>
  37. <!--
  38. 作者:HZC
  39. 时间:2015-09-04
  40. 描述:主页
  41. -->
  42. <script src="js/mui.min.js" type="text/javascript" charset="UTF-8"></script>
  43. <script src="js/app.js" type="text/javascript" charset="utf-8"></script>
  44. <script src="js/db/service.js" type="text/javascript" charset="utf-8"></script>
  45. <script type="text/javascript" charset="utf-8">
  46. //mui初始化
  47. mui.init();
  48. var subpages = ['tab-webview-subpage-first.html', 'tab-webview-subpage-second.html', 'tab-webview-subpage-third.html'];
  49. var subpage_style = {
  50. top: '46px',
  51. bottom: '50px'
  52. };
  53. var aniShow = {};
  54. mui.plusReady(function() {
  55. plus.screen.lockOrientation("portrait");
  56. //当前激活选项
  57. window.activeTab = subpages[0];
  58. window.title = document.getElementById("title");
  59. tapBar();
  60. myInit();
  61. doSearch();
  62. });
  63. /**
  64. * 初始化
  65. * 创建子页面,首个选项卡页面显示,其它均隐藏;
  66. */
  67. function myInit() {
  68. //模拟首页点击
  69. var defaultTab = document.getElementById("defaultTab");
  70. mui.trigger(defaultTab, 'tap');
  71. var self = plus.webview.currentWebview();
  72. for (var i = 0; i < 3; i++) {
  73. var temp = {};
  74. var sub = plus.webview.create(subpages[i], subpages[i], subpage_style);
  75. if (i > 0) {
  76. sub.hide();
  77. } else {
  78. temp[subpages[i]] = "true";
  79. mui.extend(aniShow, temp);
  80. }
  81. self.append(sub);
  82. }
  83. }
  84. /**
  85. * 选项卡点击事件
  86. */
  87. function tapBar() {
  88. mui('.mui-bar-tab').on('tap', 'a', function(e) {
  89. var targetTab = this.getAttribute('href');
  90. //更换标题
  91. window.title.innerHTML = this.querySelector('.mui-tab-label').innerHTML;;
  92. if (targetTab == window.activeTab) {
  93. return;
  94. }
  95. if (this.getAttribute('search') == 'true') {
  96. document.getElementById("search-id").style.display = 'block';
  97. } else {
  98. document.getElementById("search-id").style.display = 'none';
  99. }
  100. //显示目标选项卡
  101. if (mui.os.ios /*|| aniShow[targetTab]*/) {
  102. plus.webview.show(targetTab);
  103. } else {
  104. var temp = {};
  105. temp[targetTab] = "true";
  106. mui.extend(aniShow, temp);
  107. plus.webview.show(targetTab, "fade-in", 300);
  108. }
  109. //隐藏当前;
  110. plus.webview.hide(window.activeTab);
  111. //更改当前活跃的选项卡
  112. window.activeTab = targetTab;
  113. });
  114. }
  115. /**
  116. * 点击搜索
  117. */
  118. function doSearch() {
  119. document.getElementById("search-id").addEventListener('tap', function() {
  120. if (toastNetworkInfo('当前网络不可用')) {
  121. mui.openWindow({
  122. id: 'search-id',
  123. url: 'app/search.html',
  124. show: {
  125. duration: 200
  126. }
  127. });
  128. }
  129. });
  130. }
  131. //退出
  132. var backButtonPress = 0;
  133. mui.back = function(event) {
  134. backButtonPress++;
  135. if (backButtonPress > 1) {
  136. plus.runtime.quit();
  137. } else {
  138. plus.nativeUI.toast('再按一次退出应用');
  139. }
  140. setTimeout(function() {
  141. backButtonPress = 0;
  142. }, 1000);
  143. return false;
  144. };
  145. </script>
  146. </body>
  147. </html>