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

所属分类:媒体-Tabs

 7244  75  查看评论 (5)
仿原生选项卡切换面板支持手势滑动 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

基于swiper作的移动端tab拨动效果

一款基于swiper的移动端拨动插件
  Tabs
 8024  65

jQuery tab选项卡插件

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

jQuery响应式内容选项卡插件效果演示

这款响应式的jQuery内容选项卡插件也可以说是一款文字内容滑块插件。
  Tabs
 6139  42

jQuery选项卡插件

可批量,自定义当前显示、自定义事件、自定义切换方式及自动播放的选项卡插件
  Tabs
 5392  32

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

    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

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

    回复
取消回复