四、main页面groupframe的使用

main页面groupframe

<!DOCTYPE HTML>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0, minimum-scale=1.0, user-scalable=0, initial-scale=1.0, width=device-width" />
    <meta name="format-detection" content="telephone=no, email=no, date=no, address=no">
    <title>Hello APP</title>
    <link rel="stylesheet" type="text/css" href="../css/api.css" />
    <style>


    header {
      position: relative;
      width: 100%;
      height: 50px;
      background-color: #e1017e;
    }

    header .left{
      position: absolute;
      bottom: 0;
      left:0;
      width: 100px;
      height: 50px;
    }

    header .center{
      position: relative;
      width: 100%;
      height: 50px;
      background:url(../image/title_main.png);
      background-size: 74px 19px;
      background-position: center center;
      background-repeat: no-repeat;
    }
    header .right{
      position: absolute;
      bottom: 0;
      right:0;
      width: 40px;
      height: 50px;
      background:url(../image/membercenter.png);
      background-size: 30px 30px;
      background-position: center center;
      background-repeat: no-repeat;
    }

    header .left .arrow{
      position: absolute;
      bottom:21px;
      left: 11px;
      width: 13px;
      height: 8px;
      background:url(../image/arrow_down.png);
      background-size: 13px 8px;
      background-position: center center;
      background-repeat: no-repeat;
    }

    header .left .city{
      position: relative;
      width: 100%;
      height: 50px;
      padding-left: 27px;
      box-sizing: border-box;
      line-height: 50px;
      font-size: 14px;
      color: #fff;
      text-align: left;

    }

  nav {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-orient:horizontal;
    -webkit-flex-flow:row;
    flex-flow: row;
    position: relative;
    width: 100%;
    height: 40%;
    background-color: #e1017e;
  }
  nav .menu{
    -webkit-box-flex:1;
    -webkit-flex:1;
    flex: 1;
    width: 100%;
    height: 40px;
    line-height: 40px;
    font-size: 13px;
    color: #fff;
    text-align: center;
  }

   nav .menu.selected{   //这里.menu.selected 两个元素之间不要有空格,不然不是同级元素
     font-size: 14px;
     color: #fff;
     font-weight: bolder;s;
   }

    </style>
</head>

<body>
      <header id="header">
          <div class="left">
            <div class="arrow"></div>
            <div class="city">北京市</div>
          </div>
          <div class="center"></div>
          <div class="right"></div>
      </header>
      <nav id="nav"> 
          <div class="menu" tapmode="selected" onclick="fnSetNavMenuIndex(0);">水果</div>
          <div class="menu selected" tapmode  onclick="fnSetNavMenuIndex(1);">食材</div>
          <div class="menu" tapmode onclick="fnSetNavMenuIndex(2);">零食</div>
          <div class="menu"  onclick="fnSetNavMenuIndex(3);">牛奶</div>
          <div class="menu" onclick="fnSetNavMenuIndex(4);">蔬菜</div>
      </nav>
</body>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript">
    apiready = function() {

      var header = $api.byId('header');
      var nav = $api.byId('nav');
      //$api.fixStatusBar(header);//判断算上状态栏的高度
      var headerH = $api.offset(header).h;
      var navH = $api.offset(nav).h;
      var menus=$api.domAll(nav,'.menu');//获取所有.menu元素
      //alert(menus.length);
      var frames=[];
      for (var i = 0; i < menus.length; i++) {
        console.log(i);
        frames.push({
          name:'main_frame_' + i,
          url:'./main_frame.html'
        });
      }
      api.openFrameGroup ({
          name: 'mainframegroup',
          scrollEnabled: true,
          rect: {
               x: 0,
               y: headerH+navH,
               w: 'auto',
               h: 'auto'
          },
          index: 0,
          frames: frames
      }, function(ret, err){
          if( ret ){
               //alert( JSON.stringify( ret ) );
               fnSetNavMenuSelected(ret.index);
          }else{
              // alert( JSON.stringify( err ) );
          }
      });
      function fnSetNavMenuSelected(index_){
        for (var i = 0; i < menus.length; i++) {
          if(index_==i)   //判断当前选中的那个元素,就给某一个元素增加样式
          {
              $api.addCls(menus[i],'selected');
          }else {
              $api.removeCls(menus[i],'selected');
          }
        }
      }

    };
    //注意一点：这里不知道为什么不可以放在ready()里面
    function fnSetNavMenuIndex(index_)
    {
       api.setFrameGroupIndex({
           name: 'mainframegroup',
           index: index_,
           scroll: true
       });
    }
    //注意第二点：点击事件会有300的延迟来判断是点击还是 tapmode
    //1、tapmode单独的去掉300 延迟-这是事件的延迟（不包含动画效果）。
    //2、tapmode="selected" 这个会造成 事件只会触发一次（请在nav里面只保留tapmode属性即可）  。
</script>
</html>

main_frame_1

<!DOCTYPE HTML>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0, minimum-scale=1.0, user-scalable=0, initial-scale=1.0, width=device-width" />
    <meta name="format-detection" content="telephone=no, email=no, date=no, address=no">
    <title>Hello APP</title>
    <link rel="stylesheet" type="text/css" href="../css/api.css" />

</head>

<body style="background-color:#cccccc; height:150px;">
  hello
</body>
<script type="text/javascript" src="../script/api.js"></script>


</html>

四、main页面groupframe的使用

猜你喜欢