1 <!doctype html>
 2 <html>
 3 
 4     <head>
 5         <meta charset="UTF-8">
 6         <title></title>
 7         <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
 8         <link href="../css/mui.min.css" rel="stylesheet" />
 9     </head>
10 
11     <body>
12         <script src="../js/mui.min.js"></script>
13         <script type="text/javascript">
14             mui.init()
15         </script>
16         <nav class="mui-bar mui-bar-tab" id="nav">
17         <a id="tab_home" class="mui-tab-item mui-active" >
18             <span class="mui-icon mui-icon-home" ></span>
19             <span class="mui-tab-label">首页</span>
20         </a>
21         <a id="tab_message" class="mui-tab-item">
22             <span class="mui-icon mui-icon-email"></span>
23             <span class="mui-tab-label">消息</span>
24         </a>
25         <a id="tab_setting" class="mui-tab-item" >
26             <span class="mui-icon mui-icon-gear"></span>
27             <span class="mui-tab-label">设置</span>
28         </a>
29     </nav>
30 
31     <script type="text/javascript" charset="utf-8">
32           mui.init({
33               subpages:[//首先加载首页
34                         {
35                             url:'homepage.html',
36                             id:'tab_home',
37                             styles:{
38                                 top:'0px',
39                                 bottom:'60px'
40                             }
41                         }
42                     ],
43             preloadPages:[//预加载其他页面
44                 {
45                     url:'deviceinfo.html',
46                     id:'tab_message',
47                     styles:{
48                     top:'0px',
49                     bottom:'60px'
50                     }
51                 },
52                 {
53                     url:'my.html',
54                     id:'tab_setting',
55                     styles:{
56                         top:'0px',
57                         bottom:'60px'
58                     }
59                 },
60 
61 
62             ]
63           });
64           mui.plusReady(function(){
65               var tab_home,tab_message,tab_contact
66                 mui("#nav").on("tap","#tab_home",function(){//点击触发
67                     tab_home=plus.webview.getWebviewById("tab_home");
68                     tab_home.show()
69                     tab_message.hide()
70 
71                     tab_setting.hide()
72                 })
73                 mui("#nav").on("tap","#tab_message",function(){//点击触发
74                     tab_message=plus.webview.getWebviewById("tab_message");
75                     tab_message.show()
76 
77                 })
78 
79                 mui("#nav").on("tap","#tab_setting",function(){//点击触发
80                     tab_setting=plus.webview.getWebviewById("tab_setting");
81                     tab_setting.show()
82                 })
83           })
84 
85     </script>
86     </body>
87 
88 </html>