oschina-app
/
index.html

<!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"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>index</title>
    <link rel="stylesheet" type="text/css" href="./css/aui.css" />
<style>
.aui-nav .aui-bar-tab {
	background-color: #F8F8F8;
}
</style>
</head>
<body>
	<header class="aui-bar aui-bar-nav aui-bar-primary" id="aui-header">
	    <div class="aui-title" id="header-title">综合</div>
	    <a class="aui-pull-right" id="aui-pull-right">
	    	<span class="aui-iconfont aui-icon-search"></span>
	    </a>
	</header>
    <footer class="aui-nav" id="aui-footer">
        <ul class="aui-bar-tab">
            <li class="active-primary" id="tabbar0" tapmode onclick="randomSwitchBtn(this,'综合',0)">
                <span class="aui-iconfont aui-icon-read"></span>
                <p>综合</p>
            </li>
            <li id="tabbar1" tapmode onclick="randomSwitchBtn(this,'问答',1)">
                <span class="aui-iconfont aui-icon-community"></span>
                <p>问答</p>
            </li>
            <li id="tabbar2" tapmode onclick="randomSwitchBtn(this,'动弹',2)">
                <span class="aui-iconfont aui-icon-mark"></span>
                <p>动弹</p>
            </li>
            <li id="tabbar3" tapmode onclick="randomSwitchBtn(this,'我',3)">
                <span class="aui-iconfont aui-icon-my"></span>
                <p>我</p>
            </li>
        </ul>
    </footer>
</body>
<script type="text/javascript" src="./script/api.js"></script>
<script type="text/javascript" src="./script/zepto.min.js"></script>
<script type="text/javascript" src="./script/common.js" ></script>
<script type="text/javascript">
    apiready = function(){
		api.setStatusBarStyle({
		    style: 'light'
		});

    	var user_uid = $api.getStorage('user_uid');
    	if(user_uid == undefined){
    		$api.setStorage('user_uid', 0);
    	}

        var header = $api.byId('aui-header');
        $api.fixStatusBar(header);
        var headerPos = $api.offset(header);
        var body_h = $api.offset($api.dom('body')).h;
        var footer_h = $api.offset($api.byId('aui-footer')).h;

        api.openFrameGroup ({
            name: 'footer_tab',
            scrollEnabled:false,
            rect:{
	            x:0,
	            y:headerPos.h,
	            w:'auto',
	            h:body_h - headerPos.h - footer_h
            },
            index:0,
            preload:0,
            frames:
            [{
                name: 'footer_tab_0',
                url: './html/footer_tab_0.html',
                pageParam: {bodyHeight:body_h, headerHeight:headerPos.h, footerHeight:footer_h},
                bounces:false
            },{
                name: 'footer_tab_1',
                url: './html/footer_tab_1.html',
                pageParam: {bodyHeight:body_h, headerHeight:headerPos.h, footerHeight:footer_h},
                bounces:false
            },{
                name: 'footer_tab_2',
                url: './html/footer_tab_2.html',
                pageParam: {bodyHeight:body_h, headerHeight:headerPos.h, footerHeight:footer_h},
                bounces:false
            },{
                name: 'footer_tab_3',
                url: './html/footer_tab_3.html',
                pageParam: {bodyHeight:body_h, headerHeight:headerPos.h, footerHeight:footer_h},
                bounces:true
            }]
        }, function(ret, err){
            var footer = $api.byId('aui-footer');
            var footerAct = $api.dom(footer, '.aui-bar-tab li.active-primary');
            $api.removeCls(footerAct, 'active-primary');
            var name = ret.name;
            var index = ret.index;
            if(index==0){
                $api.text($api.byId('header-title'),'综合');
                $api.addCls($api.byId('tabbar0'), 'active-primary');
                $api.html($api.byId('aui-pull-right'),'<span class="aui-iconfont aui-icon-search"></span>');
            }else if(index==1){
                $api.text($api.byId('header-title'),'问答');
                $api.addCls($api.byId('tabbar1'), 'active-primary');
                $api.html($api.byId('aui-pull-right'),'<span class="aui-iconfont aui-icon-post"></span>');
            }else if(index==2){
                $api.text($api.byId('header-title'),'动弹');
                $api.addCls($api.byId('tabbar2'), 'active-primary');
                $api.html($api.byId('aui-pull-right'),'<span class="aui-iconfont aui-icon-add1" tapmode onclick="openLogin()"></span>');
            }else if(index==3){
                $api.text($api.byId('header-title'),'我');
                $api.addCls($api.byId('tabbar3'), 'active-primary');
 			    $api.html($api.byId('aui-pull-right'),'<span class="aui-iconfont aui-icon-settings"></span>');
            }
        });

    };

    function randomSwitchBtn(obj, name, index) {
        $api.text($api.byId('header-title'),name);
        var footer = $api.byId('aui-footer');
        var footerAct = $api.dom(footer, '.aui-bar-tab li.active-primary');
        $api.removeCls(footerAct, 'active-primary');
        $api.addCls(obj, 'active-primary');
        api.setFrameGroupIndex({
            name: 'footer_tab',
            index: index
        });

        for(var i=0; i<3; i++){
	        api.setFrameGroupAttr({
	            name: 'tab_' + i,
	            hidden: true
	        });
        }

        api.setFrameGroupAttr({
            name: 'tab_' + index,
            hidden: false
        });

    }

</script>
</html>