所需DOM结构
本组件对DOM结构没有特殊要求,调用只需要按顺序将ul列表中每个元素跟内容元素一一对应即可,当然触点和内容都必须包含在唯一的外层容器里面。

<div  class="J_TWidget section">
    <ul class="ks-switchable-nav">
        <li class="ks-active">标题 A</li>
        <li>标题 B</li>
        <li>标题 C</li>
        <li>标题 D</li>
    </ul>
    <div class="ks-switchable-content">
        <div>
                                 -----预先加载的内容---------
        </div>
        <div style="display: none">内容 B</div>
        <div style="display: none">内容 C</div>
        <div style="display: none">内容 D</div>
    </div>
    </div>

组件调用方法

<div class=”J_TWidget”  data-widget-type=”Tabs”  data-widget-config=”{
            'effect': 'fade',
            'autoplay': true,
            'circular': true
      }”>
    <!--  code  -- >
    </div>

配置参数列表

配置参数 参数可选值 作用说明
effect none/fade/scrolly/scrollx

(默认值:none)

切换时的动画效果

none, 最朴素的显示/隐藏效果
fade, 可实现淡隐淡现的效果
scrolly, 垂直滚动
scrollx, 水平滚动

easing easeOutStrong/easeBoth 滚动的动画方方式
countdown true/false (默认值:false) 是否开启倒计时样式
countdownFromStyle 自定义值 设定倒计时最终样式

如: width:15px 表示进度条最终宽度,可先在CSS里对样式进行定义

navCls 自定义值 对其进行轮播的目标列表的class值
contentCls 自定义值 轮播列表所对应的内容列表的class值
delay 自定义数值 (默认值:1) 延迟加载时间

.1 == 100ms

triggerType mouse/click<>

(默认值:mouse)br

触发方式——

mouse:鼠标经过触发
click:鼠标点击触发

hasTriggers true/false (默认值:true) 是否设置触发点
steps 自定义数值 (默认值:1) 切换视图内有多少个panels
viewSize 自定义值 切换视图区域的大小。

一般不需要设定此值,仅当获取值不正确时,用于手工指定大小

activeIndex 自定义数值 (默认值:0) 默认激活的列表项
activeTriggerCls 自定义值 (默认值:active) 默认激活列表项的class值
autoplay true/false (默认值:true) 是否自动播放
circular true/false (默认值:true) 是否有循环滚动效果
duration 自定义值(默认值:0.5) 动画时长

.1 = 100ms

例子

<div  class="J_TWidget tab1" data-widget-type="Tabs">
    <ul class="ks-switchable-nav">
        <li class="ks-active">标题 A</li>
        <li>标题 B</li>
        <li>标题 C</li>
        <li>标题 D</li>
        <li>标题 E</li>
    </ul>
    <div class="ks-switchable-content">
        <div>内容 A</div>
        <div style="display: none">内容 B</div>
        <div style="display: none">内容 C</div>
        <div style="display: none">内容 D</div>
        <div style="display: none">内容 E</div>
    </div>
</div>
.tab1 li{
    list-style:none;
}
.tab1 { position: relative; width: 750px; padding-top: 29px; }
.tab1 .ks-switchable-nav { position: absolute; left: 20px; margin-top: -29px; z-index: 99; }
.tab1 .ks-switchable-nav li {
    float: left;
    width: 130px;
    height: 27px;
    line-height: 21px;
    text-align: center;
    background: url(http://img01.taobaocdn.com/tps/i1/T1XtV7XjhsXXXXXXXX-130-70.gif) no-repeat 0 6px;
    margin-right: 3px;
    padding-top: 8px;
    cursor: pointer;
}
.tab1 .ks-switchable-nav li.ks-active { background-position: 0 -40px; cursor: default; }
.tab1 .ks-switchable-content {
    position: relative;
    height: 120px;
    padding: 20px;
    border: 1px solid #AEC7E5;
}
最后编辑: admin  文档更新时间: 2020-05-20 16:28   作者:admin