admin 管理员组文章数量: 1087818
hbuilder案例
目录
运行效果图：
index.html
sub1.html:
sub2.html:
sub3.html
sub4.html:
chat.html
fdHeader.html
fdBody.html
运行效果图：
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事件发生后自动显示，默认为trueaniShow: "slide-in-right", //页面显示动画，默认为”slide-in-right“；duration: 100 //页面动画持续时间，Android平台默认100毫秒，iOS平台默认200毫秒；},waiting: {autoShow: true, //自动显示等待框，默认为truetitle: '正在加载...'//等待对话框上显示的提示内容}})})})</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>
本文标签： hbuilder案例
版权声明：本文标题：hbuilder案例 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.roclinux.cn/b/1687417041a100203.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论