|
|
怎么让frame0的显示层级不覆盖main.html 里面的内容？
main.html的代码：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport"
content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,initial-scale=1.0,width=device-width" />
<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
<title>主页</title>
<link rel="stylesheet" type="text/css" href="../css/api.css" />
<link rel="stylesheet" type="text/css" href="../css/style.css" />
<link rel="stylesheet" href="../css/base.css">
<link rel="stylesheet" href="../css/menu.css">
<script src="../script/menu.js"></script>
<script src="../script/adapter.js"></script>
<script type="text/javascript" src="../script/api.js"></script>
<style type="text/css">
html,
body {
height: 100%;
}
.wrap {
display: -webkit-box;
-webkit-box-orient: vertical;
}
.flex-1 {
-webkit-box-flex: 1;
}
.empty {
text-align: center;
padding: 120px 0;
}
.hover {
opacity: .8;
}
.flex-wrap {
display: -webkit-box;
display: -webkit-flex;
display: flex;
}
.flex-con {
-webkit-box-flex: 1;
-webkit-flex: 1;
flex: 1;
}
.flex-vertical {
-webkit-box-orient: vertical;
-webkit-flex-flow: column;
flex-flow: column;
}
.border-t,
.border-b {
position: relative;
}
.border-t:before,
.border-b:after {
content: '';
position: absolute;
left: 0;
top: 0;
background: #ddd;
right: 0;
height: 1px;
-webkit-transform: scaleY(0.5);
transform: scaleY(0.5);
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
}
.border-b:after {
top: 0;
bottom: 0;
}
#wrap {
height: 100%;
}
header {
height: 30px;
width: 100%;
text-align: center;
color: rgb(255, 255, 255);
font-size: 30px;
background-color: #08e2ff;
top: 0px;
margin-top: -2px;
}
header ul li {
height: 30px;
line-height: 30px;
text-align: center;
display: none;
position: relative;
font-size: 25px;
text-align: center;
}
header ul li.active {
display: block;
}
#footer ul li:nth-child(1) {
background-image: url(../image/navigate1.png);
}
#footer ul li:nth-child(2) {
background-image: url(../image/databike1.png);
}
#footer ul li:nth-child(3) {
background-image: url(../image/datamap1.png);
}
#footer ul li:nth-child(4) {
background-image: url(../image/setting1.png);
}
#footer ul li:nth-child(1).active {
background-image: url(../image/navigate2.png);
}
#footer ul li:nth-child(2).active {
background-image: url(../image/databike2.png);
}
#footer ul li:nth-child(3).active {
background-image: url(../image/datamap2.png);
}
#footer ul li:nth-child(4).active {
background-image: url(../image/setting2.png);
}
.flex-con {
overflow: auto;
}
</style>
</head>
<body>
<div id="wrap" style="z-index: -999;" class="flex-wrap flex-vertical">
<header>
<ul>
<li class="border-b active"> <a tapmode="" onclick="back();">地图导航</a></li>
<li class="border-b"> <a tapmode="" onclick="back();">共享单车</a></li>
<li class="border-b"> <a tapmode="" onclick="back();">时空地图</a></li>
<li class="border-b"> <a tapmode="" onclick="back();">设置中心</a></li>
</ul>
</header>
<div id="main" class="flex-con" style="z-index: 999;">
<div id="menu">
<!--隐藏菜单-->
<div id="ensconce">
<h2>
<img src="images/show.png" alt="">
国内各地景点
</h2>
</div>
<!--显示菜单-->
<div id="open">
<div class="navH">
国内各地景点
<span><img class="obscure" src="images/obscure.png" alt=""></span>
</div>
<div class="navBox">
<ul>
<li>
<h2 class="obtain">北京景点<i></i></h2>
<div class="secondary">
<h3>故宫</h3>
<h3>十三陵</h3>
<h3>圆明园</h3>
<h3>长城</h3>
<h3>雍和宫</h3>
<h3>天坛公园</h3>
</div>
</li>
<li>
<h2 class="obtain">南京景点<i></i></h2>
<div class="secondary">
<h3>栖霞寺</h3>
<h3>夫子庙</h3>
<h3>海底世界</h3>
<h3>中山陵</h3>
<h3>乌衣巷</h3>
<h3>音乐台</h3>
</div>
</li>
<li>
<h2 class="obtain">上海景点<i></i></h2>
<div class="secondary">
<h3>东方明珠</h3>
<h3>外滩</h3>
<h3>豫园</h3>
<h3>文庙</h3>
<h3>世博园</h3>
<h3>田子坊</h3>
</div>
</li>
<li>
<h2 class="obtain">深圳景点<i></i></h2>
<div class="secondary">
<h3>华侨城</h3>
<h3>观澜湖</h3>
<h3>世界之窗</h3>
<h3>东门老街</h3>
<h3>七娘山</h3>
<h3>光明农场</h3>
</div>
</li>
<li>
<h2 class="obtain">广州景点<i></i></h2>
<div class="secondary">
<h3>白云山</h3>
<h3>长隆</h3>
<h3>黄花岗公园</h3>
<h3>中山纪念堂</h3>
<h3>华南植物园</h3>
<h3>南沙湿地公园</h3>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
<div id="footer" class="border-t">
<ul class="flex-wrap">
<li tapmode="hover" onclick="randomSwitchBtn( this );" class="flex-con active">地图导航</li>
<li tapmode="hover" onclick="randomSwitchBtn( this );" class="flex-con">共享单车</li>
<li tapmode="hover" onclick="randomSwitchBtn( this );" class="flex-con">时空地图</li>
<li tapmode="hover" onclick="randomSwitchBtn( this );" class="flex-con">设置中心</li>
</ul>
</div>
</div>
</body>
<script type="text/javascript">
apiready = function () {
$api.fixStatusBar($api.dom('header'));
api.setStatusBarStyle({
style: 'dark',
color: '#6ab494'
});
funIniGroup();
}
function funIniGroup() {
var eHeaderLis = $api.domAll('header li'),
frames = [];
for (var i = 0, len = eHeaderLis.length; i < len; i++) {
frames.push({
name: 'frame' + i,
url: 'frame' + i + '.html',
bgColor: 'rgba(0,0,0,.5)',
bounces: true
})
}
api.openFrameGroup({
name: 'group',
scrollEnabled: false,
rect: {
x: 50,
y: $api.dom('header').offsetHeight,
w: api.winWidth,
h: $api.dom('#main').offsetHeight
},
index: 0,
frames: frames
}, function (ret, err) {
});
}
// 随意切换按钮
function randomSwitchBtn(tag) {
if (tag == $api.dom('#footer li.active')) return;
var eFootLis = $api.domAll('#footer li'),
eHeaderLis = $api.domAll('header li'),
index = 0;
for (var i = 0, len = eFootLis.length; i < len; i++) {
if (tag == eFootLis[i]) {
index = i;
} else {
$api.removeCls(eFootLis[i], 'active');
$api.removeCls(eHeaderLis[i], 'active');
}
}
$api.addCls(eFootLis[index], 'active');
$api.addCls(eHeaderLis[index], 'active');
api.setFrameGroupIndex({
name: 'group',
index: index
});
}
function back() {
api.historyBack({
}, function (ret, err) {
if (!ret.status) {
api.closeWin();
}
});
}
</script>
</html>
|
-
|
显示全部楼层
QQ空间
新浪微博
微信扫一扫
