Widget规范 

 

概述

实际的开发中需要用到一些功能比较丰富的效果,如图片轮播,tab标签等,这些效果都需要设计师编写相应的JavaScript才能完成,考虑前期JavaScript是不对设计师开放的,所以1号店提供了一些widget组件库,方便设计调用。

使用方法

系统会获取名字叫“J_TWidget”的元素,并根据“data-widget-type”与“data-widget-config”属性配置的值来渲染相应的效果。

目前1号店提供的组件分为7种:

 

函数名称 说明
Tabs 标签页      [示例]
Carousel 旋转木马   [示例]
Accordion 手风琴      [示例]
Popup 弹出层      [示例]
Slide 卡盘         [示例]
Countdown 倒计时      [示例]
MultilevelNav 多级菜单   [示例]

1.标签页

示例

    <div class="J_TWidget tab1" data-widget-type="Tabs">
        <ul class="yhd-switchable-nav">
            <li class="yhd-active">标题 A</li>
            <li>标题 B</li>
            <li>标题 C</li>
            <li>标题 D</li>
            <li>标题 E</li>
        </ul>
        <div class="yhd-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>

 

配置参数列表

配置参数 参数可选值 作用说明
effect none/fade/scrolly/scrollx
(默认值:none)
切换时的动画效果
none, 最朴素的显示/隐藏效果
fade, 可实现淡隐淡现的效果
scrolly, 垂直滚动【需要自定义CSS样式】
scrollx, 水平滚动
【需要自定义CSS样式】
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

2.旋转木马

示例

    <div class="mall-slide J_TWidget dd"
         data-widget-type="Carousel"
         data-widget-config="{'navCls':'yhd-switchable-nav','contentCls':'yhd-switchable-content','effect': 'scrollx',
                             'easing': 'easeOutCubic', 'steps':1, 'viewSize': [908], 'circular': true,
                             'prevBtnCls': 'mall-prev', 'nextBtnCls': 'mall-next', 'disableBtnCls': 'disable' }">
        <a title="上一页" href="javascript:void(0);" class="mall-prev"></a>
        <a title="下一页" href="javascript:void(0);" class="mall-next"></a>

        <div class="mall-content clearfix">
            <ul class="yhd-switchable-content">
                <li class="big-piclist">
                    <span class="J_DirectPromo"><a target="_blank" href="#"><img src='assets/images/img1.jpg'/></a></span>
                </li>
                <li class="big-piclist">
                    <span class="J_DirectPromo"><a target="_blank" href="#"><img src='assets/images/img2.jpg'/></a></span>
                </li>
                <li class="big-piclist">
                    <span class="J_DirectPromo"><a target="_blank" href="#"><img src='assets/images/img3.jpg'/></a></span>
                </li>
            </ul>
            <ul class="yhd-switchable-nav">
                <li class="yhd-active"><img src='assets/images/img1.jpg'/></li>
                <li><img src='assets/images/img2.jpg'/></li>
                <li><img src='assets/images/img3.jpg'/></li>
            </ul>
        </div>
    </div>

 

配置参数列表

配置参数 参数可选值 作用说明
effect none/fade/scrolly/scrollx
(默认值:none)
切换时的动画效果
none, 最朴素的显示/隐藏效果【需要自定义CSS样式】
fade, 可实现淡隐淡现的效果
scrolly, 垂直滚动【需要自定义CSS样式】
scrollx, 水平滚动
【需要自定义CSS样式】
easing easeOutStrong/easeBoth 滚动的动画方方式
countdown true/false (默认值:false) 是否开启倒计时样式
countdownFromStyle 自定义值 设定倒计时最终样式
如: width:15px 表示进度条最终宽度,可先在CSS里对样式进行定义
navCls 自定义值 对其进行轮播的目标列表的class值
contentCls 自定义值 轮播列表所对应的内容列表的class值
delay 自定义数值 (默认值:1) 延迟加载时间,当前显示图片到切换其他图片动作开始,这中间的停留时间
.1 == 100ms
triggerType mouse/click (默认值:mouse) 触发方式—— mouse:鼠标经过触发
click:鼠标点击触发
hasTriggers true/false (默认值:true) 是否设置触发点
steps 自定义数值 (默认值:1) 切换视图内有多少个panels
viewSize 自定义值 切换视图区域的大小。
一般不需要设定此值,仅当获取值不正确时,用于手工指定大小
activeIndex 自定义数值 (默认值:0) 默认激活的列表项
activeTriggerCls 自定义值 (默认值:active) 默认激活列表项的class值
circular true/false(默认:true) 滚动效果
prevBtnCls 自定义值 上一页的class值
nextBtnCls 自定义值 下一页的class值
disableBtnCls 自定义值 按钮不可用的class值
duration 自定义值(默认:0.5) 动画时长,一张图片开始切换到另一张图片显示的时间 .1 == 100ms

3.手风琴

示例

    <div class="J_TWidget accordion1 section" data-widget-type="Accordion" >
        <div class="yhd-switchable-trigger yhd-active"><i class="yhd-icon"></i><h3>标题A</h3></div>
        <div class="yhd-switchable-panel">内容A</div>
        <div class="yhd-switchable-trigger"><i class="yhd-icon"></i><h3>标题B</h3></div>
        <div class="yhd-switchable-panel" style="display:none;">内容B</div>
        <div class="yhd-switchable-trigger"><i class="yhd-icon"></i><h3>标题C</h3></div>
        <div class="yhd-switchable-panel" style="display:none;">内容C</div>
        <div class="yhd-switchable-trigger last-trigger"><i class="yhd-icon"></i><h3>标题D</h3></div>
        <div class="yhd-switchable-panel last-panel" style="display:none;">内容D</div>
    </div>

 

配置参数列表

配置参数 参数可选值 作用说明
triggerCls 自定义值 主列表的class值
panelCls 自定义值 列表所对应的内容列表的class值
triggerType mouse/click (默认值:click) 触发方式
mouse:鼠标经过触发
click:鼠标点击触发
multiple true/false (默认值:false) 是否同时支持多面板展开
hasTriggers true/false (默认值:true) 是否设置触发点

4.弹出层

示例

    <div class="main">
        <div class="first-trigger">我只是个触点而已,把鼠标滑到我身上
            <div class="J_TWidget hidden" data-widget-type="Popup" data-widget-config="{
                  'trigger':'.first-trigger',
                  'align':{
                          'node':'.first-trigger',
                          'offset':[0,0],
                          'points':['cc','cc']
                          }
                    }">
                <div style="background-color: blue; height: 100px; width: 200px;">
                    我是一个弹出层
                </div>
            </div>
        </div>
    </div>

 

配置参数列表

配置参数 参数可选值 作用说明
trigger 自定义
 
触点元素,就是鼠标滑过哪个元素的时候弹出当前的popup,支持class选择器的写法
align node,points,offset 三个配置 node: ‘自定义’, // 参考元素。 popup与参考元素进行定位。
points: [tr,tl],  // ['tr','tl']表示popup的 tl 与参考节点的 tr 对齐,
                     具体取值和表示的意义如下(下面五种值可两两组合): 
                     t(top),c(center),b(bottom),l(left),r(right)
offset: [0,0]     // 有效值为 [n, m],points对齐后,offset值,
                      一般可用于微调,n和m分别表示对齐两个点
                      在x,y坐标之间的偏移量

5.卡盘

示例

    <div class="J_TWidget section loading slide1" data-widget-type="Slide" 
         data-widget-config="{'effect':'scrollx', 'easing':'easeOutCubic','countdown':true}">
        <ol class="yhd-switchable-content">
            <li>
                <a href="#" target="_blank"><img alt="" src="assets/images/img1.jpg"/></a>
            </li>
            <li>
                <a target="_blank" href="#"><img alt="" src="assets/images/img2.jpg"/></a>
            </li>
            <li>
                <a target="_blank" href="#"><img alt="" src="assets/images/img3.jpg"/></a>
            </li>
        </ol>
    </div>

 

配置参数列表

配置参数 参数可选值 作用说明
effect none/fade/scrolly/scrollx
(默认值:none)
切换时的动画效果
none, 最朴素的显示/隐藏效果
fade, 可实现淡隐淡现的效果
scrolly, 垂直滚动
scrollx, 水平滚动
easing easeOutCubic 滚动的动画方方式
countdown true/false (默认值:false) 是否开启倒计时样式
countdownFromStyle 自定义值 设定倒计时最终样式
如: width:15px 表示进度条最终宽度,可先在CSS里对样式进行定义
navCls 自定义值 对其进行轮播的目标列表的class值
contentCls 自定义值 轮播列表所对应的内容列表的class值
delay 自定义数值 (默认值:1) 延迟加载时间
.1 == 100ms
triggerType mouse/click (默认值:mouse) 触发方式 mouse:鼠标经过触发
click:鼠标点击触发
hasTriggers true/false (默认值:true) 是否设置触发点
steps 自定义数值 (默认值:1) 切换视图内有多少个panels
viewSize 自定义值 切换视图区域的大小。
一般不需要设定此值,仅当获取值不正确时,用于手工指定大小
activeIndex 自定义数值 (默认值:0) 默认激活的列表项
activeTriggerCls 自定义值 (默认值:active) 默认激活列表项的class值
duration 自定义值(默认值:0.5) 动画时长 .1 = 100ms

6.倒计时

示例

    <div class="J_TWidget" data-widget-type="Countdown" data-widget-config='{
"endDay":{
"year":"2015","month":"7","day":"31","hours":"18","minutes":"30","seconds":"0"}
}'>
    <span class="days">00</span>天
    <span class="hours">00</span>时
    <span class="minutes">00</span>分
    <span class="seconds">00</span>秒
</div>

 

配置参数列表

配置参数 参数可选值 作用说明
  endDay year,month,day,hours,minutes,seconds
6个配置

year:年,如2015

month:月,值从1到12分别对应1月到12月

day:日

hours:时,24小时值

minutes:分,范围为[0,59]

seconds:秒,范围为[0,59]

开始时间为服务器时间

注意:结束时间一定要大于当前时间

7.多级菜单

       示例

    <div class="multievel-nav J_TWidget" data-widget-type="MultilevelNav" 
         data-widget-config='{"location":"right"}'>
    <ul>
        <li>
            <a href="#">一级菜单1*</a>
            <ul>
                <li>
                    <a href="#">二级菜单11*</a>
                    <ul>
                        <li><a href="">三级菜单111</a></li>
                        <li><a href="">三级菜单112</a></li>
                        <li><a href="">三级菜单113</a></li>
                        <li><a href="">三级菜单114</a></li>
                    </ul>
                </li>
                <li>
                    <a href="#">二级菜单12*</a>
                    <ul>
                        <li><a href="">三级菜单121</a></li>
                        <li><a href="">三级菜单122</a></li>
                        <li><a href="">三级菜单123</a></li>
                        <li><a href="">三级菜单124</a></li>
                        <li><a href="">三级菜单125</a></li>
                        <li><a href="">三级菜单126</a></li>
                    </ul>
                </li>
                <li><a href="#">二级菜单13</a></li>
                <li>
                    <a href="#">二级菜单14*</a>
                    <ul>
                        <li><a href="">三级菜单141</a></li>
                        <li><a href="">三级菜单142</a></li>
                    </ul>
                </li>
            </ul>
        </li>
        <li><a href="#">一级菜单2</a></li>
        <li>
            <a href="#">一级菜单3*</a>
            <ul>
                <li><a href="">二级菜单31</a></li>
                <li><a href="">二级菜单32</a></li>
                <li><a href="">二级菜单33</a></li>
                <li><a href="">二级菜单34</a></li>
                <li><a href="">二级菜单35</a></li>
                <li>
                    <a href="">二级菜单36*</a>
                    <ul>
                        <li><a href="">三级菜单361</a></li>
                        <li><a href="">三级菜单362</a></li>
                        <li><a href="">三级菜单363</a></li>
                        <li><a href="">三级菜单364</a></li>
                        <li><a href="">三级菜单365</a></li>
                        <li><a href="">三级菜单366</a></li>
                    </ul>
                </li>
                <li><a href="">二级菜单37</a></li>
                <li><a href="">二级菜单38</a></li>
                <li><a href="">二级菜单39</a></li>
            </ul>
        </li>
        <li><a href="#">一级菜单5</a></li>
        <li><a href="#">一级菜单6</a></li>
        <li>
            <a href="#">一级菜单7*</a>
            <ul>
                <li><a href="">二级菜单71</a></li>
            </ul>
        </li>
        <li><a href="#">一级菜单8</a></li>
    </ul>
</div>

 

      配置参数列表

配置参数 参数可选值 作用说明
  location

top/bottom/center/right/left 5个值可选

子菜单的位置

 

 

 

提示

关闭