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 |