请选择 进入手机版 | 继续访问电脑版
帖子
帖子
用户
博客
课程
12下一页
返回列表 发新帖
显示全部楼层
53
帖子
0
勋章
564
Y币

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

  [复制链接]
发表于 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');
        }
    })
}

4
帖子
0
勋章
39
Y币
点div之后页面不跟着切换啊
39
帖子
0
勋章
312
Y币
流浪男是牛男
赞一个
8
帖子
0
勋章
1万+
Y币
感谢分享
1
帖子
0
勋章
60
Y币
点个赞,谢谢分享
2
帖子
0
勋章
34
Y币
setFrameGroupIndex
20
帖子
0
勋章
185
Y币
在function的回调函数可以简单点:比如

$api.removeCls($api.dom('#tab div.active'),'active');
$api.addCls($api.byId(''+ret.name+''),'active');
1
帖子
0
勋章
10
Y币
引入zepto.js还可以更简单
$(tab).index(ret.index).addClass('active').siblings().removeClass('active');
3
帖子
0
勋章
38
Y币
不错继续努力
12下一页
您需要登录后才可以回帖 登录

本版积分规则