widget装修代码指南实际开发中需要用到一些功能比较丰富主机如图片轮播tab标签等_第1页
widget装修代码指南实际开发中需要用到一些功能比较丰富主机如图片轮播tab标签等_第2页
widget装修代码指南实际开发中需要用到一些功能比较丰富主机如图片轮播tab标签等_第3页
widget装修代码指南实际开发中需要用到一些功能比较丰富主机如图片轮播tab标签等_第4页
widget装修代码指南实际开发中需要用到一些功能比较丰富主机如图片轮播tab标签等_第5页
已阅读5页,还剩37页未读 继续免费阅读

付费下载

下载本文档

版权说明:本文档由用户提供并上传,收益归属内容提供方,若内容存在侵权,请进行举报或认领

文档简介

实际的开发中需要用到一些功能比较丰富的主机,如轮播,tab等,这些组件都需要设计师写Javascript才能<div<div --J_TWidget的元素,并根据其类型和配置信息,Tabs-Slide-Carousel-Accordion-Popup-Compatible-以下依次介绍每种不同的动画效果的配置参数以及其DOM结构Tabs- <liclass="ks-active"><li><li><li><div y:none"><div y:none"><div y:none"><div<div 'effect': y':'circular': --

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

true/false(

如width:15px表示进度条最终宽度,CSS里对样 对其进行轮播的目标列表的class 自定义数值(默认值 .1==

触发方式——mouse:鼠标经过触发click:

true/false(

自定义数值(默认值

自定义数值(默认值

默认激活列表项的class

true/false(

true/false(

.1= 轮播淘小二推荐实例一实例二实例<divclass="J_TWidget<p><ahref="#"target="_blank"><img<p><ahref="#"target="_blank"><img<p><ahref="#"target="_blank"><img<liclass="selected"><ahref="#"<li><ahref="#"<li><ahref="#"<div 'delay':'effect':'easing':'duration': y': --

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

true/false(

自定义数值(默认值 .1==

true/false(

自定义数值(默认值

自定义数值(默认值

Carousel旋转木马

.1=以将每一组内容再独自包含在一个ul列表中。 <spanid="scroller-prevclass="prevdisable">‹上一页下一页<div<imgalt=""<imgalt=""<imgalt=""<imgalt=""<imgalt=""<imgalt=""<imgalt=""<imgalt=""<imgalt=""<div 'effect':'easing':'steps':'viewSize':'circular':'prevBtnCls':'nextBtnCls':'disableBtnCls': --

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

true/false默认值:

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

.1==

触发方式——mouse:鼠标经过触发click:

true/false默认值:

自定义数值(默认值

自定义数值(默认值:0) 自定义值(默认值:

.1==Accordion手风琴<divclass="J_TWidget<divclass="ks-switchable-triggerks-active"><h3>标题 <div<div -- 主列表的class (

触发方式——mouse:鼠标经过触发click:((Popup弹出层<divclass="J_TWidgethidden"data-widget-type="Popup"data-widget-config="{'trigger':'.first-trigger',}<divstyle="background-color:yellow;height:100px;width:<div<divclass="J_TWidgethidden"data-widget-type="Popup"data-widget-config="{'trigger':'.first-trigger',} --

node‘自定义’,//node‘自定义’,//popup与参考元素进行定位。和触点写支持classidpoints: 'tltr']popuptltroffset:具体tl,tr表示的意义和值看下面截图,//[n,m]points对齐后,offset'bl','bc','br')如下图所示:<divclass="J_TWidgethidden"data-widget-type="Popup"data-widget-config="{'trigger':'.first-trigger',}<divstyle="background-color:blue;height:100px;width:<divclass="J_TWidgethidden"data-widget-type="Popup"data-widget-config="{'trigger':'.first-trigger',}<divstyle="background-color:blue;height:100px;width:Countdown倒计时class<divclass="J_TWidget"data-widget-type="Countdown" 'endTime':'20000','d':'.ks-'h':'.ks-'m':'.ks-'s':'.ks-'i':'.ks-'minDigit':<!--倒计时结束时隐藏<!--<!--如果有0.1秒级别的变化建议以gif背 的形式变化--<!--倒计时结束时显示<!--

式:2011-7-2111:01:01)

'endTime':'2011-7-21'endTime

有此class名的,其内容在倒计时运行时显

'dks-d'hks-h','sks-s'iks-i} (>=1

例如:digit超过情形:400分20秒,则应该显示400分秒

有此class名的,其内容在倒计时运行时隐Compatibe兼容性组件兼容组件的第一个作用:ie6兼容组件的第一个作用:ie6<div data-widget-type="Compatible"data-widget-淘宝发布开源编辑器:KISSYEditor,和我们在WordPress使用的富文本编辑器TinyMCE一样,它可以让我TinyMCEKISSYEditorKISSYEditor是开KISSYUILibrary的一个组件。KISSYYUI2.x开发,目标是打造一系列小巧灵活、简洁实用、使用UICSSSuggestKISSYEditor这个富文本编辑器等组SliCarouse()Accordion()kissy中开放的配置(sdk中的config商务首页的一些效果截图附件中会给出,sdk中如何通过淘宝提供的J_TWidget实现其中的效果。用一个ks-switchable-nav来控制两个ks-switchable-content的切换。组件中的dom结构:包含在iddemo里面的div结构里面的结构。class=”J_TWidget”divkissy来渲染这个组件。::="{:'PS:我们更推荐用户去自定义一个class来覆盖这个淘宝默认的钩子,方法为在data-widget-config中,data-widget-config'contentClsclass'}"class=”ks-active当前正在轮播 'effect':'none', 'circular':true<liclass="ks-active"><li><li><li><li> y ytabs的展示效果是可以通过配置改变

温馨提示

  • 1. 本站所有资源如无特殊说明,都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等,如果需要附件,请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸,网页内容里面会有图纸预览,若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间,仅对用户上传内容的表现方式做保护处理,对用户上传分享的文档内容本身不做任何修改或编辑,并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容,请与我们联系,我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

评论

0/150

提交评论