加入收藏 | 最新开课 | 最新资讯
  • 泉州浮桥企业公司办公文
  • 泉州鲤城浮桥金龙街道、
  • 泉州鲤城浮桥、中山公园
  • 泉州浮桥电脑设计培训中
  • 2018高考完了我要学电脑设
  • 泉州鲤城photoshop淘宝详情
  • 平面广告包装ps/cad/cd-201
  • 福建百科教育泉州专业a
  • 泉州浮桥金龙AUTOCAD机械零
  • Win10开机密码忘了?教你破
  • 泉州电脑设计培训班欢迎您来学习!
    泉州电脑培训班 > 在线学习 > 淘宝网店 >
    全部课程 专业课程 精品课程 软件课程 职业认证 学历教育 全部课程大集结

    淘宝网店css载入Widget特效规范和设置

    时间:2018-05-03 23:20   来源:泉州培训班   作者:李老师15905099719   点击: 次 (责任编辑:admin)
    淘宝网店css载入Widget特效规范和设置
    淘宝网店css载入Widget特效规范和设置

    淘宝店铺装修中中需要用到一些功能比较丰富的主机,如图片轮播,tab标签等,这些组件都需要设计师写Javascript才能完成,考虑前期JavaScript是不对设计师开放的,所以淘宝要提供一些widget库,方便设计调用,形成特定的组件。
    通过载入淘宝的js框架来渲染。
    <div class="J_TWidget"  data-type="Slide" data-cfg="{…}">         <!--  code  -- > </div>我们会获取名字叫 J_TWidget 的元素, 并根据其类型和配置信息, 渲染相应的效果。

    使用方法 目前淘宝提供的widget 分为5种:
    •        Tabs - 标签页
    •        Slide - 卡盘
    •        Carousel - 旋转木马
    •        Accordion - 手风琴
    •        Popup - 弹出层
    针对每种不同的动画效果需要通过配置不同的参数,配合不同的DOM结构。

    组件中的dom结构:包含在id为demo里面的div结构里面的结构。
    class=”J_TWidget”:用来表示这个div是一个组件,我们要用kissy来渲染这个组件。
    data-widget-type="Tabs":这个是用来告诉sdk,我们的widget组件要用什么方式来渲染。
    data-widget-config=”{….}”: 这个是组件的相关配置,也是很灵活的一部分
    class=”ks-switchable-nav” : 这个用来定义当前组件进行轮播的目标列表的class值。
    PS:我们更推荐用户去自定义一个class来覆盖这个淘宝默认的钩子,方法为在data-widget-config中。
    data-widget-config="{ 'navCls': '自定义的class'}",这样也方便设计师定义样式。
    class="ks-switchable-content":用来定义轮播列表所对应的内容列表的class值。
    PS:我们更推荐用户去自定义一个class来覆盖这个淘宝默认的钩子,方法为在data-widget-config中,data-widget-config="{ 'contentCls': '自定义的class'}",这样也方便设计师定义样式class=”ks-active” : 当前正在轮播的对象(可以用这个来动态应用样式)
    http://pan.baidu.com/share/link?shareid=3943573572&uk=2249206080

    Tabs - 标签页
    本组件对DOM结构没有特殊要求,调用只需要按顺序将ul列表中每个元素跟内容元素一一对应即可,当然触点和内容都必须包含在唯一的外层容器里面。
    1        <div  class="J_TWidget section">
    2            <ul class="ks-switchable-nav">
    3                <li class="ks-active">标题 A</li>
    4                <li>标题 B</li>
    5                <li>标题 C</li>
    6                <li>标题 D</li>
    7            </ul>
    8            <div class="ks-switchable-content">
    9                <div>                
    10              -----预先加载的内容---------            
    11                </div>
    12                <div style="display: none">内容 B</div>
    13                <div style="display: none">内容 C</div>
    14                <div style="display: none">内容 D</div>
    15            </div>
    16        </div>
    复制代码
    组件调用方法
    17        <PRE><div class=”J_TWidget”  data-widget-type=”Tabs”  data-widget-config=”{
    18                    'effect': 'fade',
    19                    'autoplay': true,
    20                    'circular': true
    21             }”>
    22        <!--  code  -- >
    23        </div></PRE>
    复制代码
    1、J_TWidget表示需要用库文件开始渲染;
    2、data-widget-type="Tabs"这个是用来告诉库文件,我们的widget组件要用什么方式来渲染,即它的表现方式为Tab标签式;
    3、data-widget-config=”{….}”这里是组件的相关配置,是很灵活的一部分,可以看后面的配置表;
    4、class=”ks-switchable-nav”这个用来定义当前组件进行轮播的目标列表的class值,就是触发区域;
    5、class="ks-switchable-content"用来定义轮播列表所对应的内容区域的class值。

    配置参数列表 
    配置参数
            参数可选值
            作用说明

    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



    例一:
    DOM 结构
    24        <div  class="J_TWidget tab1" data-widget-type="Tabs">
    25            <ul class="ks-switchable-nav">
    26                <li class="ks-active">标题 A</li>
    27                <li>标题 B</li>
    28                <li>标题 C</li>
    29                <li>标题 D</li>
    30                <li>标题 E</li>
    31            </ul>
    32            <div class="ks-switchable-content">
    33                <div>内容 A</div>
    34                <div style="display: none">内容 B</div>
    35                <div style="display: none">内容 C</div>
    36                <div style="display: none">内容 D</div>
    37                <div style="display: none">内容 E</div>
    38            </div>
    39        </div>
    复制代码
    CSS 结构 .
    40        tab1 li{
    41        list-style:none;
    42        }
    43        .tab1 { position: relative; width: 750px; padding-top: 29px; }
    44        .tab1 .ks-switchable-nav { position: absolute; left: 20px; margin-top: -29px; z-index: 99; }
    45        .tab1 .ks-switchable-nav li {
    46            float: left;
    47            width: 130px;
    48            height: 27px;
    49            line-height: 21px;
    50            text-align: center;
    51            background: url(<A href="http://img01.taobaocdn.com/tps/i1/T1XtV7XjhsXXXXXXXX-130-70.gif">http://img01.taobaocdn.com/tps/i1/T1XtV7XjhsXXXXXXXX-130-70.gif</A>) no-repeat 0 6px;
    52            margin-right: 3px;
    53            padding-top: 8px;
    54            cursor: pointer;
    55        }
    56        .tab1 .ks-switchable-nav li.ks-active { background-position: 0 -40px; cursor: default; }
    57        .tab1 .ks-switchable-content {
    58            position: relative;
    59            height: 120px;
    60            padding: 20px;
    61            border: 1px solid #AEC7E5;
    62        }
    复制代码
    63        合并后,,通用代码
    <div  class="J_TWidget" data-widget-type="Tabs" style="position: relative; width: 750px;">
    64            <ul class="ks-switchable-nav" style="position: absolute; margin-top: -29px; width: 730px; left: 20px; z-index: 99;">
    65                <li class="ks-active" style="list-style:none; float: left; width: 130px; height: 27px; line-height: 21px; text-align: center; background: url(<A href="http://img01.taobaocdn.com/tps/i1/T1XtV7XjhsXXXXXXXX-130-70.gif">http://img01.taobaocdn.com/tps/i1/T1XtV7XjhsXXXXXXXX-130-70.gif</A>) no-repeat 0 6px; margin-right: 3px; padding-top: 8px; cursor: pointer;">标题 A</li>
    66                <li style="list-style:none; float: left; width: 130px; height: 27px; line-height: 21px; text-align: center; background: url(<A href="http://img01.taobaocdn.com/tps/i1/T1XtV7XjhsXXXXXXXX-130-70.gif">http://img01.taobaocdn.com/tps/i1/T1XtV7XjhsXXXXXXXX-130-70.gif</A>) no-repeat 0 6px; margin-right: 3px; padding-top: 8px; cursor: pointer;">标题 B</li>
    67                <li style="list-style:none; float: left; width: 130px; height: 27px; line-height: 21px; text-align: center; background: url(<A href="http://img01.taobaocdn.com/tps/i1/T1XtV7XjhsXXXXXXXX-130-70.gif">http://img01.taobaocdn.com/tps/i1/T1XtV7XjhsXXXXXXXX-130-70.gif</A>) no-repeat 0 6px; margin-right: 3px; padding-top: 8px; cursor: pointer;">标题 C</li>
    68                <li style="list-style:none; float: left; width: 130px; height: 27px; line-height: 21px; text-align: center; background: url(<A href="http://img01.taobaocdn.com/tps/i1/T1XtV7XjhsXXXXXXXX-130-70.gif">http://img01.taobaocdn.com/tps/i1/T1XtV7XjhsXXXXXXXX-130-70.gif</A>) no-repeat 0 6px; margin-right: 3px; padding-top: 8px; cursor: pointer;">标题 D</li>
    69                <li style="list-style:none; float: left; width: 130px; height: 27px; line-height: 21px; text-align: center; background: url(<A href="http://img01.taobaocdn.com/tps/i1/T1XtV7XjhsXXXXXXXX-130-70.gif">http://img01.taobaocdn.com/tps/i1/T1XtV7XjhsXXXXXXXX-130-70.gif</A>) no-repeat 0 6px; margin-right: 3px; padding-top: 8px; cursor: pointer;">标题 E</li>
    70            </ul>
    71            <div class="ks-switchable-content" style="position: relative; height: 120px; padding:20px; border: 1px solid #AEC7E5;">
    72                <div>内容 A</div>
    73                <div style="display: none">内容 B</div>
    74                <div style="display: none">内容 C</div>
    75                <div style="display: none">内容 D</div>
    76                <div style="display: none">内容 E</div>
    77            </div>
    78        </div>
    复制代码

    Slide卡盘效果
    本组件需要将滚动的对象作为一个ul列表,包含在外层的容器中,同时容器里还需要定义一个容器来放置列表中对应项的具体内容。
    1        <div class="J_TWidget section">
    2            <div class="yslider-stage">
    3                <p><a href="#" target="_blank"><img src="###"/></a></p>
    4          <p><a href="#" target="_blank"><img src="###"/></a></p>
    5          <p><a href="#" target="_blank"><img src="###"/></a></p>
    6            </div>
    7            <ul class="yslider-stick">
    8                <li class="selected"><a href="#" target="_blank">aaa</a></li>
    9                <li><a href="#" target="_blank">bbb</a></li>
    10                <li><a href="#" target="_blank">ccc</a></li>
    11            </ul>
    12        </div>
    复制代码
    组件调用方法
    13        <div class=”J_TWidget”  data-widget-type=”Slide”  data-widget-config=”{
    14                    'navCls': 'yslider-stick',
    15                    'contentCls': 'yslider-stage',
    16                    'activeTriggerCls': 'selected',
    17                    'delay': 0.2,
    18                    'effect': 'fade',
    19                    'easing': 'easeBoth',
    20                    'duration': 0.8,
    21                    'autoplay': false,
    22        }”>
    23        <!--  code  -- >
    24        </div>
    复制代码
    1、J_TWidget表示从这里要开始用库文件渲染;
    2、data-widget-type="Slide"表示用Slide卡盘方式来进行渲染;
    3、ks-switchable-content是轮播图内容的开始;
    4、ks-switchable-nav是数字或者文字按钮的内容区;
    5、ks-active是默认显示的按钮;
    6、ks-switchable-trigger-mask是没有激活的按钮状态样式;
    7、ks-switchable-trigger-content是触发状态时的样式。
    参数配置列表
    配置参数
            参数可选值
            作用说明

    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值

    duration
            自定义值(默认值:0.5)
            动画时长
    .1 = 100ms


    上一篇:淘宝网店装修,产品展示35/卡盘展示
    下一篇:泉州淘宝网店装修店招设计