代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>在线投保</title>
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<!--标准mui.css-->
<link rel="stylesheet" href="css/mui.min.css">
<!--App自定义的css-->
<link rel="stylesheet" type="text/css" href="css/app.css"/>
<style>
.title{
margin: 20px 15px 10px;
color: #6d6d72;
font-size: 15px;
}
.oa-contact-cell.mui-table .mui-table-cell {
padding: 11px 0;
vertical-align: middle;
}
.oa-contact-cell {
position: relative;
margin: -11px 0;
}
.oa-contact-avatar {
width: 75px;
}
.oa-contact-avatar img {
border-radius: 50%;
}
.oa-contact-content {
width: 100%;
}
.oa-contact-name {
margin-right: 20px;
}
.oa-contact-name, oa-contact-position {
float: left;
}
/*不固定高宽div垂直居中的方法：其它页用*/
.box {
width: 100%;
height: 40px;
border: 1px solid #FFF;
display: table;
margin-right:5px;
}
.wrap{
display: table-cell;
vertical-align: middle;
width: 100%;
padding: 6px 0px;
line-height: 26px;
word-wrap: break-word;
word-break: break-all;
}
.mui-input-row .div-leftauto{
width:110px;
display: inline-block;
vertical-align: middle;
margin-left:5px;
padding-top: 8px;vertical-align:top;
}
.mui-input-row.multi-line{
height: auto;
}
div span{
font-family: "微软雅黑";
font-size: 16px;
}
div p{
font-family: "微软雅黑";
font-size: 15px;
}
</style>
</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>
<div class="mui-content">
<!--
作者：497986406@qq.com
时间：2019-03-09
描述：下方tab选择标签
-->
<nav class="mui-bar mui-bar-tab">
<a class="mui-tab-item" href="#tabbar">
<span class="mui-icon mui-icon-home"></span>
<span class="mui-tab-label">首页</span>
</a>
<a class="mui-tab-item mui-active" href="#tabbar-with-chat">
<span class="mui-icon mui-icon-contact"></span>
<span class="mui-tab-label">我的</span>
</a>
<a class="mui-tab-item" href="#tabbar-with-map">
<span class="mui-icon mui-icon-gear"></span>
<span class="mui-tab-label">设置</span>
</a>
</nav>
<div id="tabbar" class="mui-control-content">
<div class="title">这是div模式选项卡中的第1个子页面.</div>
<div class="title">何谓div模式的选项卡？
其实就是通过DIV模拟一个独立页面，通过DIV的显示、隐藏模拟不同页面的切换，典型的SPA模式；</div>
<div class="title">
这种模式适合简单业务系统，因为每个选项卡内容要写在一个DIV中，
若逻辑复杂，会导致当前页面DOM结构繁杂，造成webview响应缓慢，甚至崩溃；
因此若系统较复杂，需要下拉刷新等操作，推荐使用webview模式的选项卡；</div>
</div>
<div id="tabbar-with-chat" class="mui-control-content mui-active">
<ul class="mui-table-view">
<li class="mui-table-view-cell">
<a class="mui-navigate-right mui-badge-blue">
<img class="mui-media-object mui-pull-left" src="image/nouser.png">
<span id='account' style="color: white;" class="wrap"></span>
</a>
</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right" id="myper" href="javascript:void(0);">
<img class="mui-media-object mui-pull-left" src="image/user.jpg"/>
<span class="wrap"> 实名认证</span>
</a>
</li>
</ul>
<ul class="mui-table-view ">
<li class="mui-table-view-cell ">
<a class="mui-navigate-right" id="mycar"href="javascript:void(0);" >
<span class="mui-icon mui-icon-bars"></span>
<span > 我的车辆</span>
</a>
</li>
<li class="mui-table-view-cell ">
<a class="mui-navigate-right" id="mytb" href="javascript:void(0);">
<span class="mui-icon mui-icon-bars"></span>
<span > 我的保单</span>
</a>
</li>
<li class="mui-table-view-cell ">
<a class="mui-navigate-right" id="mybd">
<span class="mui-icon mui-icon-bars"></span>
<span > 我的驾驶证</span>
</a>
</li>
</ul>
</div>
<div id="tabbar-with-map" class="mui-control-content">
<div class="title">这是div模式选项卡中的第4个子页面，该页面展示一个常见的设置示例.</div>
<ul class="mui-table-view">
<li class="mui-table-view-cell">
<a class="mui-navigate-right">
新消息通知
</a>
</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right">
隐私
</a>
</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right">
通用
</a>
</li>
</ul>
<ul class="mui-table-view" style="margin-top: 25px;">
<li class="mui-table-view-cell">
<a class="mui-navigate-right">
关于mui
</a>
</li>
</ul>
<ul class="mui-table-view" style="margin-top: 25px;">
<li class="mui-table-view-cell">
<a style="text-align: center;color: #FF3B30;">
退出登录
</a>
</li>
</ul>
</div>
</div>
</body>
<script src="js/mui.min.js"></script>
<script>
(function($, doc) {
$.init(function(){});
mui('body').on('tap','a',function(){
window.top.location.href=this.href;
});
//设置账户显示
var username =localStorage.getItem("userName");//获取
account.innerText = username;
$.plusReady(function() {
var mycarButton = doc.getElementById('mycar');
var mytbButton = doc.getElementById('mytb');
var mybdButton = doc.getElementById('mybd');
doc.getElementById('myper').addEventListener('tap', function() {
$.openWindow({
url: 'person/userManager.html',
id: 'userManager',
preload: true,
show: {
aniShow: 'animationType'
},
waiting:{
autoShow: true, //自动显示等待框，默认为true
title: '正在加载...' //等待对话框上显示的提示内容
}
});
}, false);
mycarButton.addEventListener('tap', function(event) {
$.openWindow({
url: 'car/mycarinfo.html',
id: 'mycarinfo',
preload: true,
show: {
aniShow: 'pop-in'
},
styles: {
popGesture: 'hide'
},
waiting: {
autoShow: false
}
});
}, false);
mytbButton.addEventListener('tap', function(event) {
$.openWindow({
url: 'tb/personbx.html',
id: 'reg',
preload: true,
show: {
aniShow: 'pop-in'
},
styles: {
popGesture: 'hide'
},
waiting: {
autoShow: false
}
});
}, false);
mybdButton.addEventListener('tap', function(event) {
$.openWindow({
url: 'regist.html',
id: 'regist.html',
preload: true,
show: {
aniShow: 'pop-in'
},
waiting: {
autoShow: false
}
});
}, true);
});
}(mui, document));
</script> </html>
例如。跳转使用
doc.getElementById('myper').addEventListener('tap', function() {
$.openWindow({
url: 'person/userManager.html',
id: 'userManager',
preload: true,
show: {
aniShow: 'animationType'
},
waiting:{
autoShow: true, //自动显示等待框，默认为true
title: '正在加载...' //等待对话框上显示的提示内容
}
});
}, false);
为何不成功啊?新手，求解答
4***@qq.com (作者)
不是闲的，是我需要检测点击事件，然后跳转子页面啊，但是到子页面后自动回到当前页了
2019-03-10 10:22
暮雪骄阳
回复 4***@qq.com:把你的A标签去掉，换成span，要不就直接用A标签打开窗口
mui('body').on('tap', 'a', function() {
var id = this.getAttribute('href');
var href = this.href;
item = mui.openWindow({url:href,id:id,styles:{scrollIndicator: 'none'},show:{autoShow:false}});
item.addEventListener('loaded', function() {
setTimeout(function() {
item.show(aniShow,300);
plus.nativeUI.closeWaiting();
},100);
},false);
});
2019-03-10 10:35
暮雪骄阳
回复 4***@qq.com:现在是同时执行了A标签点击事件，然后你又执行了一次tap点击事件。当A标签没有url时就等同于web里的打开了href="#"也就是当前页，既然你不使用A标签的href，你就换一个标签。或者先屏蔽A标签。
mui('body').on('tap', 'a', function(e) {
e.stopPropagation()
});
2019-03-10 10:41