炫意html5
最早CSS3和HTML5移动技术网站之一

APICloud 底部导航设置

上代码

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
<title>首页</title>
<link rel="stylesheet" type="text/css" href="https://huhao.me/css/aui.css" />
<link rel="stylesheet" type="text/css" href="https://huhao.me/iconfont/iconfont.css" />
</head>
<body>
<header class="aui-bar aui-bar-nav" id="aui-header">当前预警</header>
<footer class="aui-bar aui-bar-tab" id="footer">
<div id="tabbar1" class="aui-bar-tab-item aui-active" tapmode onclick="randomSwitchBtn(this,'当前预警',0)">
<i class="iconfont icon-tixing"></i>
<div class="aui-bar-tab-label">当前预警</div>
</div>
<div id="tabbar2" class="aui-bar-tab-item" tapmode onclick="randomSwitchBtn(this,'历史预警',1)">
<i class="iconfont icon-lishitongzhi-nor"></i>
<div class="aui-bar-tab-label">历史预警</div>
</div>
<div id="tabbar3" class="aui-bar-tab-item" tapmode onclick="randomSwitchBtn(this,'用户设置',2)">
<i class="iconfont icon-wode-nor"></i>
<div class="aui-bar-tab-label">用户设置</div>
</div>
</footer>
</body>
<script type="text/javascript" src="https://huhao.me/script/api.js"></script>
<script type="text/javascript">
apiready = function(){
api.parseTapmode();
var header = $api.byId('aui-header');
var footer = $api.byId('footer')
$api.fixStatusBar(header);
$api.fixTabBar(footer)
api.setStatusBarStyle({
style : 'light',
color : '#03a9f4'
});
var headerPos = $api.offset(header);
var body_h = api.winHeight;
var footer_h = $api.offset(footer).h;
api.openFrameGroup ({
name: 'footer_tab_demo',
scrollEnabled:true,
rect:{
x:0,
y:headerPos.h,
w:'auto',
h:body_h - headerPos.h - footer_h
},
index:0,
preload:3,
frames:
[{
name: 'current',
url: 'html/current_frm.html',
bounces:false
},{
name: 'history',
url: 'html/history_frm.html',
bounces:false
},{
name: 'center',
url: 'html/center_frm.html',
bounces:false
}]
}, function(ret, err){
var footer = $api.byId('footer');
var footerAct = $api.dom(footer, '.aui-bar-tab-item.aui-active');
$api.removeCls(footerAct, 'aui-active');
var name = ret.name;
var index = ret.index;
if(index==0){
$api.text($api.byId('aui-header'),'当前预警');
$api.addCls($api.byId('tabbar1'), 'aui-active');
}else if(index==1){
$api.text($api.byId('aui-header'),'历史预警');
$api.addCls($api.byId('tabbar2'), 'aui-active');
}else if(index==2){
$api.text($api.byId('aui-header'),'用户设置');
$api.addCls($api.byId('tabbar3'), 'aui-active');
}
})
}
function closeWin(){
api.closeWin();
}
function randomSwitchBtn(obj, name, index) {
$api.text($api.byId('aui-header'),name);
var footer = $api.byId('footer');
var footerAct = $api.dom(footer, '.aui-bar-tab-item.aui-active');
$api.removeCls(footerAct, 'aui-active');
$api.addCls(obj, 'aui-active');
api.setFrameGroupIndex({
name: 'footer_tab_demo',
index: index,
scroll:true
});
}
</script>
</html>

 

 

炫意HTML5 » APICloud 底部导航设置

CSS3教程HTML5教程