Tab标签页效果
Tab需要的DOM结构
<div class="Auto_Widget"> (注意switchable任何组件调用必须加入class="Auto_Widget")
<ul class="switchable-triggerBox">
<li class="active"><span>郎朗春意</span></li>
<li>夏日炎炎</li>
<li>秋高气爽</li>
<li>冬至寒风</li>
</ul>
<div class="switchable-content">
<div class="switchable-panel">
郎朗春意，焕发着春天的气息
<p> - 在当前 trigger 中 mouseover/mouseout, click, focus, 不触发<br />
- 鼠标快速滑过非当前 trigger, 不触发<br />
- mouseover 到非当前 trigger, 停留时间到达延迟时，触发<br />
- click 或 Tab 切换到 trigger, 立即触发<br />
- beforeSwitch/onSwitch 事件的触发<br />
- 延迟的内容能正确加载
</P>
</div>
<div class="switchable-panel" style="display: none;">这夏天，出门是烤箱，进门是冰箱</div>
<div class="switchable-panel" style="display: none;">秋天还真的挺凉爽</div>
<div class="switchable-panel" style="display: none;">冬天来了，雪花飘了</div>
</div>
</div>
Tab组件调用方法
<div id="Tabs1" class="Auto_Widget" data-widget-type="Tabs" data-widget-config="{
autoplay:true,
effect:'scrolly',
interval:2000}
">
<!-- 相关Dom结构 -->
</div>
Tab配置参数表格
| 参数名 | 参数含义 | 参数默认值 |
|---|---|---|
| eventType | 支持事件类型点击触发或者鼠标移动 (mouse或click) | mouse |
| autoplay | 是否自动播放 (true/false) | false |
| interval | 间隔时间 | 3000(单位:毫秒) |
| circular | 是否开始循环滚动 (true/false) | false |
| duration | 动画时间，如：从图片1渐变到图片2的时间 | 500(单位:毫秒) |
| hasTriggers | 是否有触点 (true/false) | true |
| triggersBox | 触点元素的父元素 (triggersBox和triggers有一即可) | .switchable-triggerBox |
| triggers | 触点元素的class (triggersBox和triggers有一即可) | .switchable-trigger |
| content | 需要显示元素的父元素 (panels和content有一即可) | .switchable-content |
| panels | 需要显示的元素 (panels和content有一即可) | .switchable-panel |
| activeIndex | 默认显示的元素 | 0 |
| activeClass | 当前选中触点的class | active |
| steps | 每次切换多少个触点的内容 | 1 |
| pauseOnHover | 鼠标悬停停止播放 (true/false) | true |
| islazyload | 是否执行延迟加载 (true/false) | true |
| lazyDataType | 延迟加载内容的标签名称 (textarea/img) | textarea |
| textarea | 延迟加载textarea的class名称 | textarea-lazyload |
| execScript | 是否执行textarea中脚本 (true/false) | true |
| img | 延时加载图片地址的属性名 <img src="loading.gif" img-lazyload="01.jpg"> | img-lazyload |