45 Widget规范.docx
《45 Widget规范.docx》由会员分享,可在线阅读,更多相关《45 Widget规范.docx(21页珍藏版)》请在冰豆网上搜索。
45Widget规范
4.5Widget规范
概述
实际的开发中需要用到一些功能比较丰富的主机,如图片轮播,tab标签等,这些组件都需要设计师写Javascript才能完成,考虑前期JavaScript是不对设计师开放的,所以淘宝要提供一些widget库,方便设计调用,形成特定的组件。
通过载入淘宝的js框架来渲染。
--code-->
我们会获取名字叫J_TWidget的元素,并根据其类型和配置信息,渲染相应的效果。
使用方法
目前淘宝提供的widget分为5种:
∙Tabs-标签页
∙Slide-卡盘
∙Carousel-旋转木马
∙Accordion-手风琴
∙Popup-弹出层
针对每种不同的动画效果需要通过配置不同的参数,配合不同的DOM结构。
以下依次介绍每种不同的动画效果的配置参数以及其DOM结构
Tabs-标签页
实例展示
实例一 实例二
所需DOM结构
本组件对DOM结构没有特殊要求,调用只需要按顺序将ul列表中每个元素跟内容元素一一对应即可,当然触点和内容都必须包含在唯一的外层容器里面。
标题A
-----预先加载的内容---------
none">内容B
none">内容Cnone">内容D组件调用方法'effect':'fade','autoplay':true,'circular':true}”>--code-->配置参数列表配置参数参数可选值作用说明effectnone/fade/scrolly/scrollx(默认值:none)切换时的动画效果none,最朴素的显示/隐藏效果fade,可实现淡隐淡现的效果scrolly,垂直滚动scrollx,水平滚动easingeaseOutStrong/easeBoth滚动的动画方方式countdowntrue/false(默认值:false)是否开启倒计时样式countdownFromStyle自定义值设定倒计时最终样式如:width:15px表示进度条最终宽度,可先在CSS里对样式进行定义navCls自定义值对其进行轮播的目标列表的class值contentCls自定义值轮播列表所对应的内容列表的class值delay自定义数值(默认值:1)延迟加载时间.1==100mstriggerTypemouse/click<>(默认值:mouse)br触发方式——mouse:鼠标经过触发click:鼠标点击触发hasTriggerstrue/false(默认值:true)是否设置触发点steps自定义数值(默认值:1)切换视图内有多少个panelsviewSize自定义值切换视图区域的大小。一般不需要设定此值,仅当获取值不正确时,用于手工指定大小activeIndex自定义数值(默认值:0)默认激活的列表项activeTriggerCls自定义值(默认值:active)默认激活列表项的class值autoplaytrue/false(默认值:true)是否自动播放circulartrue/false(默认值:true)是否有循环滚动效果duration自定义值(默认值:0.5)动画时长.1=100msSlide卡盘效果实例展示超帅图片轮播淘小二推荐 实例一 实例二 实例三 所需DOM结构本组件需要将滚动的对象作为一个ul列表,包含在外层的容器中,同时容器里还需要定义一个容器来放置列表中对应项的具体内容。
none">内容C
none">内容D组件调用方法'effect':'fade','autoplay':true,'circular':true}”>--code-->配置参数列表配置参数参数可选值作用说明effectnone/fade/scrolly/scrollx(默认值:none)切换时的动画效果none,最朴素的显示/隐藏效果fade,可实现淡隐淡现的效果scrolly,垂直滚动scrollx,水平滚动easingeaseOutStrong/easeBoth滚动的动画方方式countdowntrue/false(默认值:false)是否开启倒计时样式countdownFromStyle自定义值设定倒计时最终样式如:width:15px表示进度条最终宽度,可先在CSS里对样式进行定义navCls自定义值对其进行轮播的目标列表的class值contentCls自定义值轮播列表所对应的内容列表的class值delay自定义数值(默认值:1)延迟加载时间.1==100mstriggerTypemouse/click<>(默认值:mouse)br触发方式——mouse:鼠标经过触发click:鼠标点击触发hasTriggerstrue/false(默认值:true)是否设置触发点steps自定义数值(默认值:1)切换视图内有多少个panelsviewSize自定义值切换视图区域的大小。一般不需要设定此值,仅当获取值不正确时,用于手工指定大小activeIndex自定义数值(默认值:0)默认激活的列表项activeTriggerCls自定义值(默认值:active)默认激活列表项的class值autoplaytrue/false(默认值:true)是否自动播放circulartrue/false(默认值:true)是否有循环滚动效果duration自定义值(默认值:0.5)动画时长.1=100msSlide卡盘效果实例展示超帅图片轮播淘小二推荐 实例一 实例二 实例三 所需DOM结构本组件需要将滚动的对象作为一个ul列表,包含在外层的容器中,同时容器里还需要定义一个容器来放置列表中对应项的具体内容。
none">内容D
组件调用方法
'effect':'fade','autoplay':true,'circular':true}”>--code-->配置参数列表配置参数参数可选值作用说明effectnone/fade/scrolly/scrollx(默认值:none)切换时的动画效果none,最朴素的显示/隐藏效果fade,可实现淡隐淡现的效果scrolly,垂直滚动scrollx,水平滚动easingeaseOutStrong/easeBoth滚动的动画方方式countdowntrue/false(默认值:false)是否开启倒计时样式countdownFromStyle自定义值设定倒计时最终样式如:width:15px表示进度条最终宽度,可先在CSS里对样式进行定义navCls自定义值对其进行轮播的目标列表的class值contentCls自定义值轮播列表所对应的内容列表的class值delay自定义数值(默认值:1)延迟加载时间.1==100mstriggerTypemouse/click<>(默认值:mouse)br触发方式——mouse:鼠标经过触发click:鼠标点击触发hasTriggerstrue/false(默认值:true)是否设置触发点steps自定义数值(默认值:1)切换视图内有多少个panelsviewSize自定义值切换视图区域的大小。一般不需要设定此值,仅当获取值不正确时,用于手工指定大小activeIndex自定义数值(默认值:0)默认激活的列表项activeTriggerCls自定义值(默认值:active)默认激活列表项的class值autoplaytrue/false(默认值:true)是否自动播放circulartrue/false(默认值:true)是否有循环滚动效果duration自定义值(默认值:0.5)动画时长.1=100msSlide卡盘效果实例展示超帅图片轮播淘小二推荐 实例一 实例二 实例三 所需DOM结构本组件需要将滚动的对象作为一个ul列表,包含在外层的容器中,同时容器里还需要定义一个容器来放置列表中对应项的具体内容。
'effect':
'fade',
'autoplay':
true,
'circular':
true
}”>
配置参数列表
配置参数
参数可选值
作用说明
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)
是否设置触发点
steps
切换视图内有多少个panels
viewSize
切换视图区域的大小。
一般不需要设定此值,仅当获取值不正确时,用于手工指定大小
activeIndex
0)
默认激活的列表项
activeTriggerCls
自定义值(默认值:
active)
默认激活列表项的class值
autoplay
是否自动播放
circular
是否有循环滚动效果
duration
0.5)
动画时长
.1=100ms
Slide卡盘效果
超帅图片轮播淘小二推荐 实例一 实例二 实例三
本组件需要将滚动的对象作为一个ul列表,包含在外层的容器中,同时容器里还需要定义一个容器来放置列表中对应项的具体内容。
aaa
'navCls':'yslider-stick','contentCls':'yslider-stage','activeTriggerCls':'selected','delay':0.2,'effect':'fade','easing':'easeBoth','duration':0.8,'autoplay':false,}”>--code-->参数配置列表配置参数参数可选值作用说明effectnone/fade/scrolly/scrollx(默认值:none)切换时的动画效果none,最朴素的显示/隐藏效果fade,可实现淡隐淡现的效果scrolly,垂直滚动scrollx,水平滚动easingeaseOutStrong/easeBoth滚动的动画方方式countdowntrue/false(默认值:false)是否开启倒计时样式countdownFromStyle自定义值设定倒计时最终样式如:width:15px表示进度条最终宽度,可先在CSS里对样式进行定义navCls自定义值对其进行轮播的目标列表的class值contentCls自定义值轮播列表所对应的内容列表的class值delay自定义数值(默认值:1)延迟加载时间.1==100mstriggerTypemouse/click<>(默认值:mouse)br触发方式——mouse:鼠标经过触发click:鼠标点击触发hasTriggerstrue/false(默认值:true)是否设置触发点steps自定义数值(默认值:1)切换视图内有多少个panelsviewSize自定义值切换视图区域的大小。一般不需要设定此值,仅当获取值不正确时,用于手工指定大小activeIndex自定义数值(默认值:0)默认激活的列表项activeTriggerCls自定义值(默认值:active)默认激活列表项的class值duration自定义值(默认值:0.5)动画时长.1=100msCarousel-旋转木马实例展示实例一 实例二 所需DOM结构需要滚动的对象依次罗列,包含在内容区的容器中,同时需要两个不同ID的容器来分别包含上下翻页的按钮,另外可以将每一组内容再独自包含在一个ul列表中。‹上一页下一页›••
'navCls':
'yslider-stick',
'contentCls':
'yslider-stage',
'activeTriggerCls':
'selected',
'delay':
0.2,
'easing':
'easeBoth',
'duration':
0.8,
false,
参数配置列表
Carousel-旋转木马
需要滚动的对象依次罗列,包含在内容区的容器中,同时需要两个不同ID的容器来分别包含上下翻页的按钮,另外可以将每一组内容再独自包含在一个ul列表中。
‹上一页
下一页›
•
'effect':'scrollx','easing':'easeOutStrong','steps':5,'viewSize':[680],'circular':false,'prevBtnCls':'prev','nextBtnCls':'next','disableBtnCls':'disable',}”>--code-->参数配置列表配置参数参数可选值作用说明effectnone/fade/scrolly/scrollx(默认值:none)切换时的动画效果none,最朴素的显示/隐藏效果fade,可实现淡隐淡现的效果scrolly,垂直滚动scrollx,水平滚动easingeaseOutStrong/easeBoth滚动的动画方方式countdowntrue/false(默认值:false)是否开启倒计时样式countdownFromStyle自定义值设定倒计时最终样式如:width:15px表示进度条最终宽度,可先在CSS里对样式进行定义navCls自定义值对其进行轮播的目标列表的class值contentCls自定义值轮播列表所对应的内容列表的class值delay自定义数值(默认值:1)延迟加载时间,当前显示图片到切换其他图片动作开始,这中间的停留时间.1==100mstriggerTypemouse/click<>(默认值:mouse)br触发方式——mouse:鼠标经过触发click:鼠标点击触发hasTriggerstrue/false(默认值:true)是否设置触发点steps自定义数值(默认值:1)切换视图内有多少个panelsviewSize自定义值切换视图区域的大小。一般不需要设定此值,仅当获取值不正确时,用于手工指定大小activeIndex自定义数值(默认值:0)默认激活的列表项activeTriggerCls自定义值(默认值:active)默认激活列表项的class值circulartrue/false(默认:true)滚动效果prevBtnCls自定义值上一页的class值nextBtnCls自定义值下一页的class值disableBtnCls自定义值按钮不可用的class值duration自定义值(默认:0.5)动画时长,一张图片开始切换到另一张图片显示的时间.1==100msAccordion-手风琴实例展示实例一 实例二 所需DOM结构需要将菜单中每个标题及其内容分别包含在对应的容器中,最外层容器有唯一的ID来标示组件。标题A内容AAAAA标题Bnone;">内容BBBBB标题Cnone;">内容CCCCC标题Dnone;">内容DDDDD组件调用方法'triggerType':'click','multiple':true}”>--code-->配置参数列表配置参数参数可选值作用说明triggerCls自定义值主列表的class值panelCls自定义值列表所对应的内容列表的class值triggerTypemouse/click(默认值:click)触发方式——mouse:鼠标经过触发click:鼠标点击触发multipletrue/false(默认值:false)是否同时支持多面板展开hasTriggerstrue/false(默认值:true)是否设置触发点Popup-弹出层实例展示实例一 实例二 所需DOM结构本组件作为一个弹出层的效果,通过预先设置一个隐藏的弹出层,并且设置该弹出层的触点,通过鼠标滑入和移出触点来展示和隐藏弹出层效果我只是个触点而已,把鼠标滑到我身上'trigger':'.first-trigger','align':{'node':'.first-trigger','offset':[0,0],'points':['cr','cc']}}">blue;height:100px;width:100px;">我是一个弹出层组件调用方法'trigger':'.first-trigger','align':{'node':'.first-trigger','offset':[0,0],'points':['cr','cc']}}">--code-->配置参数列表配置参数参数可选值作用说明trigger自定义触点元素,就是鼠标滑过哪个元素的时候弹出当前的popup,支持class和id选择器的写法alignnode,points,offset三个配置node:‘自定义’,//参考元素。popup与参考元素进行定位。和触点写法一样,支持class和id选择器的写法points:[tr,tl],//['tl','tr']表示popup的tl与参考节点的tr对齐,具体tl,tr表示的意义和值看下面截图,t(top),c(center),b(bottom),l(left),r(right)offset:[0,0]//有效值为[n,m],points对齐后,offset值,一般可用于微调,n和m分别表示对齐两个点在x,y坐标之间的偏移量配置项align中的points的说明触点与弹出层的对齐方式(align中的points配置)元素及参考元素上各自的九个不同位置点('tl','tc','tr','cl','cc','cr','bl','bc','br')如下图所示:demo代码,直接复制到自定义内容区里面,保存-预览就可以到效果了哈。大家发挥自己的想象力吧。我只是个触点而已,把鼠标滑到我身上'trigger':'.first-trigger','align':{'node':'.first-trigger','offset':[0,0],'points':['cr','cl']}}">blue;height:100px;width:100px;">我是一个弹出层demo代码,直接复制到自定义内容区里面,保存-预览就可以到效果了哈。大家发挥自己的想象力吧。我只是个触点而已,把鼠标滑到我身上'trigger':'.first-trigger','align':{'node':'.first-trigger','offset':[0,0],'points':['cr','cl']}}">blue;height:100px;width:100px;">我是一个弹出层注意:触点目前只允许包含在#content内。不允许影响页头页尾:关于Kissy淘宝发布开源编辑器:KISSYEditor,和我们在WordPress后台使用的富文本编辑器TinyMCE一样,它可以让我们在线编辑和格式化文本,但是相比TinyMCEKISSYEditor更加轻巧,更加适合国内的网络环境。KISSYEditor是开源项目KISSYUILibrary的一个组件。KISSY目前基于YUI2.x开发,目标是打造一系列小巧灵活、简洁实用、使用起来让人感觉愉悦的UI组件,目前已有CSS基础框架、搜索提示Suggest和KISSYEditor这个富文本编辑器等组件。支持效果目前kissy中开放,能直接调用的效果组件为switchable,其中包括四种widget,tabs(标签页),Slide(卡盘),Carousel(旋转木马),Accordion(手风琴)虽然只有四种效果,但实际上,通过kissy中开放的配置(对应sdk中的data-widget-config),以及不同的dom结构,与css控制,可以展示出各种各样的效果。下面是互联网中,部分电子商务网站首页的一些效果截图附件中会给出,sdk中如何通过淘宝提供的J_TWidget实现其中的效果。Tabs:其中“土豆今日焦点”这个组件中,当缩略图的切换时,上面的内容和左侧的大图同时切换,这个略微特殊一点,用到了两个slide,用一个ks-switchable-nav来控制两个ks-switchable-content的切换。编写心得拿其中一个dom结构为例,kissy中开放效果,只要把握其中这样几点。最外层dom结构:id为demo这个div标签,组件的最外层dom结构。组件中的dom结构:包含在id为demo里面的div结构里面的结构。class=”J_TWidget”:用来表示这个div是一个组件,我们要用kissy来渲染这个组件。data-widget-type="Tabs":这个是用来告诉sdk,我们的widget组件要用什么方式来渲染。data-widget-config=”{….}”:这个是组件的相关配置,也是很灵活的一部分class=”ks-switchable-nav” :这个用来定义当前组件进行轮播的目 展开阅读全文 相关资源 协和医院心内科诊疗常规.doc 2023-2024学年度第一学期三年级数学教学进度表(北师大版).docx 铸造合箱、浇注工艺参考.docx 蛋糕的加工技术.ppt 循环水冷却,浓缩倍数,加药设计计算.xls 关于新“国九条”最新政策及规则解读分析报告-培训课件.pptx 读后续写:Emily with birth problems 文章分析+情节分析+续写段落赏析.pptx 国家中小学智慧教育平台培训专题讲座.pptx Dxdesigner_Introduction.ppt 电气控制及S7-1200PLC应用技术全套教学课件.pptx 猜你喜欢 企业绩效考核总结.docx 生字 辨字 形容词 多音字 修辞手法 全册课前预习册.docx 商务英语900句精选20.docx 科目三内容 文档.docx 人力资源部工作流程图doc.docx 乾隆661副对联欣赏.docx 色彩心理效应.docx 时光荏苒.docx 人教版八年级数学上册热点专题高分特训第11章三角形综合应用一含答案.docx 相关搜索 45 Widget规范 Widget 规范 当前位置:首页 > 求职职场 > 简历
'scrollx',
'easeOutStrong',
'steps':
5,
'viewSize':
[680],
'prevBtnCls':
'prev',
'nextBtnCls':
'next',
'disableBtnCls':
'disable',
延迟加载时间,当前显示图片到切换其他图片动作开始,这中间的停留时间
true/false(默认:
滚动效果
prevBtnCls
上一页的class值
nextBtnCls
下一页的class值
disableBtnCls
按钮不可用的class值
自定义值(默认:
动画时长,一张图片开始切换到另一张图片显示的时间
Accordion-手风琴
需要将菜单中每个标题及其内容分别包含在对应的容器中,最外层容器有唯一的ID来标示组件。
内容AAAAA
标题B
none;">内容BBBBB标题Cnone;">内容CCCCC标题Dnone;">内容DDDDD组件调用方法'triggerType':'click','multiple':true}”>--code-->配置参数列表配置参数参数可选值作用说明triggerCls自定义值主列表的class值panelCls自定义值列表所对应的内容列表的class值triggerTypemouse/click(默认值:click)触发方式——mouse:鼠标经过触发click:鼠标点击触发multipletrue/false(默认值:false)是否同时支持多面板展开hasTriggerstrue/false(默认值:true)是否设置触发点Popup-弹出层实例展示实例一 实例二 所需DOM结构本组件作为一个弹出层的效果,通过预先设置一个隐藏的弹出层,并且设置该弹出层的触点,通过鼠标滑入和移出触点来展示和隐藏弹出层效果我只是个触点而已,把鼠标滑到我身上'trigger':'.first-trigger','align':{'node':'.first-trigger','offset':[0,0],'points':['cr','cc']}}">blue;height:100px;width:100px;">我是一个弹出层组件调用方法'trigger':'.first-trigger','align':{'node':'.first-trigger','offset':[0,0],'points':['cr','cc']}}">--code-->配置参数列表配置参数参数可选值作用说明trigger自定义触点元素,就是鼠标滑过哪个元素的时候弹出当前的popup,支持class和id选择器的写法alignnode,points,offset三个配置node:‘自定义’,//参考元素。popup与参考元素进行定位。和触点写法一样,支持class和id选择器的写法points:[tr,tl],//['tl','tr']表示popup的tl与参考节点的tr对齐,具体tl,tr表示的意义和值看下面截图,t(top),c(center),b(bottom),l(left),r(right)offset:[0,0]//有效值为[n,m],points对齐后,offset值,一般可用于微调,n和m分别表示对齐两个点在x,y坐标之间的偏移量配置项align中的points的说明触点与弹出层的对齐方式(align中的points配置)元素及参考元素上各自的九个不同位置点('tl','tc','tr','cl','cc','cr','bl','bc','br')如下图所示:demo代码,直接复制到自定义内容区里面,保存-预览就可以到效果了哈。大家发挥自己的想象力吧。我只是个触点而已,把鼠标滑到我身上'trigger':'.first-trigger','align':{'node':'.first-trigger','offset':[0,0],'points':['cr','cl']}}">blue;height:100px;width:100px;">我是一个弹出层demo代码,直接复制到自定义内容区里面,保存-预览就可以到效果了哈。大家发挥自己的想象力吧。我只是个触点而已,把鼠标滑到我身上'trigger':'.first-trigger','align':{'node':'.first-trigger','offset':[0,0],'points':['cr','cl']}}">blue;height:100px;width:100px;">我是一个弹出层注意:触点目前只允许包含在#content内。不允许影响页头页尾:关于Kissy淘宝发布开源编辑器:KISSYEditor,和我们在WordPress后台使用的富文本编辑器TinyMCE一样,它可以让我们在线编辑和格式化文本,但是相比TinyMCEKISSYEditor更加轻巧,更加适合国内的网络环境。KISSYEditor是开源项目KISSYUILibrary的一个组件。KISSY目前基于YUI2.x开发,目标是打造一系列小巧灵活、简洁实用、使用起来让人感觉愉悦的UI组件,目前已有CSS基础框架、搜索提示Suggest和KISSYEditor这个富文本编辑器等组件。支持效果目前kissy中开放,能直接调用的效果组件为switchable,其中包括四种widget,tabs(标签页),Slide(卡盘),Carousel(旋转木马),Accordion(手风琴)虽然只有四种效果,但实际上,通过kissy中开放的配置(对应sdk中的data-widget-config),以及不同的dom结构,与css控制,可以展示出各种各样的效果。下面是互联网中,部分电子商务网站首页的一些效果截图附件中会给出,sdk中如何通过淘宝提供的J_TWidget实现其中的效果。Tabs:其中“土豆今日焦点”这个组件中,当缩略图的切换时,上面的内容和左侧的大图同时切换,这个略微特殊一点,用到了两个slide,用一个ks-switchable-nav来控制两个ks-switchable-content的切换。编写心得拿其中一个dom结构为例,kissy中开放效果,只要把握其中这样几点。最外层dom结构:id为demo这个div标签,组件的最外层dom结构。组件中的dom结构:包含在id为demo里面的div结构里面的结构。class=”J_TWidget”:用来表示这个div是一个组件,我们要用kissy来渲染这个组件。data-widget-type="Tabs":这个是用来告诉sdk,我们的widget组件要用什么方式来渲染。data-widget-config=”{….}”:这个是组件的相关配置,也是很灵活的一部分class=”ks-switchable-nav” :这个用来定义当前组件进行轮播的目 展开阅读全文 相关资源 协和医院心内科诊疗常规.doc 2023-2024学年度第一学期三年级数学教学进度表(北师大版).docx 铸造合箱、浇注工艺参考.docx 蛋糕的加工技术.ppt 循环水冷却,浓缩倍数,加药设计计算.xls 关于新“国九条”最新政策及规则解读分析报告-培训课件.pptx 读后续写:Emily with birth problems 文章分析+情节分析+续写段落赏析.pptx 国家中小学智慧教育平台培训专题讲座.pptx Dxdesigner_Introduction.ppt 电气控制及S7-1200PLC应用技术全套教学课件.pptx 猜你喜欢 企业绩效考核总结.docx 生字 辨字 形容词 多音字 修辞手法 全册课前预习册.docx 商务英语900句精选20.docx 科目三内容 文档.docx 人力资源部工作流程图doc.docx 乾隆661副对联欣赏.docx 色彩心理效应.docx 时光荏苒.docx 人教版八年级数学上册热点专题高分特训第11章三角形综合应用一含答案.docx 相关搜索 45 Widget规范 Widget 规范 当前位置:首页 > 求职职场 > 简历
none;">
内容BBBBB
标题C
none;">内容CCCCC标题Dnone;">内容DDDDD组件调用方法'triggerType':'click','multiple':true}”>--code-->配置参数列表配置参数参数可选值作用说明triggerCls自定义值主列表的class值panelCls自定义值列表所对应的内容列表的class值triggerTypemouse/click(默认值:click)触发方式——mouse:鼠标经过触发click:鼠标点击触发multipletrue/false(默认值:false)是否同时支持多面板展开hasTriggerstrue/false(默认值:true)是否设置触发点Popup-弹出层实例展示实例一 实例二 所需DOM结构本组件作为一个弹出层的效果,通过预先设置一个隐藏的弹出层,并且设置该弹出层的触点,通过鼠标滑入和移出触点来展示和隐藏弹出层效果我只是个触点而已,把鼠标滑到我身上'trigger':'.first-trigger','align':{'node':'.first-trigger','offset':[0,0],'points':['cr','cc']}}">blue;height:100px;width:100px;">我是一个弹出层组件调用方法'trigger':'.first-trigger','align':{'node':'.first-trigger','offset':[0,0],'points':['cr','cc']}}">--code-->配置参数列表配置参数参数可选值作用说明trigger自定义触点元素,就是鼠标滑过哪个元素的时候弹出当前的popup,支持class和id选择器的写法alignnode,points,offset三个配置node:‘自定义’,//参考元素。popup与参考元素进行定位。和触点写法一样,支持class和id选择器的写法points:[tr,tl],//['tl','tr']表示popup的tl与参考节点的tr对齐,具体tl,tr表示的意义和值看下面截图,t(top),c(center),b(bottom),l(left),r(right)offset:[0,0]//有效值为[n,m],points对齐后,offset值,一般可用于微调,n和m分别表示对齐两个点在x,y坐标之间的偏移量配置项align中的points的说明触点与弹出层的对齐方式(align中的points配置)元素及参考元素上各自的九个不同位置点('tl','tc','tr','cl','cc','cr','bl','bc','br')如下图所示:demo代码,直接复制到自定义内容区里面,保存-预览就可以到效果了哈。大家发挥自己的想象力吧。我只是个触点而已,把鼠标滑到我身上'trigger':'.first-trigger','align':{'node':'.first-trigger','offset':[0,0],'points':['cr','cl']}}">blue;height:100px;width:100px;">我是一个弹出层demo代码,直接复制到自定义内容区里面,保存-预览就可以到效果了哈。大家发挥自己的想象力吧。我只是个触点而已,把鼠标滑到我身上'trigger':'.first-trigger','align':{'node':'.first-trigger','offset':[0,0],'points':['cr','cl']}}">blue;height:100px;width:100px;">我是一个弹出层注意:触点目前只允许包含在#content内。不允许影响页头页尾:关于Kissy淘宝发布开源编辑器:KISSYEditor,和我们在WordPress后台使用的富文本编辑器TinyMCE一样,它可以让我们在线编辑和格式化文本,但是相比TinyMCEKISSYEditor更加轻巧,更加适合国内的网络环境。KISSYEditor是开源项目KISSYUILibrary的一个组件。KISSY目前基于YUI2.x开发,目标是打造一系列小巧灵活、简洁实用、使用起来让人感觉愉悦的UI组件,目前已有CSS基础框架、搜索提示Suggest和KISSYEditor这个富文本编辑器等组件。支持效果目前kissy中开放,能直接调用的效果组件为switchable,其中包括四种widget,tabs(标签页),Slide(卡盘),Carousel(旋转木马),Accordion(手风琴)虽然只有四种效果,但实际上,通过kissy中开放的配置(对应sdk中的data-widget-config),以及不同的dom结构,与css控制,可以展示出各种各样的效果。下面是互联网中,部分电子商务网站首页的一些效果截图附件中会给出,sdk中如何通过淘宝提供的J_TWidget实现其中的效果。Tabs:其中“土豆今日焦点”这个组件中,当缩略图的切换时,上面的内容和左侧的大图同时切换,这个略微特殊一点,用到了两个slide,用一个ks-switchable-nav来控制两个ks-switchable-content的切换。编写心得拿其中一个dom结构为例,kissy中开放效果,只要把握其中这样几点。最外层dom结构:id为demo这个div标签,组件的最外层dom结构。组件中的dom结构:包含在id为demo里面的div结构里面的结构。class=”J_TWidget”:用来表示这个div是一个组件,我们要用kissy来渲染这个组件。data-widget-type="Tabs":这个是用来告诉sdk,我们的widget组件要用什么方式来渲染。data-widget-config=”{….}”:这个是组件的相关配置,也是很灵活的一部分class=”ks-switchable-nav” :这个用来定义当前组件进行轮播的目 展开阅读全文 相关资源 协和医院心内科诊疗常规.doc 2023-2024学年度第一学期三年级数学教学进度表(北师大版).docx 铸造合箱、浇注工艺参考.docx 蛋糕的加工技术.ppt 循环水冷却,浓缩倍数,加药设计计算.xls 关于新“国九条”最新政策及规则解读分析报告-培训课件.pptx 读后续写:Emily with birth problems 文章分析+情节分析+续写段落赏析.pptx 国家中小学智慧教育平台培训专题讲座.pptx Dxdesigner_Introduction.ppt 电气控制及S7-1200PLC应用技术全套教学课件.pptx 猜你喜欢 企业绩效考核总结.docx 生字 辨字 形容词 多音字 修辞手法 全册课前预习册.docx 商务英语900句精选20.docx 科目三内容 文档.docx 人力资源部工作流程图doc.docx 乾隆661副对联欣赏.docx 色彩心理效应.docx 时光荏苒.docx 人教版八年级数学上册热点专题高分特训第11章三角形综合应用一含答案.docx 相关搜索 45 Widget规范 Widget 规范 当前位置:首页 > 求职职场 > 简历
内容CCCCC
标题D
none;">内容DDDDD组件调用方法'triggerType':'click','multiple':true}”>--code-->配置参数列表配置参数参数可选值作用说明triggerCls自定义值主列表的class值panelCls自定义值列表所对应的内容列表的class值triggerTypemouse/click(默认值:click)触发方式——mouse:鼠标经过触发click:鼠标点击触发multipletrue/false(默认值:false)是否同时支持多面板展开hasTriggerstrue/false(默认值:true)是否设置触发点Popup-弹出层实例展示实例一 实例二 所需DOM结构本组件作为一个弹出层的效果,通过预先设置一个隐藏的弹出层,并且设置该弹出层的触点,通过鼠标滑入和移出触点来展示和隐藏弹出层效果我只是个触点而已,把鼠标滑到我身上'trigger':'.first-trigger','align':{'node':'.first-trigger','offset':[0,0],'points':['cr','cc']}}">blue;height:100px;width:100px;">我是一个弹出层组件调用方法'trigger':'.first-trigger','align':{'node':'.first-trigger','offset':[0,0],'points':['cr','cc']}}">--code-->配置参数列表配置参数参数可选值作用说明trigger自定义触点元素,就是鼠标滑过哪个元素的时候弹出当前的popup,支持class和id选择器的写法alignnode,points,offset三个配置node:‘自定义’,//参考元素。popup与参考元素进行定位。和触点写法一样,支持class和id选择器的写法points:[tr,tl],//['tl','tr']表示popup的tl与参考节点的tr对齐,具体tl,tr表示的意义和值看下面截图,t(top),c(center),b(bottom),l(left),r(right)offset:[0,0]//有效值为[n,m],points对齐后,offset值,一般可用于微调,n和m分别表示对齐两个点在x,y坐标之间的偏移量配置项align中的points的说明触点与弹出层的对齐方式(align中的points配置)元素及参考元素上各自的九个不同位置点('tl','tc','tr','cl','cc','cr','bl','bc','br')如下图所示:demo代码,直接复制到自定义内容区里面,保存-预览就可以到效果了哈。大家发挥自己的想象力吧。我只是个触点而已,把鼠标滑到我身上'trigger':'.first-trigger','align':{'node':'.first-trigger','offset':[0,0],'points':['cr','cl']}}">blue;height:100px;width:100px;">我是一个弹出层demo代码,直接复制到自定义内容区里面,保存-预览就可以到效果了哈。大家发挥自己的想象力吧。我只是个触点而已,把鼠标滑到我身上'trigger':'.first-trigger','align':{'node':'.first-trigger','offset':[0,0],'points':['cr','cl']}}">blue;height:100px;width:100px;">我是一个弹出层注意:触点目前只允许包含在#content内。不允许影响页头页尾:关于Kissy淘宝发布开源编辑器:KISSYEditor,和我们在WordPress后台使用的富文本编辑器TinyMCE一样,它可以让我们在线编辑和格式化文本,但是相比TinyMCEKISSYEditor更加轻巧,更加适合国内的网络环境。KISSYEditor是开源项目KISSYUILibrary的一个组件。KISSY目前基于YUI2.x开发,目标是打造一系列小巧灵活、简洁实用、使用起来让人感觉愉悦的UI组件,目前已有CSS基础框架、搜索提示Suggest和KISSYEditor这个富文本编辑器等组件。支持效果目前kissy中开放,能直接调用的效果组件为switchable,其中包括四种widget,tabs(标签页),Slide(卡盘),Carousel(旋转木马),Accordion(手风琴)虽然只有四种效果,但实际上,通过kissy中开放的配置(对应sdk中的data-widget-config),以及不同的dom结构,与css控制,可以展示出各种各样的效果。下面是互联网中,部分电子商务网站首页的一些效果截图附件中会给出,sdk中如何通过淘宝提供的J_TWidget实现其中的效果。Tabs:其中“土豆今日焦点”这个组件中,当缩略图的切换时,上面的内容和左侧的大图同时切换,这个略微特殊一点,用到了两个slide,用一个ks-switchable-nav来控制两个ks-switchable-content的切换。编写心得拿其中一个dom结构为例,kissy中开放效果,只要把握其中这样几点。最外层dom结构:id为demo这个div标签,组件的最外层dom结构。组件中的dom结构:包含在id为demo里面的div结构里面的结构。class=”J_TWidget”:用来表示这个div是一个组件,我们要用kissy来渲染这个组件。data-widget-type="Tabs":这个是用来告诉sdk,我们的widget组件要用什么方式来渲染。data-widget-config=”{….}”:这个是组件的相关配置,也是很灵活的一部分class=”ks-switchable-nav” :这个用来定义当前组件进行轮播的目 展开阅读全文 相关资源 协和医院心内科诊疗常规.doc 2023-2024学年度第一学期三年级数学教学进度表(北师大版).docx 铸造合箱、浇注工艺参考.docx 蛋糕的加工技术.ppt 循环水冷却,浓缩倍数,加药设计计算.xls 关于新“国九条”最新政策及规则解读分析报告-培训课件.pptx 读后续写:Emily with birth problems 文章分析+情节分析+续写段落赏析.pptx 国家中小学智慧教育平台培训专题讲座.pptx Dxdesigner_Introduction.ppt 电气控制及S7-1200PLC应用技术全套教学课件.pptx 猜你喜欢 企业绩效考核总结.docx 生字 辨字 形容词 多音字 修辞手法 全册课前预习册.docx 商务英语900句精选20.docx 科目三内容 文档.docx 人力资源部工作流程图doc.docx 乾隆661副对联欣赏.docx 色彩心理效应.docx 时光荏苒.docx 人教版八年级数学上册热点专题高分特训第11章三角形综合应用一含答案.docx 相关搜索 45 Widget规范 Widget 规范 当前位置:首页 > 求职职场 > 简历
内容DDDDD
'triggerType':'click','multiple':true}”>--code-->配置参数列表配置参数参数可选值作用说明triggerCls自定义值主列表的class值panelCls自定义值列表所对应的内容列表的class值triggerTypemouse/click(默认值:click)触发方式——mouse:鼠标经过触发click:鼠标点击触发multipletrue/false(默认值:false)是否同时支持多面板展开hasTriggerstrue/false(默认值:true)是否设置触发点Popup-弹出层实例展示实例一 实例二 所需DOM结构本组件作为一个弹出层的效果,通过预先设置一个隐藏的弹出层,并且设置该弹出层的触点,通过鼠标滑入和移出触点来展示和隐藏弹出层效果我只是个触点而已,把鼠标滑到我身上'trigger':'.first-trigger','align':{'node':'.first-trigger','offset':[0,0],'points':['cr','cc']}}">blue;height:100px;width:100px;">我是一个弹出层组件调用方法'trigger':'.first-trigger','align':{'node':'.first-trigger','offset':[0,0],'points':['cr','cc']}}">--code-->配置参数列表配置参数参数可选值作用说明trigger自定义触点元素,就是鼠标滑过哪个元素的时候弹出当前的popup,支持class和id选择器的写法alignnode,points,offset三个配置node:‘自定义’,//参考元素。popup与参考元素进行定位。和触点写法一样,支持class和id选择器的写法points:[tr,tl],//['tl','tr']表示popup的tl与参考节点的tr对齐,具体tl,tr表示的意义和值看下面截图,t(top),c(center),b(bottom),l(left),r(right)offset:[0,0]//有效值为[n,m],points对齐后,offset值,一般可用于微调,n和m分别表示对齐两个点在x,y坐标之间的偏移量配置项align中的points的说明触点与弹出层的对齐方式(align中的points配置)元素及参考元素上各自的九个不同位置点('tl','tc','tr','cl','cc','cr','bl','bc','br')如下图所示:demo代码,直接复制到自定义内容区里面,保存-预览就可以到效果了哈。大家发挥自己的想象力吧。我只是个触点而已,把鼠标滑到我身上'trigger':'.first-trigger','align':{'node':'.first-trigger','offset':[0,0],'points':['cr','cl']}}">blue;height:100px;width:100px;">我是一个弹出层demo代码,直接复制到自定义内容区里面,保存-预览就可以到效果了哈。大家发挥自己的想象力吧。我只是个触点而已,把鼠标滑到我身上'trigger':'.first-trigger','align':{'node':'.first-trigger','offset':[0,0],'points':['cr','cl']}}">blue;height:100px;width:100px;">我是一个弹出层注意:触点目前只允许包含在#content内。不允许影响页头页尾:关于Kissy淘宝发布开源编辑器:KISSYEditor,和我们在WordPress后台使用的富文本编辑器TinyMCE一样,它可以让我们在线编辑和格式化文本,但是相比TinyMCEKISSYEditor更加轻巧,更加适合国内的网络环境。KISSYEditor是开源项目KISSYUILibrary的一个组件。KISSY目前基于YUI2.x开发,目标是打造一系列小巧灵活、简洁实用、使用起来让人感觉愉悦的UI组件,目前已有CSS基础框架、搜索提示Suggest和KISSYEditor这个富文本编辑器等组件。支持效果目前kissy中开放,能直接调用的效果组件为switchable,其中包括四种widget,tabs(标签页),Slide(卡盘),Carousel(旋转木马),Accordion(手风琴)虽然只有四种效果,但实际上,通过kissy中开放的配置(对应sdk中的data-widget-config),以及不同的dom结构,与css控制,可以展示出各种各样的效果。下面是互联网中,部分电子商务网站首页的一些效果截图附件中会给出,sdk中如何通过淘宝提供的J_TWidget实现其中的效果。Tabs:其中“土豆今日焦点”这个组件中,当缩略图的切换时,上面的内容和左侧的大图同时切换,这个略微特殊一点,用到了两个slide,用一个ks-switchable-nav来控制两个ks-switchable-content的切换。编写心得拿其中一个dom结构为例,kissy中开放效果,只要把握其中这样几点。最外层dom结构:id为demo这个div标签,组件的最外层dom结构。组件中的dom结构:包含在id为demo里面的div结构里面的结构。class=”J_TWidget”:用来表示这个div是一个组件,我们要用kissy来渲染这个组件。data-widget-type="Tabs":这个是用来告诉sdk,我们的widget组件要用什么方式来渲染。data-widget-config=”{….}”:这个是组件的相关配置,也是很灵活的一部分class=”ks-switchable-nav” :这个用来定义当前组件进行轮播的目 展开阅读全文 相关资源 协和医院心内科诊疗常规.doc 2023-2024学年度第一学期三年级数学教学进度表(北师大版).docx 铸造合箱、浇注工艺参考.docx 蛋糕的加工技术.ppt 循环水冷却,浓缩倍数,加药设计计算.xls 关于新“国九条”最新政策及规则解读分析报告-培训课件.pptx 读后续写:Emily with birth problems 文章分析+情节分析+续写段落赏析.pptx 国家中小学智慧教育平台培训专题讲座.pptx Dxdesigner_Introduction.ppt 电气控制及S7-1200PLC应用技术全套教学课件.pptx 猜你喜欢 企业绩效考核总结.docx 生字 辨字 形容词 多音字 修辞手法 全册课前预习册.docx 商务英语900句精选20.docx 科目三内容 文档.docx 人力资源部工作流程图doc.docx 乾隆661副对联欣赏.docx 色彩心理效应.docx 时光荏苒.docx 人教版八年级数学上册热点专题高分特训第11章三角形综合应用一含答案.docx 相关搜索 45 Widget规范 Widget 规范 当前位置:首页 > 求职职场 > 简历
'triggerType':
'click',
'multiple':
triggerCls
主列表的class值
panelCls
列表所对应的内容列表的class值
mouse/click(默认值:
click)
multiple
是否同时支持多面板展开
Popup-弹出层
本组件作为一个弹出层的效果,通过预先设置一个隐藏的弹出层,并且设置该弹出层的触点,通过鼠标滑入和移出触点来展示和隐藏弹出层效果
我只是个触点而已,把鼠标滑到我身上
'trigger':'.first-trigger','align':{'node':'.first-trigger','offset':[0,0],'points':['cr','cc']}}">blue;height:100px;width:100px;">我是一个弹出层组件调用方法'trigger':'.first-trigger','align':{'node':'.first-trigger','offset':[0,0],'points':['cr','cc']}}">--code-->配置参数列表配置参数参数可选值作用说明trigger自定义触点元素,就是鼠标滑过哪个元素的时候弹出当前的popup,支持class和id选择器的写法alignnode,points,offset三个配置node:‘自定义’,//参考元素。popup与参考元素进行定位。和触点写法一样,支持class和id选择器的写法points:[tr,tl],//['tl','tr']表示popup的tl与参考节点的tr对齐,具体tl,tr表示的意义和值看下面截图,t(top),c(center),b(bottom),l(left),r(right)offset:[0,0]//有效值为[n,m],points对齐后,offset值,一般可用于微调,n和m分别表示对齐两个点在x,y坐标之间的偏移量配置项align中的points的说明触点与弹出层的对齐方式(align中的points配置)元素及参考元素上各自的九个不同位置点('tl','tc','tr','cl','cc','cr','bl','bc','br')如下图所示:demo代码,直接复制到自定义内容区里面,保存-预览就可以到效果了哈。大家发挥自己的想象力吧。我只是个触点而已,把鼠标滑到我身上'trigger':'.first-trigger','align':{'node':'.first-trigger','offset':[0,0],'points':['cr','cl']}}">blue;height:100px;width:100px;">我是一个弹出层demo代码,直接复制到自定义内容区里面,保存-预览就可以到效果了哈。大家发挥自己的想象力吧。我只是个触点而已,把鼠标滑到我身上'trigger':'.first-trigger','align':{'node':'.first-trigger','offset':[0,0],'points':['cr','cl']}}">blue;height:100px;width:100px;">我是一个弹出层注意:触点目前只允许包含在#content内。不允许影响页头页尾:关于Kissy淘宝发布开源编辑器:KISSYEditor,和我们在WordPress后台使用的富文本编辑器TinyMCE一样,它可以让我们在线编辑和格式化文本,但是相比TinyMCEKISSYEditor更加轻巧,更加适合国内的网络环境。KISSYEditor是开源项目KISSYUILibrary的一个组件。KISSY目前基于YUI2.x开发,目标是打造一系列小巧灵活、简洁实用、使用起来让人感觉愉悦的UI组件,目前已有CSS基础框架、搜索提示Suggest和KISSYEditor这个富文本编辑器等组件。支持效果目前kissy中开放,能直接调用的效果组件为switchable,其中包括四种widget,tabs(标签页),Slide(卡盘),Carousel(旋转木马),Accordion(手风琴)虽然只有四种效果,但实际上,通过kissy中开放的配置(对应sdk中的data-widget-config),以及不同的dom结构,与css控制,可以展示出各种各样的效果。下面是互联网中,部分电子商务网站首页的一些效果截图附件中会给出,sdk中如何通过淘宝提供的J_TWidget实现其中的效果。Tabs:其中“土豆今日焦点”这个组件中,当缩略图的切换时,上面的内容和左侧的大图同时切换,这个略微特殊一点,用到了两个slide,用一个ks-switchable-nav来控制两个ks-switchable-content的切换。编写心得拿其中一个dom结构为例,kissy中开放效果,只要把握其中这样几点。最外层dom结构:id为demo这个div标签,组件的最外层dom结构。组件中的dom结构:包含在id为demo里面的div结构里面的结构。class=”J_TWidget”:用来表示这个div是一个组件,我们要用kissy来渲染这个组件。data-widget-type="Tabs":这个是用来告诉sdk,我们的widget组件要用什么方式来渲染。data-widget-config=”{….}”:这个是组件的相关配置,也是很灵活的一部分class=”ks-switchable-nav” :这个用来定义当前组件进行轮播的目 展开阅读全文 相关资源 协和医院心内科诊疗常规.doc 2023-2024学年度第一学期三年级数学教学进度表(北师大版).docx 铸造合箱、浇注工艺参考.docx 蛋糕的加工技术.ppt 循环水冷却,浓缩倍数,加药设计计算.xls 关于新“国九条”最新政策及规则解读分析报告-培训课件.pptx 读后续写:Emily with birth problems 文章分析+情节分析+续写段落赏析.pptx 国家中小学智慧教育平台培训专题讲座.pptx Dxdesigner_Introduction.ppt 电气控制及S7-1200PLC应用技术全套教学课件.pptx 猜你喜欢 企业绩效考核总结.docx 生字 辨字 形容词 多音字 修辞手法 全册课前预习册.docx 商务英语900句精选20.docx 科目三内容 文档.docx 人力资源部工作流程图doc.docx 乾隆661副对联欣赏.docx 色彩心理效应.docx 时光荏苒.docx 人教版八年级数学上册热点专题高分特训第11章三角形综合应用一含答案.docx 相关搜索 45 Widget规范 Widget 规范 当前位置:首页 > 求职职场 > 简历
'trigger':
'.first-trigger',
'align':
{
'node':
'offset':
[0,0],
'points':
['cr','cc']
}
}">
blue;height:100px;width:100px;">我是一个弹出层组件调用方法'trigger':'.first-trigger','align':{'node':'.first-trigger','offset':[0,0],'points':['cr','cc']}}">--code-->配置参数列表配置参数参数可选值作用说明trigger自定义触点元素,就是鼠标滑过哪个元素的时候弹出当前的popup,支持class和id选择器的写法alignnode,points,offset三个配置node:‘自定义’,//参考元素。popup与参考元素进行定位。和触点写法一样,支持class和id选择器的写法points:[tr,tl],//['tl','tr']表示popup的tl与参考节点的tr对齐,具体tl,tr表示的意义和值看下面截图,t(top),c(center),b(bottom),l(left),r(right)offset:[0,0]//有效值为[n,m],points对齐后,offset值,一般可用于微调,n和m分别表示对齐两个点在x,y坐标之间的偏移量配置项align中的points的说明触点与弹出层的对齐方式(align中的points配置)元素及参考元素上各自的九个不同位置点('tl','tc','tr','cl','cc','cr','bl','bc','br')如下图所示:demo代码,直接复制到自定义内容区里面,保存-预览就可以到效果了哈。大家发挥自己的想象力吧。我只是个触点而已,把鼠标滑到我身上'trigger':'.first-trigger','align':{'node':'.first-trigger','offset':[0,0],'points':['cr','cl']}}">blue;height:100px;width:100px;">我是一个弹出层demo代码,直接复制到自定义内容区里面,保存-预览就可以到效果了哈。大家发挥自己的想象力吧。我只是个触点而已,把鼠标滑到我身上'trigger':'.first-trigger','align':{'node':'.first-trigger','offset':[0,0],'points':['cr','cl']}}">blue;height:100px;width:100px;">我是一个弹出层注意:触点目前只允许包含在#content内。不允许影响页头页尾:关于Kissy淘宝发布开源编辑器:KISSYEditor,和我们在WordPress后台使用的富文本编辑器TinyMCE一样,它可以让我们在线编辑和格式化文本,但是相比TinyMCEKISSYEditor更加轻巧,更加适合国内的网络环境。KISSYEditor是开源项目KISSYUILibrary的一个组件。KISSY目前基于YUI2.x开发,目标是打造一系列小巧灵活、简洁实用、使用起来让人感觉愉悦的UI组件,目前已有CSS基础框架、搜索提示Suggest和KISSYEditor这个富文本编辑器等组件。支持效果目前kissy中开放,能直接调用的效果组件为switchable,其中包括四种widget,tabs(标签页),Slide(卡盘),Carousel(旋转木马),Accordion(手风琴)虽然只有四种效果,但实际上,通过kissy中开放的配置(对应sdk中的data-widget-config),以及不同的dom结构,与css控制,可以展示出各种各样的效果。下面是互联网中,部分电子商务网站首页的一些效果截图附件中会给出,sdk中如何通过淘宝提供的J_TWidget实现其中的效果。Tabs:其中“土豆今日焦点”这个组件中,当缩略图的切换时,上面的内容和左侧的大图同时切换,这个略微特殊一点,用到了两个slide,用一个ks-switchable-nav来控制两个ks-switchable-content的切换。编写心得拿其中一个dom结构为例,kissy中开放效果,只要把握其中这样几点。最外层dom结构:id为demo这个div标签,组件的最外层dom结构。组件中的dom结构:包含在id为demo里面的div结构里面的结构。class=”J_TWidget”:用来表示这个div是一个组件,我们要用kissy来渲染这个组件。data-widget-type="Tabs":这个是用来告诉sdk,我们的widget组件要用什么方式来渲染。data-widget-config=”{….}”:这个是组件的相关配置,也是很灵活的一部分class=”ks-switchable-nav” :这个用来定义当前组件进行轮播的目 展开阅读全文 相关资源 协和医院心内科诊疗常规.doc 2023-2024学年度第一学期三年级数学教学进度表(北师大版).docx 铸造合箱、浇注工艺参考.docx 蛋糕的加工技术.ppt 循环水冷却,浓缩倍数,加药设计计算.xls 关于新“国九条”最新政策及规则解读分析报告-培训课件.pptx 读后续写:Emily with birth problems 文章分析+情节分析+续写段落赏析.pptx 国家中小学智慧教育平台培训专题讲座.pptx Dxdesigner_Introduction.ppt 电气控制及S7-1200PLC应用技术全套教学课件.pptx 猜你喜欢 企业绩效考核总结.docx 生字 辨字 形容词 多音字 修辞手法 全册课前预习册.docx 商务英语900句精选20.docx 科目三内容 文档.docx 人力资源部工作流程图doc.docx 乾隆661副对联欣赏.docx 色彩心理效应.docx 时光荏苒.docx 人教版八年级数学上册热点专题高分特训第11章三角形综合应用一含答案.docx 相关搜索 45 Widget规范 Widget 规范 当前位置:首页 > 求职职场 > 简历
blue;height:
100px;width:
100px;">
我是一个弹出层
'trigger':'.first-trigger','align':{'node':'.first-trigger','offset':[0,0],'points':['cr','cc']}}">--code-->配置参数列表配置参数参数可选值作用说明trigger自定义触点元素,就是鼠标滑过哪个元素的时候弹出当前的popup,支持class和id选择器的写法alignnode,points,offset三个配置node:‘自定义’,//参考元素。popup与参考元素进行定位。和触点写法一样,支持class和id选择器的写法points:[tr,tl],//['tl','tr']表示popup的tl与参考节点的tr对齐,具体tl,tr表示的意义和值看下面截图,t(top),c(center),b(bottom),l(left),r(right)offset:[0,0]//有效值为[n,m],points对齐后,offset值,一般可用于微调,n和m分别表示对齐两个点在x,y坐标之间的偏移量配置项align中的points的说明触点与弹出层的对齐方式(align中的points配置)元素及参考元素上各自的九个不同位置点('tl','tc','tr','cl','cc','cr','bl','bc','br')如下图所示:demo代码,直接复制到自定义内容区里面,保存-预览就可以到效果了哈。大家发挥自己的想象力吧。我只是个触点而已,把鼠标滑到我身上'trigger':'.first-trigger','align':{'node':'.first-trigger','offset':[0,0],'points':['cr','cl']}}">blue;height:100px;width:100px;">我是一个弹出层demo代码,直接复制到自定义内容区里面,保存-预览就可以到效果了哈。大家发挥自己的想象力吧。我只是个触点而已,把鼠标滑到我身上'trigger':'.first-trigger','align':{'node':'.first-trigger','offset':[0,0],'points':['cr','cl']}}">blue;height:100px;width:100px;">我是一个弹出层注意:触点目前只允许包含在#content内。不允许影响页头页尾:关于Kissy淘宝发布开源编辑器:KISSYEditor,和我们在WordPress后台使用的富文本编辑器TinyMCE一样,它可以让我们在线编辑和格式化文本,但是相比TinyMCEKISSYEditor更加轻巧,更加适合国内的网络环境。KISSYEditor是开源项目KISSYUILibrary的一个组件。KISSY目前基于YUI2.x开发,目标是打造一系列小巧灵活、简洁实用、使用起来让人感觉愉悦的UI组件,目前已有CSS基础框架、搜索提示Suggest和KISSYEditor这个富文本编辑器等组件。支持效果目前kissy中开放,能直接调用的效果组件为switchable,其中包括四种widget,tabs(标签页),Slide(卡盘),Carousel(旋转木马),Accordion(手风琴)虽然只有四种效果,但实际上,通过kissy中开放的配置(对应sdk中的data-widget-config),以及不同的dom结构,与css控制,可以展示出各种各样的效果。下面是互联网中,部分电子商务网站首页的一些效果截图附件中会给出,sdk中如何通过淘宝提供的J_TWidget实现其中的效果。Tabs:其中“土豆今日焦点”这个组件中,当缩略图的切换时,上面的内容和左侧的大图同时切换,这个略微特殊一点,用到了两个slide,用一个ks-switchable-nav来控制两个ks-switchable-content的切换。编写心得拿其中一个dom结构为例,kissy中开放效果,只要把握其中这样几点。最外层dom结构:id为demo这个div标签,组件的最外层dom结构。组件中的dom结构:包含在id为demo里面的div结构里面的结构。class=”J_TWidget”:用来表示这个div是一个组件,我们要用kissy来渲染这个组件。data-widget-type="Tabs":这个是用来告诉sdk,我们的widget组件要用什么方式来渲染。data-widget-config=”{….}”:这个是组件的相关配置,也是很灵活的一部分class=”ks-switchable-nav” :这个用来定义当前组件进行轮播的目 展开阅读全文 相关资源 协和医院心内科诊疗常规.doc 2023-2024学年度第一学期三年级数学教学进度表(北师大版).docx 铸造合箱、浇注工艺参考.docx 蛋糕的加工技术.ppt 循环水冷却,浓缩倍数,加药设计计算.xls 关于新“国九条”最新政策及规则解读分析报告-培训课件.pptx 读后续写:Emily with birth problems 文章分析+情节分析+续写段落赏析.pptx 国家中小学智慧教育平台培训专题讲座.pptx Dxdesigner_Introduction.ppt 电气控制及S7-1200PLC应用技术全套教学课件.pptx 猜你喜欢 企业绩效考核总结.docx 生字 辨字 形容词 多音字 修辞手法 全册课前预习册.docx 商务英语900句精选20.docx 科目三内容 文档.docx 人力资源部工作流程图doc.docx 乾隆661副对联欣赏.docx 色彩心理效应.docx 时光荏苒.docx 人教版八年级数学上册热点专题高分特训第11章三角形综合应用一含答案.docx 相关搜索 45 Widget规范 Widget 规范 当前位置:首页 > 求职职场 > 简历
trigger
自定义
触点元素,就是鼠标滑过哪个元素的时候弹出当前的popup,支持class和id选择器的写法
align
node,points,offset三个配置
node:
‘自定义’,//参考元素。
popup与参考元素进行定位。
和触点写法一样,支持class和id选择器
的写法
points:
[tr,tl],//['tl','tr']表示popup的tl与参考节点的tr对齐,
具体tl,tr表示的意义和值看下面截图,t(top),c(center),b(bottom),l(left),r(right)
offset:
[0,0]//有效值为[n,m],points对齐后,offset值,一般可用于微调,n和m分别表示对齐两个
点在x,y坐标之间的偏移量
配置项align中的points的说明
触点与弹出层的对齐方式(align中的points配置)元素及参考元素上各自的九个不同位置点('tl','tc','tr','cl','cc','cr','bl','bc','br')如下图所示:
demo代码,直接复制到自定义内容区里面,保存-预览就可以到效果了哈。
大家发挥自己的想象力吧。
'trigger':'.first-trigger','align':{'node':'.first-trigger','offset':[0,0],'points':['cr','cl']}}">blue;height:100px;width:100px;">我是一个弹出层demo代码,直接复制到自定义内容区里面,保存-预览就可以到效果了哈。大家发挥自己的想象力吧。我只是个触点而已,把鼠标滑到我身上'trigger':'.first-trigger','align':{'node':'.first-trigger','offset':[0,0],'points':['cr','cl']}}">blue;height:100px;width:100px;">我是一个弹出层注意:触点目前只允许包含在#content内。不允许影响页头页尾:关于Kissy淘宝发布开源编辑器:KISSYEditor,和我们在WordPress后台使用的富文本编辑器TinyMCE一样,它可以让我们在线编辑和格式化文本,但是相比TinyMCEKISSYEditor更加轻巧,更加适合国内的网络环境。KISSYEditor是开源项目KISSYUILibrary的一个组件。KISSY目前基于YUI2.x开发,目标是打造一系列小巧灵活、简洁实用、使用起来让人感觉愉悦的UI组件,目前已有CSS基础框架、搜索提示Suggest和KISSYEditor这个富文本编辑器等组件。支持效果目前kissy中开放,能直接调用的效果组件为switchable,其中包括四种widget,tabs(标签页),Slide(卡盘),Carousel(旋转木马),Accordion(手风琴)虽然只有四种效果,但实际上,通过kissy中开放的配置(对应sdk中的data-widget-config),以及不同的dom结构,与css控制,可以展示出各种各样的效果。下面是互联网中,部分电子商务网站首页的一些效果截图附件中会给出,sdk中如何通过淘宝提供的J_TWidget实现其中的效果。Tabs:其中“土豆今日焦点”这个组件中,当缩略图的切换时,上面的内容和左侧的大图同时切换,这个略微特殊一点,用到了两个slide,用一个ks-switchable-nav来控制两个ks-switchable-content的切换。编写心得拿其中一个dom结构为例,kissy中开放效果,只要把握其中这样几点。最外层dom结构:id为demo这个div标签,组件的最外层dom结构。组件中的dom结构:包含在id为demo里面的div结构里面的结构。class=”J_TWidget”:用来表示这个div是一个组件,我们要用kissy来渲染这个组件。data-widget-type="Tabs":这个是用来告诉sdk,我们的widget组件要用什么方式来渲染。data-widget-config=”{….}”:这个是组件的相关配置,也是很灵活的一部分class=”ks-switchable-nav” :这个用来定义当前组件进行轮播的目 展开阅读全文 相关资源 协和医院心内科诊疗常规.doc 2023-2024学年度第一学期三年级数学教学进度表(北师大版).docx 铸造合箱、浇注工艺参考.docx 蛋糕的加工技术.ppt 循环水冷却,浓缩倍数,加药设计计算.xls 关于新“国九条”最新政策及规则解读分析报告-培训课件.pptx 读后续写:Emily with birth problems 文章分析+情节分析+续写段落赏析.pptx 国家中小学智慧教育平台培训专题讲座.pptx Dxdesigner_Introduction.ppt 电气控制及S7-1200PLC应用技术全套教学课件.pptx 猜你喜欢 企业绩效考核总结.docx 生字 辨字 形容词 多音字 修辞手法 全册课前预习册.docx 商务英语900句精选20.docx 科目三内容 文档.docx 人力资源部工作流程图doc.docx 乾隆661副对联欣赏.docx 色彩心理效应.docx 时光荏苒.docx 人教版八年级数学上册热点专题高分特训第11章三角形综合应用一含答案.docx 相关搜索 45 Widget规范 Widget 规范 当前位置:首页 > 求职职场 > 简历
['cr','cl']
blue;height:100px;width:100px;">我是一个弹出层demo代码,直接复制到自定义内容区里面,保存-预览就可以到效果了哈。大家发挥自己的想象力吧。我只是个触点而已,把鼠标滑到我身上'trigger':'.first-trigger','align':{'node':'.first-trigger','offset':[0,0],'points':['cr','cl']}}">blue;height:100px;width:100px;">我是一个弹出层注意:触点目前只允许包含在#content内。不允许影响页头页尾:关于Kissy淘宝发布开源编辑器:KISSYEditor,和我们在WordPress后台使用的富文本编辑器TinyMCE一样,它可以让我们在线编辑和格式化文本,但是相比TinyMCEKISSYEditor更加轻巧,更加适合国内的网络环境。KISSYEditor是开源项目KISSYUILibrary的一个组件。KISSY目前基于YUI2.x开发,目标是打造一系列小巧灵活、简洁实用、使用起来让人感觉愉悦的UI组件,目前已有CSS基础框架、搜索提示Suggest和KISSYEditor这个富文本编辑器等组件。支持效果目前kissy中开放,能直接调用的效果组件为switchable,其中包括四种widget,tabs(标签页),Slide(卡盘),Carousel(旋转木马),Accordion(手风琴)虽然只有四种效果,但实际上,通过kissy中开放的配置(对应sdk中的data-widget-config),以及不同的dom结构,与css控制,可以展示出各种各样的效果。下面是互联网中,部分电子商务网站首页的一些效果截图附件中会给出,sdk中如何通过淘宝提供的J_TWidget实现其中的效果。Tabs:其中“土豆今日焦点”这个组件中,当缩略图的切换时,上面的内容和左侧的大图同时切换,这个略微特殊一点,用到了两个slide,用一个ks-switchable-nav来控制两个ks-switchable-content的切换。编写心得拿其中一个dom结构为例,kissy中开放效果,只要把握其中这样几点。最外层dom结构:id为demo这个div标签,组件的最外层dom结构。组件中的dom结构:包含在id为demo里面的div结构里面的结构。class=”J_TWidget”:用来表示这个div是一个组件,我们要用kissy来渲染这个组件。data-widget-type="Tabs":这个是用来告诉sdk,我们的widget组件要用什么方式来渲染。data-widget-config=”{….}”:这个是组件的相关配置,也是很灵活的一部分class=”ks-switchable-nav” :这个用来定义当前组件进行轮播的目 展开阅读全文 相关资源 协和医院心内科诊疗常规.doc 2023-2024学年度第一学期三年级数学教学进度表(北师大版).docx 铸造合箱、浇注工艺参考.docx 蛋糕的加工技术.ppt 循环水冷却,浓缩倍数,加药设计计算.xls 关于新“国九条”最新政策及规则解读分析报告-培训课件.pptx 读后续写:Emily with birth problems 文章分析+情节分析+续写段落赏析.pptx 国家中小学智慧教育平台培训专题讲座.pptx Dxdesigner_Introduction.ppt 电气控制及S7-1200PLC应用技术全套教学课件.pptx 猜你喜欢 企业绩效考核总结.docx 生字 辨字 形容词 多音字 修辞手法 全册课前预习册.docx 商务英语900句精选20.docx 科目三内容 文档.docx 人力资源部工作流程图doc.docx 乾隆661副对联欣赏.docx 色彩心理效应.docx 时光荏苒.docx 人教版八年级数学上册热点专题高分特训第11章三角形综合应用一含答案.docx 相关搜索 45 Widget规范 Widget 规范 当前位置:首页 > 求职职场 > 简历
'trigger':'.first-trigger','align':{'node':'.first-trigger','offset':[0,0],'points':['cr','cl']}}">blue;height:100px;width:100px;">我是一个弹出层注意:触点目前只允许包含在#content内。不允许影响页头页尾:关于Kissy淘宝发布开源编辑器:KISSYEditor,和我们在WordPress后台使用的富文本编辑器TinyMCE一样,它可以让我们在线编辑和格式化文本,但是相比TinyMCEKISSYEditor更加轻巧,更加适合国内的网络环境。KISSYEditor是开源项目KISSYUILibrary的一个组件。KISSY目前基于YUI2.x开发,目标是打造一系列小巧灵活、简洁实用、使用起来让人感觉愉悦的UI组件,目前已有CSS基础框架、搜索提示Suggest和KISSYEditor这个富文本编辑器等组件。支持效果目前kissy中开放,能直接调用的效果组件为switchable,其中包括四种widget,tabs(标签页),Slide(卡盘),Carousel(旋转木马),Accordion(手风琴)虽然只有四种效果,但实际上,通过kissy中开放的配置(对应sdk中的data-widget-config),以及不同的dom结构,与css控制,可以展示出各种各样的效果。下面是互联网中,部分电子商务网站首页的一些效果截图附件中会给出,sdk中如何通过淘宝提供的J_TWidget实现其中的效果。Tabs:其中“土豆今日焦点”这个组件中,当缩略图的切换时,上面的内容和左侧的大图同时切换,这个略微特殊一点,用到了两个slide,用一个ks-switchable-nav来控制两个ks-switchable-content的切换。编写心得拿其中一个dom结构为例,kissy中开放效果,只要把握其中这样几点。最外层dom结构:id为demo这个div标签,组件的最外层dom结构。组件中的dom结构:包含在id为demo里面的div结构里面的结构。class=”J_TWidget”:用来表示这个div是一个组件,我们要用kissy来渲染这个组件。data-widget-type="Tabs":这个是用来告诉sdk,我们的widget组件要用什么方式来渲染。data-widget-config=”{….}”:这个是组件的相关配置,也是很灵活的一部分class=”ks-switchable-nav” :这个用来定义当前组件进行轮播的目 展开阅读全文 相关资源 协和医院心内科诊疗常规.doc 2023-2024学年度第一学期三年级数学教学进度表(北师大版).docx 铸造合箱、浇注工艺参考.docx 蛋糕的加工技术.ppt 循环水冷却,浓缩倍数,加药设计计算.xls 关于新“国九条”最新政策及规则解读分析报告-培训课件.pptx 读后续写:Emily with birth problems 文章分析+情节分析+续写段落赏析.pptx 国家中小学智慧教育平台培训专题讲座.pptx Dxdesigner_Introduction.ppt 电气控制及S7-1200PLC应用技术全套教学课件.pptx 猜你喜欢 企业绩效考核总结.docx 生字 辨字 形容词 多音字 修辞手法 全册课前预习册.docx 商务英语900句精选20.docx 科目三内容 文档.docx 人力资源部工作流程图doc.docx 乾隆661副对联欣赏.docx 色彩心理效应.docx 时光荏苒.docx 人教版八年级数学上册热点专题高分特训第11章三角形综合应用一含答案.docx 相关搜索 45 Widget规范 Widget 规范 当前位置:首页 > 求职职场 > 简历
blue;height:100px;width:100px;">我是一个弹出层注意:触点目前只允许包含在#content内。不允许影响页头页尾:关于Kissy淘宝发布开源编辑器:KISSYEditor,和我们在WordPress后台使用的富文本编辑器TinyMCE一样,它可以让我们在线编辑和格式化文本,但是相比TinyMCEKISSYEditor更加轻巧,更加适合国内的网络环境。KISSYEditor是开源项目KISSYUILibrary的一个组件。KISSY目前基于YUI2.x开发,目标是打造一系列小巧灵活、简洁实用、使用起来让人感觉愉悦的UI组件,目前已有CSS基础框架、搜索提示Suggest和KISSYEditor这个富文本编辑器等组件。支持效果目前kissy中开放,能直接调用的效果组件为switchable,其中包括四种widget,tabs(标签页),Slide(卡盘),Carousel(旋转木马),Accordion(手风琴)虽然只有四种效果,但实际上,通过kissy中开放的配置(对应sdk中的data-widget-config),以及不同的dom结构,与css控制,可以展示出各种各样的效果。下面是互联网中,部分电子商务网站首页的一些效果截图附件中会给出,sdk中如何通过淘宝提供的J_TWidget实现其中的效果。Tabs:其中“土豆今日焦点”这个组件中,当缩略图的切换时,上面的内容和左侧的大图同时切换,这个略微特殊一点,用到了两个slide,用一个ks-switchable-nav来控制两个ks-switchable-content的切换。编写心得拿其中一个dom结构为例,kissy中开放效果,只要把握其中这样几点。最外层dom结构:id为demo这个div标签,组件的最外层dom结构。组件中的dom结构:包含在id为demo里面的div结构里面的结构。class=”J_TWidget”:用来表示这个div是一个组件,我们要用kissy来渲染这个组件。data-widget-type="Tabs":这个是用来告诉sdk,我们的widget组件要用什么方式来渲染。data-widget-config=”{….}”:这个是组件的相关配置,也是很灵活的一部分class=”ks-switchable-nav” :这个用来定义当前组件进行轮播的目 展开阅读全文 相关资源 协和医院心内科诊疗常规.doc 2023-2024学年度第一学期三年级数学教学进度表(北师大版).docx 铸造合箱、浇注工艺参考.docx 蛋糕的加工技术.ppt 循环水冷却,浓缩倍数,加药设计计算.xls 关于新“国九条”最新政策及规则解读分析报告-培训课件.pptx 读后续写:Emily with birth problems 文章分析+情节分析+续写段落赏析.pptx 国家中小学智慧教育平台培训专题讲座.pptx Dxdesigner_Introduction.ppt 电气控制及S7-1200PLC应用技术全套教学课件.pptx 猜你喜欢 企业绩效考核总结.docx 生字 辨字 形容词 多音字 修辞手法 全册课前预习册.docx 商务英语900句精选20.docx 科目三内容 文档.docx 人力资源部工作流程图doc.docx 乾隆661副对联欣赏.docx 色彩心理效应.docx 时光荏苒.docx 人教版八年级数学上册热点专题高分特训第11章三角形综合应用一含答案.docx 相关搜索 45 Widget规范 Widget 规范 当前位置:首页 > 求职职场 > 简历
注意:
触点目前只允许包含在#content内。
不允许影响页头页尾:
关于Kissy
淘宝发布开源编辑器:
KISSYEditor,和我们在WordPress后台使用的富文本编辑器TinyMCE一样,它可以让我们在线编辑和格式化文本,但是相比TinyMCEKISSYEditor更加轻巧,更加适合国内的网络环境。
KISSYEditor是开源项目KISSYUILibrary的一个组件。
KISSY目前基于YUI2.x开发,目标是打造一系列小巧灵活、简洁实用、使用起来让人感觉愉悦的UI组件,目前已有CSS基础框架、搜索提示Suggest和KISSYEditor这个富文本编辑器等组件。
支持效果
目前kissy中开放,能直接调用的效果组件为switchable,其中包括四种widget,tabs(标签页),Slide(卡盘),Carousel(旋转木马),Accordion(手风琴)虽然只有四种效果,但实际上,通过kissy中开放的配置(对应sdk中的data-widget-config),以及不同的dom结构,与css控制,可以展示出各种各样的效果。
下面是互联网中,部分电子商务网站首页的一些效果截图附件中会给出,sdk中如何通过淘宝提供的J_TWidget实现其中的效果。
Tabs:
其中“土豆今日焦点”这个组件中,当缩略图的切换时,上面的内容和左侧的大图同时切换,这个略微特殊一点,用到了两个slide,用一个ks-switchable-nav来控制两个ks-switchable-content的切换。
编写心得
拿其中一个dom结构为例,kissy中开放效果,只要把握其中这样几点。
最外层dom结构:
id为demo这个div标签,组件的最外层dom结构。
组件中的dom结构:
包含在id为demo里面的div结构里面的结构。
class=”J_TWidget”:
用来表示这个div是一个组件,我们要用kissy来渲染这个组件。
data-widget-type="Tabs":
这个是用来告诉sdk,我们的widget组件要用什么方式来渲染。
data-widget-config=”{….}”:
这个是组件的相关配置,也是很灵活的一部分
class=”ks-switchable-nav” :
这个用来定义当前组件进行轮播的目
copyright@ 2008-2022 冰豆网网站版权所有
经营许可证编号:鄂ICP备2022015515号-1