app点击底部菜单切换标题
<!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点击底部菜单切换标题的更多相关文章
- Android Studio精彩案例(二)《仿微信动态点击底部tab切换Fragment》
转载本专栏文章,请注明出处,尊重原创 .文章博客地址:道龙的博客 现在很多的App要么顶部带有tab,要么就底部带有tab.用户通过点击tab从而切换不同的页面(大部分情况时去切换fragment). ...
- Activity内切换fragment实现底部菜单切换遇到的坑
1.一般说来,app底部导航都会设计为5个菜单,可以使用textView,也可使用radioButton,这里我选择用radioButton,给radioButton直接设置selector就可以实现 ...
- 首页底部菜单FragmentTabHost的使用
一般现在的菜单都是底部FragmentTabHost,切换Fragment来实现的,今天我们就使用这个来看看如何实现的 首先是布局文件 <?xml version="1.0" ...
- Android自己定义TabActivity(实现仿新浪微博底部菜单更新UI)
现在Android上非常多应用都採用底部菜单控制更新的UI这样的框架,比如新浪微博 点击底部菜单的选项能够更新界面.底部菜单能够使用TabHost来实现,只是用过TabHost的人都知道自己定义Tab ...
- MUI框架开发HTML5手机APP(二)--页面跳转传值&底部选项卡切换
概 述 JRedu 在上一篇博客中,我们学习了如何使用Hbuilder创建一个APP,同时如何使用MUI搭建属于自己的第一款APP,没有学习的同学可以戳链接学习: http://www.cnblo ...
- 用Fragment实现如新浪微博一样的底部菜单的切换
像我这个有强迫症的人来说,自从TabActivity抛弃之后,再使用看到一个个警告和一条条划着的横线,心里很不舒服,现在终于下定决心用Fragment来替换掉TabActivity了!我的研究成果如下 ...
- app的底部菜单设计
一.个人看法. 1.一般都是四个菜单或者五个菜单,这个是绝对主流,我估计占比达99%.当然也有三个菜单图标的,也有零个菜单图标的 2.如果该app软件功能复杂,那么尽量选择5个图标布局.比如苹果app ...
- 转-TabHost组件(一)（实现底部菜单导航）
http://www.cnblogs.com/lichenwei/p/3974009.html 什么是TabHost? TabHost组件的主要功能是可以进行应用程序分类管理,例如:在用户使用wind ...
- 安卓开发笔记——TabHost组件(一)（实现底部菜单导航）
什么是TabHost? TabHost组件的主要功能是可以进行应用程序分类管理,例如:在用户使用windows操作系统的时候,经常见到如图所示的图形界面. TabHost选项卡,说到这个组件, ...
随机推荐
- rabbitmq安装（ubuntu）
本文大量复制自:https://blog.csdn.net/qq_22638399/article/details/81704372 # 安装erlang apt-get install erlang ...
- python3-cookbook笔记：第七章 函数
python3-cookbook中每个小节以问题.解决方案和讨论三个部分探讨了Python3在某类问题中的最优解决方式,或者说是探讨Python3本身的数据结构.函数.类等特性在某类问题上如何更好地使 ...
- 如何在 vue 中添加权限控制管理？---vue中文社区
前言 在一个项目中,一些功能会涉及到重要的数据管理,为了确保数据的安全,我们会在项目中加入权限来限制每个用户的操作.作为前端,我们要做的是配合后端给到的权限数据,做页面上的各种各样的限制. 需求 因为 ...
- MySQL 的一条语句是怎么执行的
该文为< MySQL 实战 45 讲>的学习笔记,感谢查看,如有错误,欢迎指正 一.MySQL 的基础架构 以下就是 MySQL 的基础架构图. 在 Linux 中安装 MySQL 时,最 ...
- libmodbus库linux 嵌入式设备中的使用
libmodbus库的交叉编译:1]到libmodbus官网https://libmodbus.org/download/下载安装包,内部自带configure文件,官网推荐v3.1.6稳定版.另外注 ...
- 阿里云K8S下玩.NET CORE 3.1
1. 创建阿里云K8S集群,本文以标准托管集群为例 1.1 创建一个 2台 centos 2core 4G的 k8s 集群 1.2 创建成功的模样 2. 创建 asp.net core webapi项 ...
- 为spring cloud config实现刷新动态掉的坑
正常搭建配置中心,网上教程多,这里不讨论,只记坑也是为了后来者少花时间在这里,由于是当时研究了好久才写的文章,所以只能提供问题的原因,当然会给出印证的思路,闲话不多说进入正题! 版本spring bo ...
- Java Web笔记（2）
学习笔记,狂神说java,链接:https://www.bilibili.com/video/av68833391 5.Maven 我为什么要学习这个技术? 在Javaweb开发中,需要使用大量的ja ...
- netty 4.x用户使用指南
引言 问题 现在我们使用通用的应用程序或库来相互通信.例如,我们经常使用HTTP客户机从web服务器检索信息,并通过web服务调用远程过程调用.然而,通用协议或其实现有时不能很好地进行扩展.这就像我们 ...
- opencv —— line、ellipse、rectangle、circle、fillPoly、putText 基本图形的绘制
绘制线段:line 函数 void line(Mat& img, Point pt1, Point pt2, const Scalar& color, int thickness=1, ...