apicloud apicloud

注册
查看: 11128|回复: 17

[新手教程] 【新手教程】利用openFrameGroup简单实现tab切换

 

主题:
53
帖子:
333
云币:
552

APICloud粉丝APICloud毕业勋章一周年

[新手教程] 【新手教程】利用openFrameGroup简单实现tab切换

 
11128 17 | 发表于 2015-5-19 01:06:14 |阅读模式 | |
利用openFrameGroup的scrollEnabled的属性来实现tab形式的切换,并对应关联菜单的样式
css就不写了,当切换时给对应的菜单添加 class类   active

<div  id="tab">
        <div class="active" id="tab1">菜单1</div>
        <div  id="tab2">菜单2</div>
        <div  id="tab3">菜单3</div>
</div>


js的实现

apiready = function(){
    api.openFrameGroup ({
        name: 'group',
        scrollEnabled:true,
        index:0,
        frames:
        [{
            name: 'demo1',
            url: 'demo1.html',
            bounces:true,
            vScrollBarEnabled:false,
            hScrollBarEnabled:false
        },{
            name: 'demo2',
            url: 'demo2.html',
            bounces:true,
            vScrollBarEnabled:false,
            hScrollBarEnabled:false
        },{
            name: 'demo3',
            url: 'demo3.html',
            bounces:true,
            vScrollBarEnabled:false,
            hScrollBarEnabled:false
        }]
    }, function(ret, err){
        var $tab = $api.byId('tab');
        var $tabBar = $api.domAll($tab, 'div');//获取tab下div标签
        for (var j = 0; j < $tabBar.length; j++) {
            //移除全部active
            $api.removeCls($tabBar[j], 'active');
        }
        var index = ret.index;
        if(index==0){
            var $obj = $api.byId('tab1');
            $api.addCls($obj, 'active');
        }else if(index==1){
            var $obj = $api.byId('tab2');
            $api.addCls($obj, 'active');
        }else if(index==2){
            var $obj = $api.byId('tab3');
            $api.addCls($obj, 'active');
        }
    })
}

1

查看全部评分

新手上路

UID:277985

主题:
4
帖子:
28
云币:
39
发表于 2016-3-14 13:21:39 |
点div之后页面不跟着切换啊

主题:
15
帖子:
4121
云币:
3004
发表于 2015-5-19 10:09:15 |
赞一个

业余车手

UID:22414

主题:
8
帖子:
815
云币:
12667

版主勋章APICloud粉丝

发表于 2015-5-19 10:10:00 |
感谢分享

新手上路

UID:100623

主题:
1
帖子:
47
云币:
60

APICloud粉丝

发表于 2015-6-16 15:39:13 |
点个赞,谢谢分享

实习司机

UID:85745

主题:
39
帖子:
192
云币:
312
发表于 2015-6-17 03:32:28 |
流浪男是牛男

主题:
2
帖子:
13
云币:
28
发表于 2015-7-8 18:31:25 |
setFrameGroupIndex

新手上路

UID:249398

主题:
20
帖子:
64
云币:
177
发表于 2016-4-7 15:42:49 |
在function的回调函数可以简单点:比如

$api.removeCls($api.dom('#tab div.active'),'active');
$api.addCls($api.byId(''+ret.name+''),'active');

驾校小白

UID:28188

主题:
1
帖子:
2
云币:
10
发表于 2016-7-2 20:30:04 |
引入zepto.js还可以更简单
$(tab).index(ret.index).addClass('active').siblings().removeClass('active');

驾校小白

UID:459008

主题:
3
帖子:
14
云币:
36
发表于 2016-10-27 15:13:23 |
不错继续努力
123下一页
您需要登录后才可以回帖 登录 | 立即注册

快速回复 返回顶部 返回列表