<!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>Hello APP</title>
<link rel="stylesheet" type="text/css" href="../css/api.css" />
<style type="text/css">
html,body{
height: 100%;
}
*{
padding: 0;
margin: 0;
}
header {
}
header ul {
height: 50px;
line-height: 50px;
color: #fff;
font-size: 18px;
width: 100%;
display: -webkit-box;
display: -webkit-flex;
display: flex;
-webkit-box-orient:horizontal;
-webkit-flex-flow:row;
flex-flow: row;
}
header ul li {
height: 50px;
line-height: 50px;
text-align: center;
color: #fff;
font-size: 18px;
}
background-color: rgba(255, 64, 129, 1);
/* header ul li.active {
display: block;
}
*/
/*
footer ul li:nth-child(1) {
background: url(../image/home.png) no-repeat center top;
background-size:26px 26px
}
footer ul li:nth-child(2) {
background: url(../image/search.png) no-repeat center top;
background-size:26px 26px
}
footer ul li:nth-child(3) {
background: url(../image/search.png) no-repeat center top;
background-size:26px 26px
}
footer ul li:nth-child(4) {
background: url(../image/message.png) no-repeat center top;
background-size:26px 26px
}
footer ul li:nth-child(5) {
background: url(../image/mine.png) no-repeat center top;
background-size:26px 26px
}
footer ul li:nth-child(1).active {
background-image: url(../image/homeover.png)!important;
}
footer ul li:nth-child(2).active {
background-image: url(../image/searchover.png)!important;
}
footer ul li:nth-child(3).active {
background-image: url(../image/searchover.png)!important;
}
footer ul li:nth-child(4).active {
background-image: url(../image/messageover.png)!important;
}
footer ul li:nth-child(5).active {
background-image: url(../image/mineover.png)!important;
}
footer{
position: absolute;
bottom: 0;
left: 0;
width: 100%;
overflow: hidden;
box-shadow: #eaeaea 10px 0px 2px 2px ;
font-size: 14px;
}
ul{
display: -webkit-box;
display: -webkit-flex;
display: flex;
-webkit-box-orient:horizontal;
-webkit-flex-flow:row;
flex-flow: row;
background-color: whitesmoke;
text-align: center;
}
li{
-webkit-box-flex:1;
-webkit-flex:1;
flex: 1;
height: 50px;
width: 20%;
}
footer ul li span{
display: block;
height: 25px;
}
*/
</style>
</head>
<body>
<header id="header">
<ul>
<li style="width:25%;background-color:#fff">
<img src="../image/dw.png" class="dw-img" />
<span class="dw-add">南京</span>
</li>
<li style="width:40%;background-color:#fff">dsad</li>
<li style="width:15%;background-color:#fff">dsad</li>
<li style="width:15%;background-color:#fff">dsad</li>
<li style="width:15%;background-color:#fff">dsad</li>
</ul>
</header>
<!--
<header class="aui-bar aui-bar-nav" id="header">
<a class="aui-pull-left aui-btn dw">
<img src="../image/dw.png" class="dw-img" />
<span class="dw-add">南京</span>
</a>
<div class="aui-title search-input">
<div class="aui-searchbar" id="search">
<div class="aui-searchbar-input aui-border-radius">
<i class="aui-iconfont aui-icon-search search-img"></i>
<input type="search" placeholder="请输入关键词" id="search-input" class="sea-input">
<div class="aui-searchbar-clear-btn clear-x" style="display:block;">
<i class="aui-iconfont aui-icon-close clear-close" style="color:#FFF !important;"></i>
</div>
</div>
</div>
</div>
<a class="aui-btn aui-pull-right sm-menu">
<img src="../image/sm.png" class="sm-img" />
<img src="../image/menu.png" class="menu-img" />
</a>
</header>
<footer id="footer">
<ul>
<li tapmode onclick="randomSwitchBtn( this );">
<span></span>
<span>首页</span>
</li>
<li tapmode onclick="randomSwitchBtn( this );">
<span></span>
<span>消息</span>
</li>
<li tapmode onclick="randomSwitchBtn( this );">
<span></span>
<span>专区</span>
</li>
<li tapmode onclick="randomSwitchBtn( this );">
<span></span>
<span>消息</span>
</li>
<li tapmode onclick="randomSwitchBtn( this );">
<span></span>
<span>我的</span>
</li>
</ul>
</footer>
-->
</body>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript">
/*
var menus;
apiready = function() {
var header = $api.byId('header');
$api.fixStatusBar(header);//判断算上状态栏的高度
var headerH = $api.offset(header).h;
var footer = $api.byId('footer');
var footerH = $api.offset(footer).h;
menus=$api.domAll('footer ul li');
// alert(menus.length);
var frames=[];
for (var i = 0; i < menus.length; i++) {
frames.push({
name:'main_frame_' + i,
url:'./main_frame_' + i + '.html',
pageParam:{
footerH:footerH,
headerH:headerH,
}
});
}
api.openFrameGroup ({
name: 'mainFrameGroup',
scrollEnabled: false,
rect: {
x: 0,
y: headerH,
w: 'auto',
h: api.winHeight -headerH -footerH -2
},
preload:0,
index: 0,
frames:frames
}, function(ret, err){
if( ret ){
// alert( JSON.stringify( ret ) );
}else{
alert( JSON.stringify( err ) );
}
});
};
function randomSwitchBtn(tag) {
//if (tag == $api.dom('#footer li.active')) return;
index = 0;
for (var i = 0, len = menus.length; i < len; i++) {
if (tag == menus[i]) {
index = i;
} else {
$api.removeCls(menus[i], 'active');
}
}
alert(menus.length);
$api.addCls(menus[index], 'active');
/*
if(index!=1)
{
api.setFrameGroupAttr({
name: 'orderFrameGroup',
hidden: true
});
}else {
api.setFrameGroupAttr({
name: 'orderFrameGroup',
hidden: false
});
}
api.setFrameGroupIndex({
name: 'mainFrameGroup',
index: index,
scroll: true
});
}*/
</script>
</html>
11示例
猜你喜欢
转载自blog.csdn.net/weixin_36792339/article/details/80832925
今日推荐
周排行