xSwitchable 一个普通的网页元素切换Jquery插件。[Tabs | Slide | Carousel | Accordion]

来源：互联网发布：加布.纽维尔知乎编辑：程序博客网时间：2024/05/21 22:29

Download on GitHub

Demos

License GPL & MIT

这是我编写的一个很'糟糕'的Jquery插件，所以，在使用之前要考虑清楚，并且尽可能的看完下面的说明。

一、为什么要写这个插件？

只想实现简单的元素切换，不对HTML结构做太多改动，如：不添加过多的行内样式，不额外插入包裹标签，不在子嵌套层的动画效果...不画蛇添足...

仅仅只是在（预）配置后实现一个或多个甚至不同类型的切换操作，行为、结构、样式分离，功能明确，简单的接口和契约，实现交互...

没捞着这样的插件，于是...那就自己写一个吧...

二、这个插件有什么用？

只是实现简单的轮播(旋转木马)、选项卡、手风琴效果。可定义常见切换的参数，如哪个方向、要不要自动切换、要不要循环切换、隔多久切换、一次切换多少个...之类。

三、为什么糟糕透顶？

1、主要是在接口和契约上的参数，没有一个判断，没有对错误信息做任何处理，容错性很差！

要能正常运行切换操作，三观务必正常！如：

问你’要不要自动切换‘，你来个’旺财，旺财，旺财你不能挂啊‘，

问你‘一次切换多少个’，你来个’小强，小强，你怎么了小强‘，

本来切换内容有五个，而你设置三个触发导航...这样是不行的！

*在配置上，要慎之又慎！详情见后面‘（预）配置’章节说明。

2、本插件代码太少；

3、没有callback；

4、最大的‘糟糕’是：我不熟悉JavaScript和深层次的WEB知识；

四、要进入正题了！善男信女，下面环节不要出现任何差错！

第一步：JS、CSS文件引入

本插件基于Jquery ，兼容性上有点问题，还需引入migrate ，（糟糕）.

行为、结构、样式分离，得引入一个样式表。

*路径自己注意，这里只是意思意思

第二步：三种切换模式，三种HTML结构

模式1、Slide / Carousel 轮播(旋转木马)效果 HTML结构
    
    <div class="J_Slide slide">
        
        <div class="J_SlideCon slide-con">
            
            <div class="J_SlideWrapper slide-wrapper">
                
                <div class="J_SlidePanel slide-panel slide-panel-visible">内容甲</div>
                
                
                <div class="J_SlidePanel slide-panel hide">内容乙</div>
                
                
                <div class="J_SlidePanel slide-panel hide">内容丙</div>
                
            </div>
            
        </div>
        
        
        <div class="J_SlideNav slide-nav">
            
            <span class="slide-trigger slide-active">触发甲</span>
            
            
            <span class="slide-trigger">触发乙</span>
            
            
            <span class="slide-trigger">触发丙</span>
            
        </div>
        
        
        <span class="J_SlidePrev slide-prevnext slide-prev">上一视图</span>
        <span class="J_SlideNext slide-prevnext slide-next">下一视图</span>
        
    </div>
    

    模式2、Tabs 选项卡效果 HTML结构
    
    <div class="J_Tabs tabs">
        
        <div class="J_TabsNav tabs-nav">
            
            <div class="tabs-trigger tabs-active">触发甲</div>
            
            
            <div class="tabs-trigger">触发乙</div>
            
            
            <div class="tabs-trigger">触发丙</div>
            
        </div>
        
        
        <div class="J_TabsCon tabs-con">
            
            <div class="J_TabsPanel tabs-panel tabs-panel-visible">内容甲</div>
            
            
            <div class="J_TabsPanel tabs-panel hide">内容乙</div>
            
            
            <div class="J_TabsPanel tabs-panel hide">内容丙</div>
            
        </div>
        
    </div>
    

    模式3、Accordion 手风琴效果 HTML结构
    
    <div class="J_Accordion accordion">
        
        <h3 class="J_AccordionNav accordion-nav accordion-active">触发甲</h3>
        
        
        <div class="J_AccordionCon accordion-con accordion-panel-visible">内容甲</div>
        
        
        <h3 class="J_AccordionNav accordion-nav">触发乙</h3>
        
        
        <div class="J_AccordionCon accordion-con hide">内容乙</div>
        
        
        <<h3 class="J_AccordionNav accordion-nav">触发丙</h3>
        
        
        <div class="J_AccordionCon accordion-con hide">内容丙</div>
        
    </div>
    

是不是发现 HTML结构很灵活，只要钩子名称(ID/Class)和结构层级正常即可，

不在乎是何种网页标签，

不在乎是何种网页内容，

也不在乎是何种网页样式...

只做切换操作...

*预留了 'tabs-panel-visible' 类，可以触发子层里的动画；

*模式1、2中的 Nav 层，随便通过样式控制其形态，如定位在东南西北；

*模式1中的 Wrapper 层，根据切换效果会'自动'添加行内样式，不要去定义它样式，也不要大惊小怪；

第三步：把样式写好

在没有脚本情况下，页面能还原成设计师稿件图预期效果。（要是再没有样式了？是不是也要能分清网页传递信息的结构？几级标题、各种列表、段落…这里就不多说网页标准和语义化相关的了）

*在Slide / Carousel 轮播(旋转木马)效果中，Container 、Panel 务必有宽度和高度值。

第四步：配置插件

如：

       $('.J_Slide').xSwitchable({
            markupType: 0,
            circular: true,
            interval: 2.5,
            effect: "scrollx",
            navCls: '.J_SlideNav',
            triggerCls: '.slide-trigger',
            contentCls: '.J_SlideCon',
            pannelCls: '.J_SlidePanel',
            wrapperCls: ".J_SlideWrapper",
            activeTriggerCls: 'slide-active',
            pannelVisibleCls: 'slide-panel-visible',
            prevBtnCls: ".J_SlidePrev",
            nextBtnCls: ".J_SlideNext",
            enableBtnCls: "slide-unavailable"
        });

        $('.J_Tabs').xSwitchable({
            markupType: 1,
            autoplay: false,
            triggerType: 'hover',
            navCls: '.J_TabsNav',
            triggerCls: '.tabs-trigger',
            contentCls: '.J_TabsCon',
            pannelCls: '.J_TabsPanel',
            activeTriggerCls: 'tabs-active',
            pannelVisibleCls: 'tabs-panel-visible'
        });

        $('.J_Accordion').xSwitchable({
            markupType: 2,
            autoplay: false,
            triggerType: 'hover',
            navCls: '.J_AccordionNav',
            triggerCls: '.accordion-trigger',
            contentCls: '.J_AccordionCon',
            activeTriggerCls: 'accordion-active',
            pannelVisibleCls: 'accordion-panel-visible'
        });

就是这样子，完成了。

五、自定义（预）配置

            // Namespace
            navCls: '.J_SwitchableNav',                  //导航层的Class
            triggerCls: '.switchable-trigger', //触发元素的Class
            contentCls: '.J_SwitchableCon',    //内容层的Class
            wrapperCls: ".J_SwitchableWrapper", //内容包裹层的Class
            pannelCls: '.J_SwitchablePanel',          //内容面板组的Class
            prevBtnCls: ".J_SwitchablePrev",          //切换到上一视图的Class
            nextBtnCls: ".J_SwitchableNext",          //切换到下一视图的Class
            playBtnCls: ".J_SwitchablePlay",          //播放按钮的Class
            pauseBtnCls: ".J_SwitchablePause", //暂停按钮的Class

            // Controls
            markupType: 0,                                        //0:轮播特效(Slide、Carousel),1:选项卡(Tabs),2:手风琴(Accordion)特效,
            autoplay: true,                                          //是否自动切换
            circular: true,                                            //是否循环切换
            hasTriggers: true,                                   //是否有触发器
            pauseOnHover: true,                              //鼠标悬停时是否暂停自动播放
            pauseOnScroll: false,                          //不在视窗时是否停止自动轮播
            multiple: false,                                         //是否同时展开多个面板功能(Accordion)
            interval: 3,                                                 //自动播放间隔时间(秒)
            duration: .5,                                              //动画的时长(秒)
            delay: .1,                                                   //触发延迟时间(秒)
            steps: 1,                                                   //每次切换间隔多少个Panels
            activeIndex: 0,                                     //默认激活项
            activeTriggerCls: 'trigger-active',         //激活某个trigger时的Class
            pannelVisibleCls: 'panel-visible',       //激活某个panel时的Class,可以给Panel里的元素提供触发钩子(Hook)
            enableBtnCls: "switchable-unavailable",//上下视图切换按钮,不可用时的Class
            triggerType: 'hover',                               //触发类型*参考jQuery的'鼠标事件'

            //effect
            effect: "none",                       //动画切换效果*none, scrollx, scrolly、fade*后期会多扩展一些切换效果出来*
            easing: "swing"                    //动画路径效果*jQuery Easing 插件

*要是有好的点子和想法或建议，可以发送邮件到xianghongai@gmail.com交流；

*本插件只勉强做脚本行为，网页结构和样式需要自行把握。

最后，这是我编写的一个糟糕透顶的Jquery插件！如若用之，慎之有慎！

练手用的，不要用啦，如有相关需求可以考虑用Swiper

0 0