mui小demo

index.html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title>M-BOX</title>
<link href="css/mui.min.css" rel="stylesheet"/>
</head>
<body>
   <header class="mui-bar mui-bar-nav">
   <h1 class="mui-title">首页</h1>
   </header>
   <nav class="mui-bar mui-bar-tab">
   <a class="mui-tab-item mui-active" href="html/home.html">
   <span class="mui-icon mui-icon-home"></span>
   <span class="mui-tab-label">首页</span>
   </a>
   <a class="mui-tab-item" href="html/message.html">
   <span class="mui-icon mui-icon-chatboxes"></span>
   <span class="mui-tab-label">消息</span>
   </a>
   <a class="mui-tab-item" href="html/setting.html">
   <span class="mui-icon mui-icon-gear"></span>
   <span class="mui-tab-label">设置</span>
   </a>
   </nav>

   <script src="js/mui.min.js"></script>
<script type="text/javascript" charset="utf-8">
   mui.init();

   //设置默认打开首页显示的子页序号；
       var Index=0;
       //把子页的路径写在数组里面
       var subpages = ['html/home.html','html/message.html','html/setting.html'];

       //所有的plus-*方法写在mui.plusReady中或者后面。
       mui.plusReady(function() {
           //获取当前页面所属的Webview窗口对象
           var self = plus.webview.currentWebview();
           for (var i = 0; i < 3; i++) {
               //创建webview子页
               var sub = plus.webview.create(
                   subpages[i], //子页url
                   subpages[i], //子页id
                   {
                       top: '45px',//设置距离顶部的距离
                       bottom: '50px'//设置距离底部的距离
                   }
               );
               //如不是我们设置的默认的子页则隐藏，否则添加到窗口中
               if (i != Index) {
                   sub.hide();
               }
               //将webview对象填充到窗口
               self.append(sub);
           }
       });

       //当前激活选项
       var activeTab = subpages[Index],title=document.querySelector(".mui-title");
       //选项卡点击事件
       mui('.mui-bar-tab').on('tap', 'a', function(e) {
           //获取目标子页的id
           var targetTab = this.getAttribute('href');
           if (targetTab == activeTab) {
               return;
           }
           //更换标题
           title.innerHTML = this.querySelector('.mui-tab-label').innerHTML;
           //显示目标选项卡
           plus.webview.show(targetTab);
           //隐藏当前选项卡
           plus.webview.hide(activeTab);
           //更改当前活跃的选项卡
           activeTab = targetTab;
       });
</script>
</body>
</html>

猜你喜欢