guojy
/
qzw_app


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165
							<!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>底部导航</title>
    <link rel="stylesheet" type="text/css" href="../../css/api.css" />
    <link rel="stylesheet" type="text/css" href="../../css/style.css" />
    <style>
        header{ background-color: #f2f2f2; }
        header ul li { height: 50px; line-height: 50px; text-align: center; display: none; color: #323237; position: relative;font-size: 18px;  }
        header ul li.active{ display: block; }
        #footer ul li.active{ color: #D9251C; }
        #footer ul li:nth-child(1){ background-image: url(../../image/bottombtn0101.png); }
        #footer ul li:nth-child(2){ background-image: url(../../image/bottombtn0301.png); }
        #footer ul li:nth-child(3){ background-image: url(../../image/bottombtn0201.png); }
        #footer ul li:nth-child(4){ background-image: url(../../image/bottombtn0401.png); }
        #footer ul li:nth-child(1).active{ background-image: url(../../image/bottombtn0102.png); }
        #footer ul li:nth-child(2).active{ background-image: url(../../image/bottombtn0302.png); }
        #footer ul li:nth-child(3).active{ background-image: url(../../image/bottombtn0202.png); }
        #footer ul li:nth-child(4).active{ background-image: url(../../image/bottombtn0402.png); }
        .flex-con{
            overflow: auto
        }
    </style>
    <script>
    (function(w, d, m) {
        function r() {
            var t = 100,
                o = 750,
                e = d.documentElement.clientWidth || w.innerWidth,
                n = m.max(m.min(e, 480), 320),
                h = 50;
            320 >= n && (h = m.floor(n / o * t * .99)),
                n > 320 && 362 >= n && (h = m.floor(n / o * t * 1)),
                n > 362 && 375 >= n && (h = m.floor(n / o * t * 1)),
                n > 375 && (h = m.floor(n / o * t * .97)),
                d.querySelector("html").style.fontSize = h + "px"
        };
        r();
        w.onresize = function() {
            r()
        }
    })(window, document, Math);
    </script>
</head>

<body>
    <div id="wrap" class="flex-wrap flex-vertical">
        <header style="display: none;">
            <ul>
                <li class="border-b active"></li>
                <li class="border-b"></li>
                <li class="border-b"></li>
                <li class="border-b"></li>
            </ul>
        </header>
        <div id="main" class="flex-con">
        </div>
        <div id="footer" class="border-t">
            <ul class="flex-wrap">
                <li tapmode="hover" onclick="randomSwitchBtn( this );" class="flex-con active">首页</li>
                <li tapmode="hover" onclick="randomSwitchBtn( this );" class="flex-con">订单</li>
                <li tapmode="hover" onclick="randomSwitchBtn( this );" class="flex-con">发现</li>
                <li tapmode="hover" onclick="randomSwitchBtn( this );" class="flex-con">我的</li>
            </ul>
        </div>
    </div>
</body>

</html>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript">
apiready = function() {
    $api.fixStatusBar($api.dom('header'));
    api.setStatusBarStyle({
        style: 'dark',
        color: '#fff'
    });
    funIniGroup();
    setBackDisable();
    //$api.setStorage("storeid",2);
}

function funIniGroup() {
    var eHeaderLis = $api.domAll('header li'),
        frames = [];
    for (var i = 0, len = eHeaderLis.length; i < len; i++) {
        if (i == 0) {
            frames.push({
                name: 'frame' + i,
                url: './frame' + i + '.html',
                bgColor: 'rgba(0,0,0,.2)',
                customRefreshHeader: 'UIPullRefresh',
                bounces: true,
                vScrollBarEnabled: false,
                hScrollBarEnabled: false,
                slidBackEnabled: false
            })
        } else {
            frames.push({
                name: 'frame' + i,
                url: './frame' + i + '.html',
                bgColor: 'rgba(0,0,0,.2)',
                bounces: false,
                vScrollBarEnabled: false,
                hScrollBarEnabled: false,
                slidBackEnabled: false
            })
        }
    }
    api.openFrameGroup({
        name: 'group',
        scrollEnabled: false,
        rect: {
            x: 0,
            // y: $api.dom('header').offsetHeight,
            y: document.querySelector( 'header' ).offsetHeight,
            // w: 'auto',//api.winWidth,
            // h: 'auto'//$api.dom('#main').offsetHeight
            h: api.winHeight - document.querySelector( 'header' ).offsetHeight
        },
        index: 0,
        frames: frames
    }, function(ret, err) {

    });
}

function set_height() {
    api.setFrameGroupAttr({
        name: 'group',
        rect: {
            x: 0,
            y: $api.dom('header').offsetHeight,
            w: api.winWidth,
            h: $api.dom('#main').offsetHeight
        }
    })
}

// 随意切换按钮
function randomSwitchBtn(tag) {
    if (tag == $api.dom('#footer li.active')) return;
    var eFootLis = $api.domAll('#footer li'),
        eHeaderLis = $api.domAll('header li'),
        index = 0;
    for (var i = 0, len = eFootLis.length; i < len; i++) {
        if (tag == eFootLis[i]) {
            index = i;
        } else {
            $api.removeCls(eFootLis[i], 'active');
            $api.removeCls(eHeaderLis[i], 'active');
        }
    }
    $api.addCls(eFootLis[index], 'active');
    $api.addCls(eHeaderLis[index], 'active');
    api.setFrameGroupIndex({
        name: 'group',
        index: index
    });
}
</script>