index.html 2.7 KB

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