xSwitchable 一个普通的网页元素切换Jquery插件。[Tabs | Slide | Carousel | Accordion]
Download on GitHub
Demos
License GPL & MIT
这是我编写的一个很'糟糕'的Jquery插件，所以，在使用之前要考虑清楚，并且尽可能的看完下面的说明。
一、为什么要写这个插件？
只想实现简单的元素切换，不对HTML结构做太多改动，如：不添加过多的行内样式，不额外插入包裹标签，不在子嵌套层的动画效果...不画蛇添足...
仅仅只是在（预）配置后实现一个或多个甚至不同类型的切换操作，行为、结构、样式分离，功能明确，简单的接口和契约，实现交互...
没捞着这样的插件，于是...那就自己写一个吧...
二、这个插件有什么用？
只是实现简单的轮播(旋转木马)、选项卡、手风琴效果。可定义常见切换的参数，如哪个方向、要不要自动切换、要不要循环切换、隔多久切换、一次切换多少个...之类。
三、为什么糟糕透顶？
1、主要是在接口和契约上的参数，没有一个判断，没有对错误信息做任何处理，容错性很差！
要能正常运行切换操作，三观务必正常！如：
问你’要不要自动切换‘，你来个’旺财，旺财，旺财你不能挂啊‘，
问你‘一次切换多少个’，你来个’小强，小强，你怎么了小强‘，
本来切换内容有五个，而你设置三个触发导航...这样是不行的！
*在配置上，要慎之又慎！详情见后面‘（预）配置’章节说明。
2、本插件代码太少；
3、没有callback；
4、最大的‘糟糕’是：我不熟悉JavaScript和深层次的WEB知识；
四、要进入正题了！善男信女，下面环节不要出现任何差错！
第一步：JS、CSS文件引入
本插件基于Jquery ，兼容性上有点问题，还需引入migrate ，（糟糕）.
行为、结构、样式分离，得引入一个样式表。
<link href="css/xswitchable.css" rel="stylesheet" />
<script src="js/jquery-1.11.1.min.js"></script>
<script src="js/jquery-migrate-1.2.1.min.js"></script>
<script src="js/xswitchable.js"></script>
*路径自己注意，这里只是意思意思
第二步：三种切换模式，三种HTML结构
模式1、Slide / Carousel 轮播(旋转木马)效果 HTML结构
<!-- Slide / Carousel Begin-->
<div class="J_Slide slide">
<!-- Container Begin-->
<div class="J_SlideCon slide-con">
<!-- Wrapper Begin-->
<div class="J_SlideWrapper slide-wrapper">
<!-- Panel Begin-->
<div class="J_SlidePanel slide-panel slide-panel-visible">内容甲</div>
<!-- Panel End-->
<!-- Panel Begin-->
<div class="J_SlidePanel slide-panel hide">内容乙</div>
<!-- Panel End-->
<!-- Panel Begin-->
<div class="J_SlidePanel slide-panel hide">内容丙</div>
<!-- Panel End-->
</div>
<!-- Wrapper End-->
</div>
<!-- Container End-->
<!-- Nav Begin-->
<div class="J_SlideNav slide-nav">
<!-- Trigger Begin -->
<span class="slide-trigger slide-active">触发甲</span>
<!-- Trigger End -->
<!-- Trigger Begin -->
<span class="slide-trigger">触发乙</span>
<!-- Trigger End -->
<!-- Trigger Begin -->
<span class="slide-trigger">触发丙</span>
<!-- Trigger End -->
</div>
<!-- Nav End-->
<!-- Prev Next Begin -->
<span class="J_SlidePrev slide-prevnext slide-prev">上一视图</span>
<span class="J_SlideNext slide-prevnext slide-next">下一视图</span>
<!-- Prev Next End -->
</div>
<!-- Slide / Carousel End-->
模式2、Tabs 选项卡效果 HTML结构
<!-- Tabs Begin-->
<div class="J_Tabs tabs">
<!-- Nav Begin-->
<div class="J_TabsNav tabs-nav">
<!-- Trigger Begin -->
<div class="tabs-trigger tabs-active">触发甲</div>
<!-- Trigger End -->
<!-- Trigger Begin -->
<div class="tabs-trigger">触发乙</div>
<!-- Trigger End -->
<!-- Trigger Begin -->
<div class="tabs-trigger">触发丙</div>
<!-- Trigger End -->
</div>
<!-- Nav End-->
<!-- Container Begin-->
<div class="J_TabsCon tabs-con">
<!-- Panel Begin-->
<div class="J_TabsPanel tabs-panel tabs-panel-visible">内容甲</div>
<!-- Panel End-->
<!-- Panel Begin-->
<div class="J_TabsPanel tabs-panel hide">内容乙</div>
<!-- Panel End-->
<!-- Panel Begin-->
<div class="J_TabsPanel tabs-panel hide">内容丙</div>
<!-- Panel End-->
</div>
<!-- Container End-->
</div>
<!-- Tabs End-->
模式3、Accordion 手风琴效果 HTML结构
<!-- Accordion Begin-->
<div class="J_Accordion accordion">
<!-- Nav Begin-->
<h3 class="J_AccordionNav accordion-nav accordion-active">触发甲</h3>
<!-- Nav End-->
<!-- Container Begin-->
<div class="J_AccordionCon accordion-con accordion-panel-visible">内容甲</div>
<!-- Container End-->
<!-- Nav Begin-->
<h3 class="J_AccordionNav accordion-nav">触发乙</h3>
<!-- Nav End-->
<!-- Container Begin-->
<div class="J_AccordionCon accordion-con hide">内容乙</div>
<!-- Container End-->
<!-- Nav Begin-->
<<h3 class="J_AccordionNav accordion-nav">触发丙</h3>
<!-- Nav End-->
<!-- Container Begin-->
<div class="J_AccordionCon accordion-con hide">内容丙</div>
<!-- Container End-->
</div>
<!-- Accordion End-->
是不是发现 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 插件
*要是有好的点子和想法或建议，可以发送邮件到[email protected]交流；
*本插件只勉强做脚本行为，网页结构和样式需要自行把握。
最后，这是我编写的一个糟糕透顶的Jquery插件！如若用之，慎之有慎！
练手用的，不要用啦，如有相关需求可以考虑用Swiper