码迷,mamicode.com
首页 > 移动开发 > 详细

app点击底部菜单切换标题

时间:2018-12-22 11:32:05      阅读:221      评论:0      收藏:0      [点我收藏+]

标签:onclick   news   iconfont   active   fresh   read   dev   imu   orm   

<!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/aui.css" />
<link rel="stylesheet" type="text/css" href="../css/aui-skin.css" />
<style>
.aui-bar-light {
background-color: #019c8a;
}
.aui-bar-nav .aui-title {
color: #fff;
}
.box {
display: none;
}
.show {
display: block;
}
.foot-btn {
width: 1.2rem;
display: block;
position: relative;
left: 50%;
margin-left: -0.6rem;
}
.aui-dot{
top: 0.5rem;
right: 10%;
}
.icon-img{
width: 1rem;
}
</style>
</head>
<body>
<header id="header">
<section class="aui-bar aui-bar-nav aui-bar-light box show " id="index_btn">
<div class="aui-title" id="titleName">昌邑智慧园林</div>
<a class="aui-pull-right aui-btn">
<span class="aui-iconfont aui-icon-refresh"></span>
</a>
</section>
<section class="aui-bar aui-bar-nav aui-bar-light box">
<div class="aui-title">报警信息</div>
</section>
<section class="aui-bar aui-bar-nav aui-bar-light box">
<div class="aui-title">个人中心</div>
</section>
</header>
<footer class="aui-bar aui-bar-tab" id="footer">
<div class="aui-bar-tab-item tit-in aui-active " tapmode onclick="newsgroupeOn(0,this)">
<i class="aui-iconfont aui-icon-home"></i>
<div class="aui-bar-tab-label">实时跟踪</div>
</div>
<div class="aui-bar-tab-item" tapmode onclick="newsgroupeOn(1,this)">
<i class="aui-iconfont tit-in aui-icon-star"></i>
<div class="aui-bar-tab-label">报警信息</div>
</div>
<div class="aui-bar-tab-item" tapmode onclick="newsgroupeOn(2,this)">
<i class="aui-iconfont tit-in aui-icon-cart"></i>
<div class="aui-bar-tab-label">个人中心</div>
</div>
</footer>
</body>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript">
var delay,header;
apiready = function(){
header = document.querySelector(‘header‘);
$api.fixStatusBar(header);
api.parseTapmode();
delay = api.systemType != ‘ios‘ ? 300 : 0;
openFrameGroup();
};

function openFrameGroup(){
var header_h = header.offsetHeight;
var footer_h = footer.offsetHeight;

api.openFrameGroup({
name: ‘newsGroup‘,
rect: {
x: 0,
y: header_h,
w: ‘auto‘,
h: ‘auto‘,
marginBottom:footer_h
},
bounces:true,
scrollEnabled: false,
frames: [{
name: ‘main_map_frm‘,
url: ‘main_map_frm.html‘
},{
name: ‘main_alarm_frm‘,
url: ‘main_alarm_frm.html‘
},{
name: ‘my_frm‘,
url: ‘my_frm.html‘
}]
}, function(ret, err) {
// if (ret) {
// alert(JSON.stringify(ret));
// } else {
// alert(JSON.stringify(err));
// }
});
}
//tab切换
// function newsgroupeOn(index, obj){
// var btitInBtn = document.querySelector(".aui-active");
// btitInBtn.classList.remove("aui-active");
// obj.classList.add("aui-active");
// if (index == 0) {
// document.getElementById(‘titleName‘).innerHTML=‘昌邑智慧园林‘;
// }else if (index == 1) {
// document.getElementById(‘titleName‘).innerHTML=‘报警信息‘;
// }else if (index == 2) {
// document.getElementById(‘titleName‘).innerHTML=‘个人中心‘;
// }
// api.setFrameGroupIndex({
// name: ‘newsGroup‘,
// index: index,
// scroll: false
// })
// }
//
function newsgroupeOn(index, obj){
var btitInBtn = document.querySelector(".aui-active");
btitInBtn.classList.remove("aui-active");
obj.classList.add("aui-active");

var boxShow = document.querySelector(‘.box.show‘);
boxShow.classList.remove("show");
var box = document.querySelectorAll(‘.box‘);
box[index].classList.add(‘show‘);
// api.setFrameGroupIndex({
// name: ‘newsGroup‘,
// index: index,
// scroll: false
// })
}
function closethiswin(){
api.closeWin({
});
}
</script>
</html>

app点击底部菜单切换标题

标签:onclick   news   iconfont   active   fresh   read   dev   imu   orm   

原文地址:https://www.cnblogs.com/lsongyang/p/10159875.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!