五二脚本 手机端 m.52jb.net
特色栏目:PHP教程JavaScript正则表达式焦点幻灯片
页面导航:首页 > 网页特效 > 选项卡代码 > 正文内容

jquery横向折叠选项卡切换插件

来源:五二脚本发布时间:12-29浏览:369 次
jquery 横向折叠插件lateral-fold,点击横向得选项卡,产生横向折叠展开的效果,也可以当做横向切换的选项卡使用。横向折叠插件核心样式
jquery横向折叠选项卡切换插件

jquery 横向折叠插件lateral-fold,点击横向得选项卡,产生横向折叠展开的效果,也可以当做横向切换的选项卡使用。

横向折叠插件核心js代码

$.extend($.fn,{
    lateralFold:function(callback){
        //event 事件 可以是 click 或者 mouseenter 注册在盒子的data-event="mouseenter" ,默认 click
        return this.each(function(){
            var $box = $(this),
            $lis = $box.children("li"),  
            boxWidth = $box.width(),
            tabWidth = $box.find(".lateral-fold-tab").eq(0).width();

            var event = $box.data("event")||"click";
            var liWidth = boxWidth - tabWidth * ($lis.length-1);

            $box.on(event,".lateral-fold-tab",function(){
                var $this = $(this),$p = $this.closest("li");
                if($p.hasClass("on")){
                    return
                }
                $p.addClass("on").css("width",liWidth).siblings("li").removeClass("on").css("width",102);
                typeof callback=="function" && callback.call(this,$box);
            });

            //初始化
            $box.children(".on").css("width",liWidth);
            typeof callback=="function" && callback.call(this,$box);
        });
    }
});

//调用测试
$(".lateral-fold").lateralFold();
关于我们 - 联系我们 - 广告合作 - 网站地图 - 网站声明

QQ群:153638182  投稿邮箱: 578640261@qq.com  皖ICP备-14005058

严禁网站镜像,否则追究法律责任。未经www.52jb.net 同意,不得转载本网站上所有的源代码。

五二脚本每日更新大量关于网页制作网页特效php编程网站优化源码下载的实例教程。