| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126 |
- <!doctype html>
- <html>
- <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 href="../css/mui.min.css" rel="stylesheet" />
- <style type="text/css">
- body {
- background: #fff;
- }
-
- .mui-bar {
- -webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0.6);
- box-shadow: 0 0 1px rgba(0, 0, 0, 0.6);
- padding-top: 6px;
- }
- </style>
- </head>
- <body>
- <nav class="mui-bar mui-bar-tab">
- <a class="mui-tab-item mui-active" data-id="firstPage">
- <img class="mui-icon" src="../images/home-active.png" />
- <span class="mui-tab-label">首页</span>
- </a>
- <a class="mui-tab-item" data-id="equip">
- <img class="mui-icon" src="../images/equip.png" />
- <span class="mui-tab-label">设备</span>
- </a>
- <a class="mui-tab-item" data-id="warning">
- <img class="mui-icon" src="../images/warning.png" />
- <span class="mui-tab-label">预警</span>
- </a>
- <a class="mui-tab-item" data-id="setting">
- <img class="mui-icon" src="../images/my.png" />
- <span class="mui-tab-label">我的</span>
- </a>
- </nav>
- <div class="mui-content">
- </div>
- <script src="../js/mui.min.js"></script>
- <script type="text/javascript">
- mui.init();
- mui.plusReady(function() {
- //关闭等待框
- plus.nativeUI.closeWaiting();
- //显示当前页面
- mui.currentWebview.show();
- plus.webview.hide('login');
- plus.webview.close('login');
- //预加载页面
- var arr = document.getElementsByClassName("mui-tab-item");
- var objYe = ["homePage.html", "equip.html", "../warning/warning.html", "personalinfo.html"];
- var objStyle = {
- top: "0px",
- bottom: "51px",
- };
- var objs = [];
- var self = plus.webview.currentWebview(); //取到当前的主页窗口
- for(var i = 0; i < arr.length; i++) {
- ! function(i) {
- var obj = plus.webview.create(objYe[i], objYe[i], objStyle);
- objs.push(obj);
- arr[i].addEventListener("tap", function() {
- for(var j = 0; j < arr.length; j++) {
- if(j != i) {
- objs[j].hide()
- } else {
- objs[j].show()
- }
- }
- self.append(objs[i])
- })
- }(i)
- }
- mui.trigger(arr[0], "tap");
- //选项卡点击事件
- mui(".mui-bar-tab").on("tap", "a", function(e) {
- // 获取当前点击的选项
- var targetTab = this.getAttribute("href");
- //当前选项值传到父webview
- var currWs = plus.webview.currentWebview();
- var targetTitle = this.querySelector(".mui-tab-label").innerHTML;
- /**
- * 用图片作为图标而不用字体图标。
- */
- // 获取图标对象
- var targetIcon = mui(this.children[0])[0];
- //初始化
- mui(".mui-bar-tab .mui-tab-item img").each(function(index, item) {
- var itemSrc = item.getAttribute("src");
- if(itemSrc.indexOf("active")) {
- item.src = itemSrc.replace("-active.png", ".png");
- }
- });
- //设置当前的图标
- targetIcon.src = targetIcon.getAttribute("src").replace(".png", "-active.png");
- });
- })
- //退出应用
- mui.oldback = mui.back;
- var clickNum = 0;
- mui.back = function(event) {
- clickNum++;
- if(clickNum > 1) {
- plus.runtime.quit();
- } else {
- mui.toast("再按一次退出应用");
- }
- setTimeout(function() {
- clickNum = 0
- }, 1000);
- return false;
- }
- </script>
- </body>
- </html>
|