仿原生选项卡切换面板支持手势滑动

所属分类:媒体-Tabs

仿原生选项卡切换面板支持手势滑动 ie兼容10

2016-11-1更新

更新说明:

本插件是基于swiper插件进行封装的仿原生安卓ios的切换面板效果插件,仿原生选项卡切换面板支持手势滑动(对原插件的效果进行增强,更加接近原生效果,并对代码结构进行优化)

对滑动面板的调用方法介绍

Created by kiner on 16/9/22.

$(function(){
    //第一步:  实例化一个滑动面板,并绑定响应标签
    var ksp = $.kinerSwiperPanel({
        navSelector: "kinerNav",//导航栏选择器
        conSelector: "kinerContent"//显示面板选择器
    });
    $('.btn').click(function () {
        var index = $(this).attr("data-slideTo");
        ksp.slideTo(index);//可通过此方法主动调用切换面板方法
    });
    /**
     * 注册change函数,当面板切换时插件将自动调用所给函数,并将当前面板索引通过参数形式返回
     */
    ksp.on(ksp.handlerNameList.change,function(activeIndex,event){
        $('.eventPanel').text("事件回调信息: 面板已切换至" + (activeIndex+1)+"号面板");
    });
});


相关插件-Tabs

jqueryTabs选项卡

jqueryTabs选项卡
  Tabs
 23852  32

jQuery tabs选项卡设计效果

这是一款基于bootstrap的简单jquery tabs选项卡美化效果。该tabs选项卡美观大方,使用简单,适用于多种网页场景
  Tabs
 1878  13

jQuery tab选项卡

jQuery tab选项卡,简单实用界面友好
  Tabs
 1455  7

jquery水平滑动tab选项卡

jquery水平滑动tab选项卡
  Tabs
 19192  168

讨论这个项目(11)回答他人问题或分享插件使用方法奖励jQ币

    憨 人 、 0
    2017/7/19 10:25:19

    有人通过官方大哥

    回复
    From the inside?? 0
    2017/7/8 11:08:39

    不能滑动啊

        From the inside??0
        2017/7/8 11:14:22

        上下的

    回复
    fanwenfu 0
    2017/6/28 17:16:57

    有个问题是第一次进入页面时,不能滑动。重新刷新页面才可以滑动。怎么解决

    回复
    山外青山 0
    2017/6/28 10:38:33

    看着是很高大上,但是,我按调用方法介绍中的写了,却不走自己写的js方法,咋回事了?我复制介绍中的代码过去,alert下index,方法还是不走,走的只是源码中的

    回复
    2026(环保代言人)沐梓轩 0
    2017/1/2 17:01:04

    这个貌似很高大上啊

    回复
    山丘的彼方 0
    2016/10/18 11:10:06
    用swiper做TAB有个缺陷就是 高度会以最高的那个TAB来给整个高度赋值如果TAB1内容多 TAB2内容少的话 TAB2就可以像TAB1那样往下翻 但是确实空白没有任何内容的不知道作者解决这个问题没有
        At zcl0
        2016/10/18 13:10:10
        这个自己用js计算控制高度就行了,这个问题不大,大的问题是不同tab页面的滚动不是独立的,是公用的
    回复
    At zcl 0
    2016/10/13 17:10:29
    有点问题,比如说现在你滚动到第一页的底部,这时其他页面应该都是在顶部的,但不是的,你划到第二页的时候,定位的高度是你在第一页滚动的底部高度
        /mn★怡琳★0
        2017/6/16 10:29:14

        这个解决了吗。怎么解决啊

        Ape1
        2017/8/16 10:29:16

        用变量储存各Tab页滚动条的位置$(window).scrollTop() 初始值为null  切换时判断对应变量是不是null 是则滚到顶部

        $('#swiper-slide-1').animate({scrollTop:0},1000)

        不是则滚到对应变量位置

        $('#swiper-slide-1').animate({scrollTop:parselnt(a)},1000)
    回复
取消回复