目录
运行效果图：
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></title>
<script src="js/mui.min.js"></script>
<link href="css/mui.min.css" rel="stylesheet"/>
<link rel="stylesheet" type="text/css" href="css/Main.css"/>
<script type="text/javascript" charset="utf-8">
mui.init();
//mui加载完成事件
mui.plusReady(function () {
var subPages=["sub1.html","sub2.html","sub3.html","sub4.html"];
var subPageStyle={
top:"44px",
bottom:"50px"
};
var mainView=plus .webview.currentWebview();
for(var i=0;i<subPages .length;i++){
var url=subPages[i ];
var subView=plus.webview.create(url,url ,subPageStyle);
subView.hide();
mainView.append(subView);
}
plus.webview.show(subPages[0]);
//注册轻击事件
mui(".mui-bar-tab").on("tap","a",function(){
var id=this.getAttribute("href");
plus.webview.show(id)
})
})
</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" href="sub1.html">
<span class="mui-icon mui-icon-chatbubble"></span>
<span class="mui-tab-label">微信</span>
</a>
<a class="mui-tab-item" href="sub2.html">
<span class="mui-icon mui-icon-contact"></span>
<span class="mui-tab-label">通讯录</span>
</a>
<a class="mui-tab-item" href="sub3.html">
<span class="mui-icon mui-icon-navigate"></span>
<span class="mui-tab-label">发现</span>
</a>
<a class="mui-tab-item" href="sub4.html">
<span class="mui-icon mui-icon-person"></span>
<span class="mui-tab-label">我</span>
</a>
</nav>
</body>
</html>sub1.html:
<!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.css" rel="stylesheet" />
</head>
<body>
<script src="js/mui.js"></script>
<script type="text/javascript">
mui.init()
mui.plusReady(function() {
mui(".mui-table-view-cell").on("tap", "a", function() {
//获取好友名称
var title=this.getAttribute("title");
mui.openWindow({
url:"chat.html",
id: "chat.html",
extras: {
name:title //自定义扩展参数，可以用来处理页面间传值
},
show: {
autoShow: true, //页面loaded事件发生后自动显示，默认为true
aniShow: "slide-in-right", //页面显示动画，默认为”slide-in-right“；
duration: 100 //页面动画持续时间，Android平台默认100毫秒，iOS平台默认200毫秒；
},
waiting: {
autoShow: true, //自动显示等待框，默认为true
title: '正在加载...'//等待对话框上显示的提示内容
}
})
})
})
</script>
<div class="mui-content">
<ul class="mui-table-view">
<li class="mui-table-view-cell mui-media">
<a href="javascript:;" title="幸福">
<img class="mui-media-object mui-pull-left" src="images/shuijiao.jpg">
<div class="mui-media-body">
幸福
<p class="mui-ellipsis">能和心爱的人一起睡觉，是件幸福的事情；可是，打呼噜怎么办？</p>
</div>
</a>
</li>
<li class="mui-table-view-cell mui-media">
<a href="javascript:;" title="木屋">
<img class="mui-media-object mui-pull-left" src="images/muwu.jpg">
<div class="mui-media-body">
木屋
<p class="mui-ellipsis">想要这样一间小木屋，夏天挫冰吃瓜，冬天围炉取暖.</p>
</div>
</a>
</li>
<li class="mui-table-view-cell mui-media">
<a href="javascript:;" title=CBD">
<img class="mui-media-object mui-pull-left" src="images/yuantiao.jpg">
<div class="mui-media-body">
CBD
<p class="mui-ellipsis">烤炉模式的城，到黄昏，如同打翻的调色盘一般.</p>
</div>
</a>
</li>
</ul>
</div>
</body>
</html>
sub2.html:
<!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.css" rel="stylesheet" />
</head>
<body>
<script src="js/mui.js"></script>
<script type="text/javascript">
mui.init()
</script>
<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>
</body>
</html>
sub3.html
<!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.css" rel="stylesheet" />
</head>
<body>
<script src="js/mui.js"></script>
<script type="text/javascript">
mui.init()
mui.plusReady(function () {
var friends=document.getElementById("friends");
friends.addEventListener("tap",function(){
mui.openWindow({
url:"fdHeader.html",
id: "fdHeader.html"
})
})
})
</script>
<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>
<div class="mui-content">
<ul class="mui-table-view">
<li class="mui-table-view-cell mui-left" id="friends">
<img src="images/朋友圈.jpg" width="30px" height="30px" align="absmiddle" /> 朋友圈
</li>
</ul>
<br>
<ul class="mui-table-view">
<li class="mui-table-view-cell mui-left">
<img src="images/朋友圈.jpg" width="30px" height="30px" align="absmiddle" /> 朋友圈
</li>
<li class="mui-table-view-cell mui-left">
<img src="images/朋友圈.jpg" width="30px" height="30px" align="absmiddle" /> 朋友圈
</li>
</ul>
<br>
<ul class="mui-table-view">
<li class="mui-table-view-cell mui-left">
<img src="images/朋友圈.jpg" width="30px" height="30px" align="absmiddle" /> 朋友圈
</li>
<li class="mui-table-view-cell mui-left">
<img src="images/朋友圈.jpg" width="30px" height="30px" align="absmiddle" /> 朋友圈
</li>
</ul>
</div>
</body>
</html>
sub4.html:
<!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.css" rel="stylesheet" />
<style type="text/css">
.mui-table-view-cell {
font-size: 18px;
line-height: 20px;
}
</style>
</head>
<body>
<script src="js/mui.js"></script>
<script type="text/javascript">
mui.init()
</script>
<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>
</body>
</html>
chat.html
<!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.css" rel="stylesheet" />
</head>
<body>
<script src="js/mui.js"></script>
<script type="text/javascript">
mui.init()
</script>
<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>
</body>
</html>
fdHeader.html
<!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.css" rel="stylesheet" />
</head>
<body>
<script src="js/mui.js"></script>
<script type="text/javascript">
mui.init({
subpages:[{
url:"fdBody.html",
id:"fdBody.html",
styles:{
top:'44px'
}
}]
})
</script>
<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>
</body>
</html>
fdBody.html
<!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.css" rel="stylesheet" />
</head>
<body>
<script src="js/mui.js"></script>
<script type="text/javascript">
mui.init()
</script>
<div class="mui-content">
adasdfsaf
</div>
</body>
</html>