apicloud aui 做底部导航
诸葛皓
apicloud aui 做底部导航
<!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="../css/aui.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 οnclick="randomSwitchBtn(this,'首页',0)">
<i class="aui-iconfont aui-icon-home"></i>
<div class="aui-bar-tab-label">首页</div>
</div>
<div id="tabbar2" class="aui-bar-tab-item" tapmode οnclick="randomSwitchBtn(this,'未接',1)">
<i class="aui-iconfont aui-icon-phone"></i>
<div class="aui-bar-tab-label">未接</div>
</div>
<div id="tabbar3" class="aui-bar-tab-item" tapmode οnclick="randomSwitchBtn(this,'已结',2)">
<i class="aui-iconfont aui-icon-cart"></i>
<div class="aui-bar-tab-label">已结</div>
</div>
<div id="tabbar4" class="aui-bar-tab-item" tapmode οnclick="randomSwitchBtn(this,'呼出',3)">
<i class="aui-iconfont aui-icon-my"></i>
<div class="aui-bar-tab-label">呼出</div>
</div>
<div id="tabbar5" class="aui-bar-tab-item" tapmode οnclick="randomSwitchBtn(this,'挂断',4)">
<i class="aui-iconfont aui-icon-my"></i>
<div class="aui-bar-tab-label">挂断</div>
</div>
</footer>
</body>
<script type="text/javascript" src="../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);
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: 'main',
url: 'html/main.html',
bounces: false
}, {
name: 'footer_tab_2',
url: 'html/footer_tab_2.html',
bounces: false
}, {
name: 'footer_tab_3',
url: 'html/footer_tab_3.html',
bounces: false
}, {
name: 'footer_tab_4',
url: 'html/footer_tab_4.html',
bounces: false
}, {
name: 'footer_tab_5',
url: 'html/footer_tab_5.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');
} else if (index == 3) {
$api.text($api.byId('aui-header'), '呼出');
$api.addCls($api.byId('tabbar4'), 'aui-active');
} else if (index == 4) {
$api.text($api.byId('aui-header'), '挂断');
$api.addCls($api.byId('tabbar5'), '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>
类似资料：