<!doctype html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>主體</title> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> <link rel="stylesheet" type="text/css" href="css/mui.css"/> <!--修正樣式文件引入--> <link rel="stylesheet" type="text/css" href="css/reset.css"/> </head> <body> <!-- 主頁面標題 --> <header class="mui-bar mui-bar-nav reHeaderBoxShadow"> <a class="" href="#offCanvasSide"></a> <h1 class="mui-title" id="title">首頁</h1> </header> <!-- 底部nav--> <nav class="mui-bar mui-bar-tab"> <a href="templates/sub1.html" class="mui-tab-item mui-active" id="defaultTab"> <span class="mui-icon mui-icon-home"></span> <span class="mui-tab-label">首頁</span> </a> <a href="templates/sub2.html" class="mui-tab-item"> <span class="mui-icon mui-icon-phone"></span> <span class="mui-tab-label">電話</span> </a> <a href="templates/sub3.html" class="mui-tab-item"> <span class="mui-icon mui-icon-email"></span> <span class="mui-tab-label">郵件</span> </a> <a href="templates/sub4.html" class="mui-tab-item"> <span class="mui-icon mui-icon-gear"></span> <span class="mui-tab-label">設置</span> </a> </nav> <script src="js/mui.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> mui.init(); mui('.mui-scroll-wrapper').scroll({ deceleration: 0.0005 //flick 減速系數，系數越大，滾動速度越慢，滾動距離越小，默認值0.0006 }); //底部選項卡切換跳轉 (function jumpPage(){ //跳轉頁面 var subpages = ['templates/sub1.html','templates/sub2.html', 'templates/sub3.html', 'templates/sub4.html']; var subpage_style = { top: '44px', bottom: '51px' }; var aniShow = {};//動畫顯示 //首次啟動切滑效果 mui.plusReady(function(){ // launchScreen(); var self = plus.webview.currentWebview(); for (var i = 0; i < 4; i++) { var temp = {}; //http://www.html5plus.org/doc/zh_cn/webview.html#plus.webview.create var sub = plus.webview.create(subpages[i], subpages[i], subpage_style); if (i > 0) { sub.hide(); }else{ temp[subpages[i]] = "true"; mui.extend(aniShow,temp);//合並對象 } self.append(sub); } }); //當前激活選項 var activeTab = subpages[0]; //選項卡點擊事件 mui('.mui-bar-tab').on('tap', 'a', function(e) { var targetTab = this.getAttribute('href'); console.log(targetTab); if (targetTab == activeTab) { return; } //更換標題 var title = document.getElementById("title"); console.log(this.querySelector('.mui-tab-label').innerHTML); title.innerHTML = this.querySelector('.mui-tab-label').innerHTML; //顯示目標選項卡 //若為iOS平台或非首次顯示，則直接顯示 if(mui.os.ios||aniShow[targetTab]){ plus.webview.show(targetTab); }else{ //否則，使用fade-in動畫，且保存變量 var temp = {}; temp[targetTab] = "true"; mui.extend(aniShow,temp); plus.webview.show(targetTab,"fade-in",300); } //隱藏當前; plus.webview.hide(activeTab); //更改當前活躍的選項卡 activeTab = targetTab; }); //自定義事件，模擬點擊“首頁選項卡” document.addEventListener('gohome', function() { var defaultTab = document.getElementById("defaultTab"); //模擬首頁點擊 mui.trigger(defaultTab, 'tap'); //切換選項卡高亮 var current = document.querySelector(".mui-bar-tab>.mui-tab-item.mui-active"); if (defaultTab !== current) { current.classList.remove('mui-active'); defaultTab.classList.add('mui-active'); } }); })() </script> </body> </html>