jifuning
/
yangchangwan


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180
							<!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">
    <meta name="format-detection"content="telephone=no">
    <title>index</title>
    <link rel="stylesheet" type="text/css" href="../../css/api.css"/>
    <link rel="stylesheet" type="text/css" href="../../css/style.css"/>
    <link rel="stylesheet" href="../../css/projeck.css">
    <style media="screen">
      body,html{
        margin: 0;
        background: #fff;
      }
      #nav_items{
          display: flex;
          display: -webkit-flex;
          justify-content: center;
          -webkit-justify-content: center;
          align-items: center;
          position: relative;
          top: 11.5px;
      }
      #nav_items li{
          width: 85px;
          height: 27px;
          line-height: 27px;
          color: #fff;
          border: 1px solid #fff;
          -webkit-box-sizing: border-box;
          box-sizing: border-box;
          font-size: 14px;
      }
      #nav_items li:first-child{
          border-top-left-radius: 2px;
          border-bottom-left-radius: 2px;
          border-right: 0;
      }
      #nav_items li:last-child{
          border-top-right-radius: 2px;
          border-bottom-right-radius: 2px;
          border-left: 0;
      }
      #nav_items .active_nav{
          background: #ffffff;
          color: #009fe8;
      }
    </style>
</head>
<body>
  <div class="api_layout">
    <header class="header-login">
       <img class="backBtn" src="../../image/btn_back.png" alt="" onclick="backIndex()">
       <ul id="nav_items">
         <li class="active_nav" tapmode="active_nav" onclick="randomSwitchBtn(this)">
             二维码
         </li>
         <li tapmode="active_nav" onclick="randomSwitchBtn(this)">
            记录
         </li>
       </ul>
    </header>
    <div class="api_nav">
      <div class="header-nav scroller nav-haohuo" id="navScroll">

      </div>
    </div>
  </div>
</body>
</html>
<script type="text/javascript" src="../../script/api.js"></script>
<!-- <script src="../../script/fastclick.min.js" charset="utf-8"></script> -->
<script src="../../script/config.js" charset="utf-8"></script>
<script type="text/javascript">
    apiready = function () {
        $api.fixStatusBar($api.dom('header') );
        var depID = api.pageParam.depID,messageFlag = api.pageParam.messageFlag;
        if (messageFlag == 'CODE') {
          funIniGroup(depID,0);
        }else if (messageFlag == 'RECORD') {
          funIniGroup(depID,1);
        }
        keybackFun()//调用监听物理返回键
    };
    var eHeaderLis;
    function funIniGroup(depID,id){
            eHeaderLis = $api.domAll('#nav_items li'),
            frames = [];
        for (var i = 0,len = eHeaderLis.length; i < len; i++) {
            frames.push( {
                name: 'QRcode'+i,
                url: 'QRcode'+i+'.html',
                bgColor : '#f2f2f2',
                bounces:true,
                pageParam:{
                  depIDs:depID
                },
            } )
        }
        api.openFrameGroup({
            name: 'QRcodegroup',
            scrollEnabled: true,
            rect: {
                x: 0,
                y: $api.dom('header').offsetHeight,
                w: api.winWidth,
                h: $api.winHeight
            },
            preload:0,
            index: id,
            frames: frames
        }, function (ret, err) {
            menuSelected(ret.index);
        });
    };
    function menuSelected(index) {
        for (var i = 0; i < eHeaderLis.length; i++) {
          if(index == i ){
            $api.addCls(eHeaderLis[i], 'active_nav');
          }else {
            $api.removeCls(eHeaderLis[i], 'active_nav');
          }
        }
    }
    function randomSwitchBtn( tag ) {
        if( tag == $api.dom('#nav_items li.active_nav') )return;
        var eFootLis = $api.domAll('#nav_items 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_nav');
            }
        }
        $api.addCls( eFootLis[index], 'active_nav');
        api.setFrameGroupIndex({
            name: 'QRcodegroup',
            index: index
        });
    }
    function backIndex() {
      var newsFun ='newsFun()'
      api.sendEvent({
        name: 'myEvent',
        extra: {
            key1: 'value1',
            key2: 'value2'
        }
      });
      api.sendEvent({
        name: 'newsBroadcast',
        extra: {
            key1: 'value1',
            key2: 'value2'
        }
      });
      api.closeWin({
        name:'QRcodeLisr'
      });
    }
    // 监听物理返回键
    function keybackFun() {
      api.addEventListener({
      		name: 'keyback'
      	}, function(ret, err){
          api.sendEvent({
            name: 'myEvent'
          });
          api.sendEvent({
            name: 'newsBroadcast'
          });
          api.closeWin({
            name:'QRcodeLisr'
          });
      });
    }
</script>