<!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点击底部菜单切换标题的更多相关文章

  1. Android Studio精彩案例(二)《仿微信动态点击底部tab切换Fragment》

    转载本专栏文章,请注明出处,尊重原创 .文章博客地址:道龙的博客 现在很多的App要么顶部带有tab,要么就底部带有tab.用户通过点击tab从而切换不同的页面(大部分情况时去切换fragment). ...

  2. Activity内切换fragment实现底部菜单切换遇到的坑

    1.一般说来,app底部导航都会设计为5个菜单,可以使用textView,也可使用radioButton,这里我选择用radioButton,给radioButton直接设置selector就可以实现 ...

  3. 首页底部菜单FragmentTabHost的使用

    一般现在的菜单都是底部FragmentTabHost,切换Fragment来实现的,今天我们就使用这个来看看如何实现的 首先是布局文件 <?xml version="1.0" ...

  4. Android自己定义TabActivity(实现仿新浪微博底部菜单更新UI)

    现在Android上非常多应用都採用底部菜单控制更新的UI这样的框架,比如新浪微博 点击底部菜单的选项能够更新界面.底部菜单能够使用TabHost来实现,只是用过TabHost的人都知道自己定义Tab ...

  5. MUI框架开发HTML5手机APP(二)--页面跳转传值&底部选项卡切换

      概 述 JRedu 在上一篇博客中,我们学习了如何使用Hbuilder创建一个APP,同时如何使用MUI搭建属于自己的第一款APP,没有学习的同学可以戳链接学习: http://www.cnblo ...

  6. 用Fragment实现如新浪微博一样的底部菜单的切换

    像我这个有强迫症的人来说,自从TabActivity抛弃之后,再使用看到一个个警告和一条条划着的横线,心里很不舒服,现在终于下定决心用Fragment来替换掉TabActivity了!我的研究成果如下 ...

  7. app的底部菜单设计

    一.个人看法. 1.一般都是四个菜单或者五个菜单,这个是绝对主流,我估计占比达99%.当然也有三个菜单图标的,也有零个菜单图标的 2.如果该app软件功能复杂,那么尽量选择5个图标布局.比如苹果app ...

  8. 转-TabHost组件(一)（实现底部菜单导航）

    http://www.cnblogs.com/lichenwei/p/3974009.html 什么是TabHost? TabHost组件的主要功能是可以进行应用程序分类管理,例如:在用户使用wind ...

  9. 安卓开发笔记——TabHost组件(一)（实现底部菜单导航）

    什么是TabHost? TabHost组件的主要功能是可以进行应用程序分类管理,例如:在用户使用windows操作系统的时候,经常见到如图所示的图形界面.     TabHost选项卡,说到这个组件, ...

随机推荐

  1. Azure Media Services -可提供视频点播（VOD）

    ​Azure Media Services 提供直播/VOD点播相关的功能. •提供编码和打包以适用于各种设备播放视频(IOS/Android/web等). •向大量在线观众流式传输实时直播,例如活动 ...

  2. HTML基础标签图片文本超链接列表表格介绍

    1.HTML基础标签图片常见代码形式<img src="图片路径地址" alt="属性名" title="占位符">常见的图片格 ...

  3. php操作mysql（数据库常规操作）

    php操作数据库八步走 <?php .建立连接 $connection '); .判断连接是否成功 if (mysqli_connect_error() != null) { die(mysql ...

  4. JavaSE学习笔记（12）---线程

    JavaSE学习笔记(12)---线程 多线程 并发与并行 并发:指两个或多个事件在同一个时间段内发生. 并行:指两个或多个事件在同一时刻发生(同时发生). 在操作系统中,安装了多个程序,并发指的是在 ...

  5. 浅谈python的第三方库——numpy（一）

    python作为广受欢迎的一门编程语言,其中很重要的一个原因便是它可以使用很多第三方库. 对第三方库的理解,在笔者看来就是一些python爱好者和专门的研发机构,为满足某一特定应用领域的需要,使用py ...

  6. linux 异常 - setsebool: SELinux is disabled.

    问题描述 运行命令:setsebool httpd_can_network_connect 1 或者 setsebool httpd_can_network_connect_db 1 报错:setse ...

  7. Python函数进阶：闭包、装饰器、生成器、协程

    返回目录 本篇索引 (1)闭包 (2)装饰器 (3)生成器 (4)协程 (1)闭包 闭包(closure)是很多现代编程语言都有的特点,像C++.Java.JavaScript等都实现或部分实现了闭包 ...

  8. Windows电脑常用快捷键

    Windows 徽标键键盘快捷方式: Windows 徽标键      打开或关闭“开始”屏幕 Windows 徽标键  + A       打开操作中心 Windows 徽标键  + B       ...

  9. Linux查看系统硬件信息命令

    Linux查看系统硬件信息命令 查看磁盘类型(是否SSD) cat /sys/block/sda/queue/rotational code:0 SSD盘 code:1 SATA盘 查看物理CPU个数 ...

  10. 【学习笔记】BP神经网络

    转自 huaweizte123的CSDN博客  链接 https://blog.csdn.net/huaweizte123/article/details/78803045 第一步.向前传播得到预测数 ...