index.html 2.8 KB

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