index.html 2.8 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
  6. <title>BIBO</title>
  7. <link href="css/mui.min.css" rel="stylesheet" />
  8. <style>
  9. .mui-bar .mui-icon{font-size: 21px;}
  10. .mui-bar-tab .mui-tab-item.mui-active{color: linear-gradient(to right bottom, #275dff, #1c9bff 100px);}
  11. </style>
  12. </head>
  13. <body>
  14. <div class="mui-content">
  15. <nav class="mui-bar mui-bar-tab">
  16. <a id="defaultTab" class="mui-tab-item mui-active" href="tab/home.html">
  17. <i class="mui-icon icon">&#xe751;</i>
  18. <span class="mui-tab-label">首页</span>
  19. </a>
  20. <a class="mui-tab-item" href="tab/jz_list.html">
  21. <i class="mui-icon icon">&#xe6d4;</i>
  22. <span class="mui-tab-label">兼职</span>
  23. </a>
  24. <a class="mui-tab-item" href="tab/list.html">
  25. <i class="mui-icon icon">&#xe66e;</i>
  26. <span class="mui-tab-label">求职</span>
  27. </a>
  28. <a class="mui-tab-item" href="tab/mine.html">
  29. <i class="mui-icon icon">&#xe65a;</i>
  30. <span class="mui-tab-label">我的</span>
  31. </a>
  32. </nav>
  33. </div>
  34. <script src="js/mui.min.js"></script>
  35. <script>
  36. mui.plusReady(function() {
  37. plus.navigator.setStatusBarStyle('light');
  38. mui.init();
  39. var subpages = ['tab/home.html','tab/jz_list.html','tab/list.html','tab/mine.html'];
  40. var subpage_style = {
  41. top: '0px',
  42. bottom: '51px',
  43. };
  44. var aniShow = {};
  45. //创建子页面,首个选项卡页面显示,其它均隐藏;
  46. var self = plus.webview.currentWebview();
  47. for(var i = 0; i < 4; i++) {
  48. var temp = {};
  49. var sub = plus.webview.create(subpages[i], subpages[i], subpage_style);
  50. if(i > 0) {
  51. sub.hide();
  52. } else {
  53. temp[subpages[i]] = "true";
  54. mui.extend(aniShow, temp);
  55. }
  56. self.append(sub);
  57. }
  58. //当前激活选项
  59. var activeTab = subpages[0];
  60. //选项卡点击事件
  61. mui('.mui-bar-tab').on('tap', 'a', function(e) {
  62. var targetTab = this.getAttribute('href');
  63. if(targetTab == activeTab) {
  64. return;
  65. }
  66. //隐藏右上角设置
  67. /* if(targetTab==subpages[0]){
  68. document.getElementById('setting').style.display="block";
  69. }else{
  70. document.getElementById('setting').style.display="none";
  71. }*/
  72. //若为iOS平台或非首次显示,则直接显示
  73. if(mui.os.ios || aniShow[targetTab]) {
  74. plus.webview.show(targetTab);
  75. } else {
  76. //否则,使用fade-in动画,且保存变量
  77. var temp = {};
  78. temp[targetTab] = "true";
  79. mui.extend(aniShow, temp);
  80. plus.webview.show(targetTab, "fade-in", 500);
  81. }
  82. //隐藏当前;
  83. plus.webview.hide(activeTab);
  84. //更改当前活跃的选项卡
  85. activeTab = targetTab;
  86. });
  87. });
  88. </script>
  89. </body>
  90. </html>