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当前选中触点的classactive
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

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值