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选项卡,说到这个组件, ...
随机推荐
- viewpage+RadioButton+Fragment简单导航界面
https://blog.csdn.net/qibanxuehua/article/details/47333879
- Angular文件基本结构
main.ts(应用程序主入口) → app.module.ts app.module.ts //这个根模块会告诉Angular如何组装该应用 //引入模块 import { BrowserModul ...
- linux 多并发 连接限制修改
1. 修改 ulimit -a 查看 open files 表示单个用户能打开的最大句柄 如果开发的高并发当个进程打开的句柄需要很大. 修改/etc/security/limits.conf 里面有 ...
- C# SQLITE 使用文档
https://www.devart.com/dotconnect/sqlite/docs/Devart.Data.SQLite~Devart.Data.SQLite_namespace.html 有 ...
- kvm虚拟化安装及虚拟机创建
1.开启虚拟化(VMware虚拟机为例),安装centos7操作系统. 2.查看CPU是否开启虚拟化 #zgrep "vmx" /proc/cpuinfo 3.配置yum源,通过 ...
- C#排序算法的实现---快速排序
快速排序(Quicksort)是对冒泡排序的一种改进.由C. A. R. Hoare在1962年提出.它的基本思想是:通过一趟排序将要排序的数据分割成独立的两部分,其中一部分的所有数据都比另外一部分的 ...
- JavaWeb开发图书管理系统（新本版）源码
开发环境: Windows操作系统开发工具: Myeclipse+Jdk+Tomcat+MySQL数据库 运行效果图
- Exec msdb.dbo.sp_send_dbmail 参数详解(SQL Server 存储过程发邮件)
转载oriency755 发布于2012-12-04 11:34:45 阅读数 6870 收藏 sp_send_dbmail [ [ @profile_name = ] 'profile_name ...
- luoguP5219 无聊的水题 I 多项式快速幂
有一个幼儿园容斥:最大次数恰好为 $m=$ 最大次数最多为 $m$ - 最大次数最多为 $m-1$. 然后来一个多项式快速幂就好了. code: #include <cmath> #in ...
- Java_Day6(上)
Java learning_Day6 本人学习视频用的是马士兵的,也在这里献上 <链接:https://pan.baidu.com/s/1qKNGJNh0GgvlJnitTJGqgA> 提 ...