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"/>
<script type="text/javascript" charset="utf-8">
mui.init({
subpages: [{
url: "views/elist/elist.html",
id: "elist",
styles: {
top:'45px',//mui标题栏默认高度为45px；
bottom:'0px'//默认为0px，可不定义；
}
}]
});
</script>
</head>
<body>
<header class="mui-bar mui-bar-nav">
<h1 class="mui-title">专题考试</h1>
</header>
</body>
</html>elist.html
<!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">
<link rel="stylesheet" href="../../css/mui.min.css">
<style type="text/css">
#list {
/*避免导航边框和列表背景边框重叠，看起来像两条边框似得；*/
margin-top: -1px;
}
</style>
</head>
<body>
<!--exam list-->
<div class="mui-card">
<div class="mui-card-content">
<div class="mui-card-content-inner">
<div class="mui-row">
<div class="mui-col-sm-8 mui-col-xs-8">
<p><h4 style="line-height: 20px">垃圾分类专题考试垃圾分类专题考试</h4></p>
<p>限时30分钟20道题</p>
<p>2019/12/1 - 2019/12/30</p>
</div>
<div class="mui-col-sm-4 mui-col-xs-4" style="min-height: 120px;">
<button type="button" data-loading-text="加载中" id="btn1" value="21" class="mui-btn mui-btn-warning" style="position: absolute; right: 0; bottom: 0;">开始答题</button>
</div>
</div>
</div>
</div>
</div>
<!--exam list end-->
<!--exam list-->
<div class="mui-card">
<div class="mui-card-content">
<div class="mui-card-content-inner">
<div class="mui-row">
<div class="mui-col-sm-8 mui-col-xs-8">
<p><h4 style="line-height: 20px">垃圾分类专题考试二</h4></p>
<p>限时30分钟20道题</p>
<p>2019/12/1 - 2019/12/30</p>
</div>
<div class="mui-col-sm-4 mui-col-xs-4" style="min-height: 120px;">
<button type="button" value="22" class="mui-btn mui-btn-warning" style="position: absolute; right: 0; bottom: 0;">开始答题</button>
</div>
</div>
</div>
</div>
</div>
<!--exam list end-->
<!-- javascript part -->
<script src="../../js/mui.min.js"></script>
<script type="text/javascript" charset="utf-8">
var edetail = "../details/edetail.html";
mui(".mui-card-content").on("tap","button",function(){
var value = this.getAttribute("value");
mui.openWindow({
url: edetail,
id: "edetail",
styles: {
titleNView: {
titleText: "",
autoBackButton: true, // 标题栏控件是否显示左侧返回按钮
buttons: [{
text: "确定2",
background: "#f0ad4e",
color: "#ffffff",
colorPressed: "#ec971f",
float: "right"
}]
}
},
extras: {
msg:value
},
createNew: false,
show: {
autoShow: false
},
waiting: {
autoShow: true,
title: "试题加载中..."
}
});
});
</script>
</body>
</html>
edetail.html
<!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">
<link rel="stylesheet" href="../../css/mui.min.css">
<style type="text/css">
#list {
/*避免导航边框和列表背景边框重叠，看起来像两条边框似得；*/
margin-top: -1px;
}
</style>
</head>
<body>
<header class="mui-bar mui-bar-nav">
<a id="btn_exit" class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left" style="color: #555555;"></a>
<h1 class="mui-title"></h1>
<button type="button" class="mui-btn mui-btn-warning mui-pull-right">确定</button>
</header>
<div class="mui-content">
<div class="mui-card">
<!--页眉，放置标题-->
<div class="mui-card-header">
<h3 class="comment comment-teal">单选题</h3>
</div>
<!--内容区-->
<div class="mui-card-content">内容区</div>
</div>
</div>
<!-- javascript part -->
<script type="text/javascript" src="../../js/mui.min.js"></script>
<script type="text/javascript">
//从服务器获取数据
mui.init();
// 接收参数
mui.plusReady(function(){
var self = plus.webview.currentWebview();
console.log("msg:"+self.msg);
//关闭等待框
plus.nativeUI.closeWaiting();
//显示当前页面
self.show();
});
// 重新定义关闭窗口函数
var old_back = mui.back;
// mui("#btn_exit")[0].addEventListener("tap",function(e){
mui(".mui-action-back")[0].addEventListener("tap",function(e){
e.detail.gesture.preventDefault(); //修复iOS 8.x平台存在的bug，使用plus.nativeUI.prompt会造成输入法闪一下又没了
mui.back = function(){
var btn = ["退出","取消"];
mui.confirm("确定退出答题吗？\n退出后作答历史将不会保存"," ",btn, function(e) {
// e.index == 0 ? old_back() : mui.toast('请继续答题');
if (e.index == 0) {
old_back();
}
});
}
});
</script>
</body>
</html>
