<!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" />
<script src="js/mui.min.js"></script>
<script src="js/h.js"></script>
<script type="text/javascript">
mui.init({
subpages: [{
url: 'sub1.html',
id: 'sub1.html',
styles: { top: '44px', bottom: '44px', '100%' }
}, {
url: 'sub2.html',
id: 'sub2.html',
styles: { top: '44px', bottom: '44px', '100%', left: '100%' }
}, {
url: 'sub3.html',
id: 'sub3.html',
styles: { top: '44px', bottom: '44px', '100%', left: '200%' }
}, {
url: 'sub4.html',
id: 'sub4.html',
styles: { top: '44px', bottom: '44px', '100%', left: '300%' }
}]
});
mui.ready(function(){
h('#nava1').tap(function() {
mui.toast('123');
console.log(11);
});
h('#nava2').tap(function() {
mui.toast('456');
});
}); //用h.js时 放在上面要加mui.ready,放在下面就不用
</script>
</head>
<body>
<header class="mui-bar mui-bar-nav">
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
<h1 class="mui-title">标题</h1>
</header>
<nav class="mui-bar mui-bar-tab">
<a class="mui-tab-item mui-active" id="nava1">
<span class="mui-icon mui-icon-home"></span>
<span class="mui-tab-label">首页</span>
</a>
<a class="mui-tab-item" id="nava2">
<span class="mui-icon mui-icon-phone"></span>
<span class="mui-tab-label">电话</span>
</a>
<a class="mui-tab-item" id="nava3">
<span class="mui-icon mui-icon-email"></span>
<span class="mui-tab-label">邮件</span>
</a>
<a class="mui-tab-item" id="nava4">
<span class="mui-icon mui-icon-gear"></span>
<span class="mui-tab-label">设置</span>
</a>
</nav>
</body>
</html>