Tab标签页效果

Tab标签页效果

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

转载于:https://www.cnblogs.com/limonyun/p/7690965.html