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选项卡,说到这个组件, ...
随机推荐
- 如何在 vue 中添加权限控制管理？---vue中文社区
前言 在一个项目中,一些功能会涉及到重要的数据管理,为了确保数据的安全,我们会在项目中加入权限来限制每个用户的操作.作为前端,我们要做的是配合后端给到的权限数据,做页面上的各种各样的限制. 需求 因为 ...
- ES6中Set和WeakSet
Set(放数组,不能重复) 会自动去重,有4个元素,但是打印出来只有三个 let setArr=new Set(['zhang','huan','eternity','zhang']); consol ...
- Lua实现的八皇后问题
来自<Lua程序与设计>第二节- 八皇后问题 输出所有解的解法 书中提供的源代码,加注了自己的注释. N = 8 --[[ N为棋盘规模 a为一维数组,保存第i个皇后所在的列数 ]] -- ...
- android中关于时间的控件
1.日期选择器 <DatePicker android:layout_width="wrap_content" android:layout_height="wra ...
- MySQL 8 升级数据库
开始升级前 因为从MySQL 8.0 到MySQL 5.7,或者从MySQL 8.0 到之前的 MySQL 8.0版本都是不支持的.所有在在升级前要做好数据库备份,包括mysql 系统schema(数 ...
- 【daily】Java枚举 - fastjson对enum的处理
目的 1.枚举值转换成完全的json: 2.对象中的枚举成员完全转换成json: 3.枚举类的全部值转换成json: 枚举定义 public enum SongsEnum { SAFE_AND_SOU ...
- 用R实现范式编程
面向函数范式编程(Functional programming) 模拟简单的随机过程 模拟一个简单的随机过程:从N~(0,1)标准正态分布中产生100个随机值,反复5次得到一个list,再以每个lis ...
- H5---禁止长按
以上行为可以总结成这几个(每个手机以及浏览器的表现形式不一样):长按图片保存.长按选择文字.长按链接/手机号/邮箱时呼出菜单. 想要禁止这些浏览器的默认行为,可以使用以下CSS: // 禁止长按图片保 ...
- 记一次mysql的问题处理@20181225
需求:由于某种原因,导致一次分库分表的环境中ddl添加字段和索引没有完全成功,比如100个分库,只有部分修改成功,需要将没有修改成功的库和表找出来,在手动去执行. 由于线上环境,这里模拟还原一下该问题 ...
- IDEA如何快速搭建Java开发环境
作为IntelliJ IDEA mac新手,IDEA如何快速搭建Java开发环境呢?今天小编就给大家带来了IntelliJ IDEA mac使用教程,想知道IDEA如何快速搭建Java开发环境? 全局 ...