APIcloud之openFrameGroup

2018-11-05

openFrameGroup 打开frame组

https://docs.apicloud.com/Client-API/UI-Layout/UIActionSelector
openFrameGroup
openFrameGroup打开一组页面按钮下标对应页面

api.setFrameGroupAttr({name: ‘myNews’, hidden: true});隐藏openFrameGroup

<!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</title>
    <link rel="stylesheet" type="text/css" href="../css/reset.css"/>
    <style>
        body,html {
            height: 100%;
            width: 100%;
            background-color: #2A3440;
        }
        #nav {
            display: -webkit-box;
            display: -webkit-flex;
            display: flex;
            -webkit-box-orient: horizontal;
            -webkit-flex-flow: row;
            flex-flow: row;
            position: absolute;
            right: 0;
            left: 0;
            bottom: 0;
            width: 100%;
            height: 55px;
            background-color: #242C37;
        }

        #nav .menu {
            width: 100%;
            height: 55px;
            line-height: 50px;
            font-size: 13px;
            color: #ffffff;
            text-align: center;
        }
        .btnText{
          font-size: 12px;
          border:1px solid red;
          height:20px;
        }
        .bottom_btn{
          padding-top: 16px;
          font-size: 12px;
          width: 99%;
          height: 39px !important;
          background-position-y: 4px !important;
          background-size: 28px !important;
        }
        .btn0{
          background: url(../image/homepage/home.png) no-repeat center 4px;

        }
        .btn1{
          background: url(../image/homepage/news.png) no-repeat center 4px;
        }
        .btn2{
          background: url(../image/homepage/maillist.png) no-repeat center 4px;
        }
        .btn3{
          background: url(../image/homepage/my.png) no-repeat center 4px;
        }
        .activebtn0{
          background: url(../image/homepage/home1.png) no-repeat center 4px;
        }
        .activebtn1{
          background: url(../image/homepage/news1.png) no-repeat center 4px;
        }
        .activebtn2{
            background: url(../image/homepage/maillist1.png) no-repeat center 4px;
        }
        .activebtn3{
            background: url(../image/homepage/my1.png) no-repeat center 4px;
        }
        .activebtn{
          color:#22CCB9;
        }
    </style>
</head>

<body>
    <div id='nav'>
        <div class='menu' tapmode='' onclick="fnSetNavMenuSelected(0,true)">
          <a class="bottom_btn btn0">首页</a>
        </div>
        <div class='menu' tapmode='' onclick="fnSetNavMenuSelected(1,true)">
            <a class="bottom_btn btn1">消息</a>
        </div>
        <div class='menu' tapmode='' onclick="fnSetNavMenuSelected(2,true)">
            <a class="bottom_btn btn2">通讯录</a>
        </div>
        <div class='menu' tapmode='' onclick="fnSetNavMenuSelected(3,true)">
            <a class="bottom_btn btn3">我的</a>
        </div>
    </div>
</body>
<script type="text/javascript" src="../script/zepto.js"></script>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript">
    var nav = $api.byId('nav');
    var navH = $api.offset(nav).h;

    var navBar = $api.domAll(nav, 'div');

    apiready = function() {
      api.openFrameGroup ({
             name: 'homeGroup',
             scrollEnabled:true,
             index:0,
             rect: {
                 x: 0,
                 y: 0,
                 w: 'auto',
                 marginBottom: 55
             },
             frames: [
                 {
                     name: 'homePage',
                     url: './homePage.html',
                     bounces: false
                 }, {
                     name: 'homeNews',
                     url: './homeNews.html',
                     bounces: false
                 }, {
                     name: 'homeMailList',
                     url: './homeMailList.html',
                     bounces: false
                 }, {
                     name: 'homeMy',
                     url: './homeMy.html',
                     bounces: false
                 }
             ],
             preload: 4
         }, function(ret, err){
            var index = ret.index;
            fnSetNavMenuSelected(index)
         })
    };
    function fnSetNavMenuSelected(index,isButton){
        show(index)
        $(".activebtn").removeClass("activebtn");
        $('.menu').each(function(num){
          $(this).find("a").removeClass("activebtn" + num);
        })
        $(".btn" + index).addClass("activebtn");
        $(".btn" + index).addClass("activebtn" + index);
        //如果是按钮点击设置打开当前index的页面
        if (isButton) {
            show(index)
            api.setFrameGroupIndex({
                name: 'homeGroup',
                index: index,
                scroll: true
            });
        }
    }
</script>
</html>

简单点的两个按钮

<style>
.top_nav {
    position: absolute;
    right: 0;
    left: 0;
    top: 48px;
    width: 100%;
    background-color: #fff;
    box-sizing: border-box;
}

#tab {
    color: #666;
    width: 100%;
    box-flex: 1;
    display: -webkit-flex;
    flex-direction: row;
    height: 30px;
    line-height: 30px;
    border: 1px solid #2B343E;
    font-size: 12px;
    background-color: #242C37;
    box-sizing: border-box;
}

#tab div {
    flex: 1;
    text-align: center;
    color: #ffffff;
}

.active {
    background-color: #18202B;
    color: #37B4D5 !important;
}
</style>
<div class='top_nav'>
    <div id="tab">
        <div class="active menu" id="tab1" tapmode='active'
          onclick="fnSetNavMenuSelected(0,true)">工程状态统计</div>
        <div class='menu' id="tab2" tapmode='active'
          onclick="fnSetNavMenuSelected(1,true)">工程造价统计</div>
    </div>
</div>
<script type="text/javascript">
    var header = $api.byId('header');
    var headerH = $api.offset(header).h;
    var nav = $api.byId('tab');
    var navH = $api.offset(nav).h;
    var tabBar = $api.domAll(nav, 'div');
    apiready = function() {
        api.openFrameGroup({
            name: 'engineeringWin',
            scrollEnabled: true,
            rect: {
                x: 0,
                y: headerH +navH,
                w: 'auto',
                h: 'auto'
            },
            index: 0,
            frames: [{
                name: 'engineeringState',
                url: './engineeringState.html',
            }, {
                name: 'engineeringCost',
                url: './engineeringCost.html',
            }]
        }, function(ret, err) {
            fnSetNavMenuSelected(ret.index)
        });

    };

    function fnSetNavMenuSelected(index, isButton) {
        $('.menu').each(function(num) {
            if (index == num) {
                $(this).addClass('active')
            } else {
                $(this).removeClass('active')
            }
        })
        if (isButton) {
            api.setFrameGroupIndex({
                name: 'engineeringWin',
                index: index,
                scroll: true
            });
        }
    }
</script>

openFrameGroup嵌套openFrameGroup

根据第一层的openFrameGroup的index控制嵌套的显示隐藏，否则会覆盖
1
2
3
if(index == 0){
api.setFrameGroupAttr({name: 'myNews', hidden: true});
}

api.setFrameGroupAttr({name: ‘myNews’, hidden: true});来设置

嵌套解决不了的而已用tabs页的形式去实现

<style>
.top_nav {
    width: 100%;
    background-color: #fff;
    box-sizing: border-box;
}
#tab {
    color: #666;
    width: 100%;
    box-flex: 1;
    display: -webkit-flex;
    flex-direction: row;
    height: 30px;
    line-height: 30px;
    border: 1px solid #2B343E;
    font-size: 12px;
    background-color: #242C37;
    box-sizing: border-box;
}

#tab div {
    flex: 1;
    text-align: center;
    color: #ffffff;
}
.menu{
  cursor: pointer;
}
.active {
    background-color: #18202B;
    color: #37B4D5 !important;
}
#page1 {
    background-color: #2A3440;
    box-sizing: border-box;
}
#page2 {
    background-color: #2A3440;
    box-sizing: border-box;
}
#page1,
#page2 {
    flex:1;
    width: 100%;
    z-index: 1000;
    -webkit-transform: translateX(0%);
    transform: translateX(0%);
    -webkit-transition: all .4s;
    transition: all .4s;
    overflow-y: auto;
}
#page1.out,
#page2.out {
    display: none;
}
</style>
<div class='top_nav'>
    <div id="tab">
        <div class="active menu" id="tab1" tapmode='active'
            onclick="switchBtn(1)">代办任务</div>
        <div class='menu' id="tab2" tapmode='active'
            onclick="switchBtn(2)">已派发任务</div>
    </div>
</div>
<div id="page1"></div>
<div id="page2" class="out"></div>

function switchBtn(num) {
    switchbtn = num;
    $(".active").removeClass('active');
    $("#tab" + num).addClass('active');
    $(".out").removeClass('out');
    if (num == 1) {
        $("#page2").addClass('out');
    } else {
        $("#page1").addClass('out');
    }
}
function openWin(index){
    var pageParam;
    if(switchbtn == 1){
      pageParam = {
        task:daiban[index],//当前点击列表下标的数据
        type:switchbtn,//按钮
      }
    }else{
      pageParam = {
	  	task:paifa[index],//当前点击列表下标的数据
	  	type:switchbtn,//按钮
	  }
    }
    api.openWin({
          name: 'taskdetail',
          url: './Task/taskdetailWin.html',
          bounces:false,
          pageParam:pageParam
    });
}