淘寶Widget規(guī)范

1、Widget規(guī)范出自淘寶網(wǎng)店鋪開發(fā)者WIKI跳轉(zhuǎn)到：導(dǎo)航，搜索目錄隱藏J1概述2使用方法?2.1.1實(shí)例展示?2.1.2所需DOM結(jié)構(gòu)?2.1.3組件調(diào)用方法?2.1.4配置參數(shù)列表2.2 Slide卡盤效果?2.2.1實(shí)例展示?2.2.2所需DOM結(jié)構(gòu)?2.2.3組件調(diào)用方法?2.2.4參數(shù)配置列表2.3 Carousel -旋轉(zhuǎn)木馬?2.3.1實(shí)例展示?2.3.2所需DOM結(jié)構(gòu)?2.3.3組件調(diào)用方法?2.3.4參數(shù)配置列表2.4 Accordion -手風(fēng)琴?2.4.1實(shí)例展示?2.4.2 所需 DOM結(jié)構(gòu)?2.4.3組件調(diào)用方法?2.4.4配置參數(shù)列表2.5 Popup -彈岀層?2.

2、5.1實(shí)例展示?2.5.2所需DOM結(jié)構(gòu)?2.5.3組件調(diào)用方法?2.5.4配置參數(shù)列表?2.5.5配置項(xiàng)align中白2.1 Tabs -標(biāo)簽頁points的說明3關(guān)干Kissy4支持效果5編寫心得6樣例代碼概述實(shí)際的開發(fā)中需要用到一些功能比較豐富的主機(jī)，如圖片輪播，tab標(biāo)簽等，這些組件都需要設(shè)計(jì)師寫Javascript才能完成，考慮前期JavaScript是不對(duì)設(shè)計(jì) 師開放的，所以淘寶要提供一些 widget庫，方便設(shè)計(jì)調(diào)用，形成特定的組件。">通過載入淘寶的js框架來渲染。vdiv class="J_TWidget" data-ty pe="

3、;Slide" data-cfg="<!- code - ></div>我們會(huì)獲取名字叫J_TWidget的元素,并根據(jù)其類型和配置信息，渲染相應(yīng)的 效果。使用方法目前淘寶提供的widget分為5種:? Tabs -標(biāo)簽頁? Slide -卡盤? Carousel -旋轉(zhuǎn)木馬? Accordion -手風(fēng)琴? Popup -彈出層針對(duì)每種不同的動(dòng)畫效果需要通過配置不同的參數(shù)，配合不同的DOM吉構(gòu)。以下依次介紹每種不同的動(dòng)畫效果的配置參數(shù)以及其DOM吉構(gòu)Tabs -標(biāo)簽頁實(shí)例展示實(shí)例一實(shí)例二所需 DOM 結(jié)構(gòu)本組件對(duì)DOM吉構(gòu)沒有特殊要求，調(diào)用只需要按

4、順序?qū)?ul列表中每個(gè)元素跟內(nèi) 容元素一一對(duì)應(yīng)即可，當(dāng)然觸點(diǎn)和內(nèi)容都必須包含在唯一的外層容器里面。<div class="J_TWidget section"><ul class="ks-switchable-nav"><li class="ks-active">標(biāo)題 A</li><li>標(biāo)題B</li><li>標(biāo)題C</li><li>標(biāo)題D</li></ul><div class="ks

5、-switchable-content"><div>預(yù)先加載的內(nèi)容</div><div style="display: none">內(nèi)容B</div><div style="display: none">內(nèi)容C</div><div style="display: none">內(nèi)容D</div></div> </div>組件調(diào)用方法”Tabs” data-widget-config=”<div c

6、lass= ”J_TWidget” data-widget-type= 'effect': 'fade', 'aut op lay': true, 'circular': true ” > <!- code - > </div>配置參數(shù)列表配置參數(shù)參數(shù)可選值作用說明effectnon e/fade/scrolly/scrollx（默認(rèn)值：none）切換時(shí)的動(dòng)畫效果none,最樸素的顯示/隱藏效果 fade,可實(shí)現(xiàn)淡隱淡現(xiàn)的效果scrolly,垂直滾動(dòng)scrollx,水平滾動(dòng)eas ingeaseOut

7、Str on g/easeBoth滾動(dòng)的動(dòng)畫方方式coun tdow ntrue/false （默認(rèn)值：false）是否開啟倒計(jì)時(shí)樣式coun tdow nF romStyle自定義值設(shè)定倒計(jì)時(shí)最終樣式如：width:15px表示進(jìn)度條最終寬度，可先在CSS里對(duì)樣式進(jìn)行定義navCIs自定義值對(duì)其進(jìn)行輪播的目標(biāo)列表的class值conten tCls自定義值輪播列表所對(duì)應(yīng)的內(nèi)容列表的class值delay自定義數(shù)值（默認(rèn)值：1）延遲加載時(shí)間.1 = 100mstriggerT ypemouse/click<>（默認(rèn)值：mouse）br觸發(fā)方式mouse：鼠標(biāo)經(jīng)過觸發(fā) click :

8、鼠標(biāo)點(diǎn)擊觸發(fā)hasTriggerstrue/false （默認(rèn)值：true）是否設(shè)置觸發(fā)點(diǎn)ste ps自定義數(shù)值（默認(rèn)值：1）切換視圖內(nèi)有多少個(gè)pan elsviewSize自定義值切換視圖區(qū)域的大小。一般不需要設(shè)定此值，僅當(dāng)獲取值不正 確時(shí)，用于手工指定大小active In dex自定義數(shù)值（默認(rèn)值：0）默認(rèn)激活的列表項(xiàng)activeTriggerCls自定義值（默認(rèn)值：active）默認(rèn)激活列表項(xiàng)的class值aut op laytrue/false （默認(rèn)值：true）是否自動(dòng)播放circulartrue/false （默認(rèn)值：true）是否有循環(huán)滾動(dòng)效果durati on自定義值（默認(rèn)

9、值：0.5）動(dòng)畫時(shí)長.1 = 100msSlide卡盤效果實(shí)例展示 超帥圖片輪播淘小二推薦實(shí)例一實(shí)例二實(shí)例三所需DOM結(jié)構(gòu)本組件需要將滾動(dòng)的對(duì)象作為一個(gè) ul列表，包含在外層的容器中，同時(shí)容器里 還需要定義一個(gè)容器來放置列表中對(duì)應(yīng)項(xiàng)的具體內(nèi)容。vdiv class="J_TWidget secti on">vdiv class="yslider-stage">vpxa href="#" target="_bla nk">vimg src="#"/>v/a>v/p&g

10、t;vpxa href="#" target="_bla nk">vimg src="#"/></a></p> vpxa href="#" target="_bla nk">vimg src="#"/></a></p></div>vul class="yslider-stick"><li class="selected"><a h

11、ref="#" target="_blank">aaa</a></li><li><a href="#" target="_blank">bbb</a></li><li><a href="#" target="_blank">ccc</a></li></ul> </div>組件調(diào)用方法<div class= ”J_TWidg

12、et ” data-widget-type= ” Slide ” data-widget-config= ”'navCls': 'yslider-stick','contentCls': 'yslider-stage', 'activeTriggerCls': 'selected', 'delay': 0.2, 'effect': 'fade', 'easing': 'easeBoth', 'duration&#

13、39;: 0.8, 'autoplay': false,”><!- code - ></div>參數(shù)配置列表配置參數(shù)參數(shù)可選值作用說明effectnon e/fade/scrolly/scrollx（默認(rèn)值：none）切換時(shí)的動(dòng)畫效果none,最樸素的顯示/隱藏效果 fade,可實(shí)現(xiàn)淡隱淡現(xiàn)的效果scrolly,垂直滾動(dòng)scrollx,水平滾動(dòng)eas ingeaseOutStr on g/easeBoth滾動(dòng)的動(dòng)畫方方式coun tdow ntrue/false （默認(rèn)值：false）是否開啟倒計(jì)時(shí)樣式coun tdow nF romStyle自定

14、義值設(shè)定倒計(jì)時(shí)最終樣式如：width:15px表示進(jìn)度條最終寬度，可先在CSS里對(duì)樣式進(jìn)行定義navCIs自定義值對(duì)其進(jìn)行輪播的目標(biāo)列表的class值conten tCls自定義值輪播列表所對(duì)應(yīng)的內(nèi)容列表的class值delay自定義數(shù)值（默認(rèn)值：1）延遲加載時(shí)間.1 = 100mstriggerT ypemouse/click<>（默認(rèn)值：mouse）br觸發(fā)方式mouse：鼠標(biāo)經(jīng)過觸發(fā) click :鼠標(biāo)點(diǎn)擊觸發(fā)hasTriggerstrue/false （默認(rèn)值：true）是否設(shè)置觸發(fā)點(diǎn)ste ps自定義數(shù)值（默認(rèn)值：1）切換視圖內(nèi)有多少個(gè)pan elsviewSize自定義

15、值切換視圖區(qū)域的大小。一般不需要設(shè)定此值，僅當(dāng)獲取值不正 確時(shí)，用于手工指疋大小active In dex自定義數(shù)值（默認(rèn)值：0）默認(rèn)激活的列表項(xiàng)activeTriggerCls自定義值（默認(rèn)值：active）默認(rèn)激活列表項(xiàng)的class值durati on自定義值（默認(rèn)值：0.5）動(dòng)畫時(shí)長.1 = 100msCarousel - 旋轉(zhuǎn)木馬實(shí)例展示實(shí)例一實(shí)例二所需DOM結(jié)構(gòu)需要滾動(dòng)的對(duì)象依次羅列，包含在內(nèi)容區(qū)的容器中，同時(shí)需要兩個(gè)不同ID的容器來分別包含上下翻頁的按鈕，另外可以將每一組內(nèi)容再獨(dú)自包含在一個(gè)ul列表中。<div class="sectio n J_TWidget&q

16、uot;>?上一頁 v/span>下一頁?</span>vspan id="scroller- prev" class=" prev disable"vspan id="scroller- next" class=" next"><div class="scroller"><div class="ks-switchable-co nte nt">vimg alt="" src="#"

17、/> vimg alt="" src="#"/><img alt="" src="#"/><img alt="" src="#"/><img alt="" src="#"/> <img alt="" src="#"/><img alt="" src="#"/><img alt=&q

18、uot;" src="#"/><img alt="" src="#"/> </div><ul class="ks-switchable-nav"><li class="ks-active">?</li><li><li>?</li> ?</li></ul></div> </div>組件調(diào)用方法<div class= ”J_TWidge

19、t ” data-widget-type= ” Carousel ” data-widget-config= ”'effect': 'scrollx','easing': 'easeOutStrong', 'steps': 5, 'viewSize': 680, 'circular': false, 'prevBtnCls': 'prev', 'nextBtnCls': 'next', 'disableBtnCl

20、s': 'disable',<!- code - > </div>參數(shù)配置列表配置參數(shù)參數(shù)可選值作用說明effectnon e/fade/scrolly/scrollx（默認(rèn)值：none）切換時(shí)的動(dòng)畫效果none,最樸素的顯示/隱藏效果 fade,可實(shí)現(xiàn)淡隱淡現(xiàn)的效果scrolly,垂直滾動(dòng)scrollx,水平滾動(dòng)eas ingeaseOutStr on g/easeBoth滾動(dòng)的動(dòng)畫方方式coun tdow ntrue/false （默認(rèn)值：false）是否開啟倒計(jì)時(shí)樣式coun tdow nF romStyle自定義值設(shè)定倒計(jì)時(shí)最終樣式如：w

21、idth:15px表示進(jìn)度條最終寬度，可先在CSS里對(duì)樣式進(jìn)行定義navCIs自定義值對(duì)其進(jìn)行輪播的目標(biāo)列表的class值conten tCls自定義值輪播列表所對(duì)應(yīng)的內(nèi)容列表的class值delay自定義數(shù)值（默認(rèn)值：1）延遲加載時(shí)間，當(dāng)前顯示圖片到切換其他圖 片動(dòng)作開始，這中間的停留時(shí)間.1 = 100mstriggerT ypemouse/click<>（默認(rèn)值：mouse）br觸發(fā)方式mouse：鼠標(biāo)經(jīng)過觸發(fā) click :鼠標(biāo)點(diǎn)擊觸發(fā)hasTriggerstrue/false （默認(rèn)值：true）是否設(shè)置觸發(fā)點(diǎn)ste ps自定義數(shù)值（默認(rèn)值：1）切換視圖內(nèi)有多少個(gè)pan

22、elsviewSize自定義值切換視圖區(qū)域的大小。一般不需要設(shè)定此值，僅當(dāng)獲取值不正 確時(shí)，用于手工指定大小active In dex自定義數(shù)值（默認(rèn)值：0）默認(rèn)激活的列表項(xiàng)activeTriggerCls自定義值（默認(rèn)值：active）默認(rèn)激活列表項(xiàng)的class值circulartrue/false（默認(rèn)：true）滾動(dòng)效果prevBt nCIs自定義值上一頁的 class值InextBt nCIs自定義值下一頁的 class值pisableBt nCIs自定義值按鈕不可用的class值durati on自定義值（默認(rèn)：0.5）動(dòng)畫時(shí)長，一張圖片開始切換到另一張圖片顯 示的時(shí)間.1 = 10

23、0msAccord ion - 手風(fēng)琴實(shí)例展示實(shí)例一實(shí)例二所需DOM結(jié)構(gòu)需要將菜單中每個(gè)標(biāo)題及其內(nèi)容分別包含在對(duì)應(yīng)的容器中, ID來標(biāo)示組件。最外層容器有唯一的<div class="J_TWidget secti on"><div class="ks-switchable-tngger ks-active"><h3>標(biāo)題 Av/h3>v/div><div class="ks-switchable-pan el">內(nèi)容AAAAA</div><div clas

24、s="ks-switchable-trigger"xh3>標(biāo)題 B</h3></div><div class="ks-switchable-pan el"style="dis play:non e;">內(nèi)容BBBBB</div><div class="ks-switchable-trigger"><h3>標(biāo)題 C</h3></div><div class="ks-switchable-pan el&

25、quot; style="dis play:non e;">內(nèi)容cccccv/div>標(biāo)題<div class="ks-switchable-trigger last-trigger"><h3> D</h3></div><div class="ks-switchable-pan el last- pan el" style="dis play:non e;">內(nèi)容DDDDD</div> </div>組件調(diào)用方法<d

26、iv class= ” J_TWidget” data-widget-type=” Accordion ”data-widget-config=” 'triggerT yp e': 'click'.'multi ple':true<!- code - ></div>配置參數(shù)列表配置參數(shù)參數(shù)可選值作用說明（triggerCls自定義值主列表的class值pan elCls自定義值列表所對(duì)應(yīng)的內(nèi)容列表的class值triggerT ypemouse/click （默認(rèn)值：click）觸發(fā)方式mouse鼠標(biāo)經(jīng)過觸發(fā)click :

27、鼠標(biāo)點(diǎn)擊觸發(fā)multi pietrue/false （默認(rèn)值：false）hasTriggers true/false （默認(rèn)值：true）是否冋時(shí)支持多面板展開是否設(shè)置觸發(fā)點(diǎn)Popup -彈出層實(shí)例展示實(shí)例一實(shí)例二所需DOM結(jié)構(gòu)本組件作為一個(gè)彈出層的效果，通過預(yù)先設(shè)置一個(gè)隱藏的彈出層，并且設(shè)置該彈 出層的觸點(diǎn)，通過鼠標(biāo)滑入和移出觸點(diǎn)來展示和隱藏彈出層效果<div class="first-trigger">我只是個(gè)觸點(diǎn)而已，把鼠標(biāo)滑到我身上v/div><div class="J_TWidget hidde n" data-wid

28、get-ty pe- Popup" data-widget-c on fig="'trigger':'.first-trigger','alig n':'no de':'.first-trigger','offset':0,0,'p oi nts':'cr','cc'"><div style="backgrou nd-color: blue; height: 100px; width: 100 px;

29、"> 我是一個(gè)彈出層</div></div>組件調(diào)用方法<div class="J_TWidget hidde n" data-widget-ty pe- Popup" data-widget-c on fig="'trigger':'.first-trigger','alig n':'no de':'.first-trigger','offset':0,0,'p oi nts':'cr&#

30、39;,'cc'"><!- code - > v/div>配置參數(shù)列表配置參數(shù)參數(shù)可選值作用說明triggeralig n自定義node,poin ts,ofset三個(gè)配置觸點(diǎn)元素，就是鼠標(biāo)滑過哪個(gè)元素的時(shí)候彈出當(dāng)前的 支持class和id選擇器的寫法popup ,node:自定義，/參考元素。popup與參考元素進(jìn)行定位。和觸點(diǎn)寫法一樣，支持 class和id選擇器 的寫法表示popup的poi nts: tr,tl, / 'tl', 'tr'tl與參考節(jié)點(diǎn)的tr 對(duì)齊，具體tl ，tr表示的意義和值看下面截圖

31、，t(top) ， c(center), b(bottom),l(left),r(right) offset: 0,0 / 有效值為n, m ， p oi nts對(duì)齊后，offset值，一般可用于微調(diào)，n和m分別表示對(duì)齊 兩個(gè)點(diǎn)在x,y坐標(biāo)之間的偏移量配置項(xiàng)align中的points的說明觸點(diǎn)與彈出層的對(duì)齊方式(align中的points配置)元素及參考元素上各自的 九個(gè)不同位置點(diǎn)('tl', 'tc', 'tr', 'cl', 'cc', 'cr', 'bl', 'be&#

32、39;, 'br')如下圖所示：<rdemo代碼，直接復(fù)制到自定義內(nèi)容區(qū)里面， 保存-預(yù)覽就可以到效果了哈。大家 發(fā)揮自己的想象力吧。<div class="first-trigger">我只是個(gè)觸點(diǎn)而已，把鼠標(biāo)滑到我身上v/div><div class="J_TWidget hidde n" data-widget-ty pe- Popup" data-widget-c on fig="'trigger':'.first-trigger','ali

33、g n':'no de':'.first-trigger','offset':O,O,'p oi nts':'cr','cl'"><div style="backgrou nd-color: blue; height: lOOpx; width: 100 px;"> 我是一個(gè)彈出層</div></div>demo代碼，直接復(fù)制到自定義內(nèi)容區(qū)里面， 保存-預(yù)覽就可以到效果了哈。大家 發(fā)揮自己的想象力吧。<div cl

34、ass="first-trigger">我只是個(gè)觸點(diǎn)而已，把鼠標(biāo)滑到我身上v/div><div class="J_TWidget hidde n" data-widget-ty pe- Popup" data-widget-c on fig="'trigger':'.first-trigger','alig n':'no de':'.first-trigger','offset':0,0,'points':

35、'cr','cl'"><div style="background-color: blue; height: 100px; width: 100px;"> 我是一個(gè)彈出層</div></div>注意： 觸點(diǎn)目前只允許包含在 #content 內(nèi)。不允許影響頁頭頁尾：關(guān)于 Kissy淘寶發(fā)布開源編輯器： KISSY Editor ，和我們?cè)?WordPress 后臺(tái)使用的富文本 編輯器 TinyMCE 一樣，它可以讓我們?cè)诰€編輯和格式化文本， 但是相比 TinyMCE KISSY Editor

36、 更加輕巧，更加適合國內(nèi)的網(wǎng)絡(luò)環(huán)境。 KISSY Editor 是開源項(xiàng) 目 KISSY UI Library 的一個(gè)組件。 KISSY 目前基于 YUI 2.x 開發(fā)，目標(biāo)是打 造一系列小巧靈活、簡潔實(shí)用、使用起來讓人感覺愉悅的 UI 組件，目前已有 CSS 基礎(chǔ)框架、搜索提示 Suggest 和 KISSY Editor 這個(gè)富文本編輯器等組件。支持效果目前 kissy 中開放，能直接調(diào)用的效果組件為 switchable ，其中包括四種 widget ， tabs （標(biāo)簽頁）， Slide （卡盤）， Carousel （旋轉(zhuǎn)木馬）， Accordion （手風(fēng)琴） 雖然只有四種效果，但

37、實(shí)際上，通過 kissy 中開放的配置（對(duì)應(yīng) sdk 中的 data-widget-config ），以及不同的dom結(jié)構(gòu)，與css控制，可以展示出各種各 樣的效果。 下面是互聯(lián)網(wǎng)中， 部分電子商務(wù)網(wǎng)站首頁的一些效果截圖 附件中會(huì) 給出， sdk 中如何通過淘寶提供的 J_TWidget 實(shí)現(xiàn)其中的效果。Tabs：Tabs -普通標(biāo)簽頁tab5標(biāo)簽的理示站是可地過ea進(jìn)的比如改變甜皀CtdLitophy等tab5標(biāo)箜的區(qū)惡畢昱可Mi過B®匹B： SSeHeU , autopby算tabs標(biāo)瓷的晟示效皋昱可湖過I磧改變的.比如，改變autopbylabs標(biāo)S藥晟茨 以運(yùn)過配愷改變的，比

38、S0 r STeffert , auto pl ay毒Slide :猱番w星6ns證訂 二硼平屯翟® ;p=s1&一尙匿囑軒6002M;MV J飆平凰榔佃網(wǎng) ap二Ss'M潼i簾唱濤， - 、產(chǎn) :樓 嚴(yán)遠(yuǎn)sHESlide 有啊滾動(dòng)新聞條= ',._.Slide今日點(diǎn)視鶴 前09癢丈學(xué)生+大杯具環(huán)臥了第譽(yù)麺強(qiáng)翻劉藝校玄生”封上瑩同女 礙士些鬆,09年愛主注丈享生號(hào)上的些頃墾 峯得來哮認(rèn)驚住聲刃，侄號(hào)匚有"松貝"湖d福:龍:-訐斑 1?vi»L猛!dAccordion -手風(fēng)琴時(shí)尚q雖矗拌盂休區(qū)旌269煩鶴莘盍休閑鞋I特療價(jià)126孑

39、曇a脊宜艇羽限娶寧英険士代薙12倔其中“土豆今日焦點(diǎn)”這個(gè)組件中，當(dāng)縮略圖的切換時(shí)，上面的內(nèi)容和左側(cè)的大圖 同時(shí)切換，這個(gè)略微特殊一點(diǎn)，用到了兩個(gè)slide，用一個(gè)ks-switchable-nav來控制兩個(gè) ks-switchable-content 的切換。編寫心得拿其中一個(gè)dom結(jié)構(gòu)為例，kissy中開放效果，只要把握其中這樣幾點(diǎn)。最外層dom結(jié)構(gòu)：id為demo這個(gè)div標(biāo)簽，組件的最外層 dom結(jié)構(gòu)。組件中的dom結(jié)構(gòu)：包含在id為demo里面的div結(jié)構(gòu)里面的結(jié)構(gòu)。class= ” J_TWidget”：用來表示這個(gè)div是一個(gè)組件，我們要用kissy來渲染 這個(gè)組件。data-w

40、idget-type="Tabs":這個(gè)是用來告訴sdk，我們的widget組件要用什么 方式來渲染。data-widget-config=” . ” :class= ” ks-switchable-nav ” : class 值。PS:我們更推薦用戶去自定義一個(gè)data-widget-config 中。 data-widget-config=" 'navCls' 義樣式。class="ks-switchable-content"class 值。PS:我們更推薦用戶去自定義一個(gè)這個(gè)是組件的相關(guān)配置， 也是很靈活的一部分這個(gè)用來定義當(dāng)前組件進(jìn)行輪播的目標(biāo)列表的class 來覆蓋這個(gè)淘寶默認(rèn)的鉤子，方法為在: ' 自定義的 class'" ，這樣也方便設(shè)計(jì)師定：用來定義輪播