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

所属分类:媒体-Tabs

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

适合手机、pad等移动终端的tab响应式切换效果

适合手机、pad等移动终端的tab响应式切换效果
  Tabs
 15771  139

响应式tab选项卡布局

jQuery响应式tab选项卡布局
  Tabs
 5008  42

简约时尚的纯CSS3 Tabs选项卡特效

这是一款使用纯CSS3制作的Tabs选项卡特效。该Tabs选项卡简约时尚,各个选项卡之间切换时使用了下划线跟随动画,整体效果非常不错。
  Tabs
 4959  33

jqueryTabs选项卡

jqueryTabs选项卡
  Tabs
 17406  25

讨论这个项目(4)回答他人问题或分享插件使用方法奖励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
    有点问题,比如说现在你滚动到第一页的底部,这时其他页面应该都是在顶部的,但不是的,你划到第二页的时候,定位的高度是你在第一页滚动的底部高度 回复
取消回复