minxing-tools-core
Version:
147 lines (145 loc) • 5.57 kB
HTML
<html>
<head>
<meta charset="utf-8">
<meta name="copyright" content="www.apicloud.com" />
<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
<title>window</title>
<link rel="stylesheet" type="text/css" href="../css/api.css" />
<style>
#main {
display: -webkit-box;
display: -webkit-flex;
display: flex;
-webkit-box-orient: vertical;
-webkit-flex-flow: column;
flex-flow: column;
}
#header {position: relative; background-color: #f2f2f2; border-bottom: 1px solid #e0e0e0;}
.logo {position: absolute; left: 20px; bottom: 13px; height: 25px; }
h1 { height: 50px; line-height: 50px; font-size: 20px; color: #000;font-weight: normal;margin: 0 auto; text-align: center; }
.navbar {
display: -webkit-box;
display: -webkit-flex;
display: flex;
-webkit-box-orient: horizontal;
position: relative;
height: 50px; box-sizing: border-box;
background: #fff;
border-bottom: 1px solid #e0e0e0;
}
.navbar-item {
display: block; -webkit-box-flex: 1;
-webkit-flex: 1;
flex: 1;
width: 100%; line-height: 50px;
font-size: 18px; text-align: center;color: #9B9C9C;
}
.navbar-item-hov {
background-color: rgba(254,242,228,0.7);
}
.navbar-item-active {
color: #6ab494;
}
#navmark {
position: absolute; left: 0px; bottom: 0px;
-webkit-transition: 300ms;
}
#navmark img {position: absolute; bottom: 0; height: 8px;}
</style>
</head>
<body>
<div id="main">
<header id="header">
<img class="logo" src="../image/ic_back_u.png" tapmode onclick="" />
<h1 id="title">广播</h1>
</header>
<nav class="navbar">
<a id="navbar-item-recommend" class="navbar-item navbar-item-active" tapmode="navbar-item-hov" onclick="setFrameGroupIndex(0);">用户信息</a>
<a id="navbar-item-rank" class="navbar-item" tapmode="navbar-item-hov" onclick="setFrameGroupIndex(1);">系统信息</a>
<a id="navbar-item-favorite" class="navbar-item" tapmode="navbar-item-hov" onclick="setFrameGroupIndex(2);">广播</a>
<mark id="navmark"><img src="../image/quick_action_arrow_up.png"></mark>
</nav>
<section id="content">
</section>
</div>
</body>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript">
function setFrameGroupIndex(frameIndex) {
api.setFrameGroupIndex({name:'message',index:frameIndex,scroll:true});
}
function setFrameGroupStatus(frameIndex) {
var title = $api.byId('title'),
navmark = $api.byId('navmark'),
recommend = $api.byId('navbar-item-recommend'),
rank = $api.byId('navbar-item-rank'),
favorite = $api.byId('navbar-item-favorite');
var imgW = $api.dom('#navmark img').offsetHeight;
var leftW = (api.winWidth/3-imgW)/2;
switch (frameIndex) {
case 0: {
title.innerHTML = '用户消息';
recommend.className = "navbar-item navbar-item-active";
rank.className = "navbar-item";
favorite.className = "navbar-item";
$api.css(navmark, "-webkit-transform:translate(" + leftW + "px,0)");
break;
}
case 1: {
title.innerHTML = '系统消息';
recommend.className = "navbar-item";
rank.className = "navbar-item navbar-item-active";
favorite.className = "navbar-item";
var num = (api.winWidth/3)*frameIndex+leftW;
$api.css(navmark, "-webkit-transform:translate(" + num + "px,0)");
break;
}
case 2: {
title.innerHTML = '广播';
recommend.className = "navbar-item";
rank.className = "navbar-item";
favorite.className = "navbar-item navbar-item-active";
var num = (api.winWidth/3)*frameIndex+leftW;
$api.css(navmark, "-webkit-transform:translate(" + num + "px,0)");
break;
}
default:
break;
}
}
apiready = function() {
var header = $api.byId('header');
$api.fixIos7Bar(header);
var headerHeight = $api.byId('header').offsetHeight;
var scrollHeight = $api.dom('.navbar').offsetHeight;
$api.byId('navmark').style.width = api.winWidth/3 + 'px';
api.openFrameGroup({
name: 'message',
background: '#FFF',
rect: {x: 0, y: headerHeight+scrollHeight, w: "auto", h: "auto"},
index: 0,
frames: [
{
name: 'apicloudFrame1',
url: 'apicloudFrame1.html',
bounces: false,
},
{
name: 'apicloudFrame1',
url: 'apicloudFrame1.html',
bounces: false,
},
{
name: 'apicloudFrame1',
url: 'apicloudFrame1.html',
bounces: false,
}
]
}, function (ret) {
setFrameGroupStatus(ret.index);
});
};
</script>
</html>