apicloud aui 做底部导航

来源：互联网发布：网络优化工程师好学不编辑：程序博客网时间：2024/06/15 22:01
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 onclick="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 onclick="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 onclick="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 onclick="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 onclick="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>
阅读全文
0 0