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

所属分类:媒体-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

Tab+无缝滚动双重组合

Tab标签切换+无缝滚动组合
  Tabs
 16993  79

JQUERY多变的幻灯片-COOLCAROUSELS-TAB横向全屏切换

CoolCarousels集合了多种模式的幻灯片,每种模式都有不同德样式和外观,基于jQuery库构建而成。有带有缩略图导航的幻灯片,有包含动态项的旋转木马等等,你基本上可以在这里找到所有类型的幻灯片。到目前为止,CoolCarousels一共有65种类型,那么接下来我就挑选其中的一些来讲解。 该插件实现了tab的横向全屏切换。
  Tabs
 14253  25

移动端app原生标准选项卡

移动端app原生标准选项卡适用于web app原生代码不会卡顿.
  Tabs
 12398  80

jQuery tab选项卡插件

非常实用,5种效果轻量级tab选项卡插件支持鼠标滑过、点击、自动切换、数据回调等功能
  Tabs
 36692  106

讨论这个项目(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)
    回复
取消回复