淘寶Widget規(guī)范

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

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

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

4、順序將 ul列表中每個元素跟內 容元素一一對應即可，當然觸點和內容都必須包含在唯一的外層容器里面。<div class="J_TWidget section"><ul class="ks-switchable-nav"><li class="ks-active">標題 A</li><li>標題B</li><li>標題C</li><li>標題D</li></ul><div class="ks

5、-switchable-content"><div>預先加載的內容</div><div style="display: none">內容B</div><div style="display: none">內容C</div><div style="display: none">內容D</div></div> </div>組件調用方法”Tabs” data-widget-config=”<div c

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

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

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

9、值：0.5）動畫時長.1 = 100msSlide卡盤效果實例展示 超帥圖片輪播淘小二推薦實例一實例二實例三所需DOM結構本組件需要將滾動的對象作為一個 ul列表，包含在外層的容器中，同時容器里 還需要定義一個容器來放置列表中對應項的具體內容。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>組件調用方法<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>參數配置列表配置參數參數可選值作用說明effectnon e/fade/scrolly/scrollx（默認值：none）切換時的動畫效果none,最樸素的顯示/隱藏效果 fade,可實現淡隱淡現的效果scrolly,垂直滾動scrollx,水平滾動eas ingeaseOutStr on g/easeBoth滾動的動畫方方式coun tdow ntrue/false （默認值：false）是否開啟倒計時樣式coun tdow nF romStyle自定

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

15、值切換視圖區(qū)域的大小。一般不需要設定此值，僅當獲取值不正 確時，用于手工指疋大小active In dex自定義數值（默認值：0）默認激活的列表項activeTriggerCls自定義值（默認值：active）默認激活列表項的class值durati on自定義值（默認值：0.5）動畫時長.1 = 100msCarousel - 旋轉木馬實例展示實例一實例二所需DOM結構需要滾動的對象依次羅列，包含在內容區(qū)的容器中，同時需要兩個不同ID的容器來分別包含上下翻頁的按鈕，另外可以將每一組內容再獨自包含在一個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>組件調用方法<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>參數配置列表配置參數參數可選值作用說明effectnon e/fade/scrolly/scrollx（默認值：none）切換時的動畫效果none,最樸素的顯示/隱藏效果 fade,可實現淡隱淡現的效果scrolly,垂直滾動scrollx,水平滾動eas ingeaseOutStr on g/easeBoth滾動的動畫方方式coun tdow ntrue/false （默認值：false）是否開啟倒計時樣式coun tdow nF romStyle自定義值設定倒計時最終樣式如：w

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

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

23、0msAccord ion - 手風琴實例展示實例一實例二所需DOM結構需要將菜單中每個標題及其內容分別包含在對應的容器中, ID來標示組件。最外層容器有唯一的<div class="J_TWidget secti on"><div class="ks-switchable-tngger ks-active"><h3>標題 Av/h3>v/div><div class="ks-switchable-pan el">內容AAAAA</div><div clas

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

25、quot; style="dis play:non e;">內容cccccv/div>標題<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;">內容DDDDD</div> </div>組件調用方法<d

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

27、鼠標點擊觸發(fā)multi pietrue/false （默認值：false）hasTriggers true/false （默認值：true）是否冋時支持多面板展開是否設置觸發(fā)點Popup -彈出層實例展示實例一實例二所需DOM結構本組件作為一個彈出層的效果，通過預先設置一個隱藏的彈出層，并且設置該彈 出層的觸點，通過鼠標滑入和移出觸點來展示和隱藏彈出層效果<div class="first-trigger">我只是個觸點而已，把鼠標滑到我身上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、"> 我是一個彈出層</div></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,'p oi nts':'cr&#

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

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

32、39;, 'br')如下圖所示：<rdemo代碼，直接復制到自定義內容區(qū)里面， 保存-預覽就可以到效果了哈。大家 發(fā)揮自己的想象力吧。<div class="first-trigger">我只是個觸點而已，把鼠標滑到我身上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;"> 我是一個彈出層</div></div>demo代碼，直接復制到自定義內容區(qū)里面， 保存-預覽就可以到效果了哈。大家 發(fā)揮自己的想象力吧。<div cl

34、ass="first-trigger">我只是個觸點而已，把鼠標滑到我身上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;"> 我是一個彈出層</div></div>注意： 觸點目前只允許包含在 #content 內。不允許影響頁頭頁尾：關于 Kissy淘寶發(fā)布開源編輯器： KISSY Editor ，和我們在 WordPress 后臺使用的富文本 編輯器 TinyMCE 一樣，它可以讓我們在線編輯和格式化文本， 但是相比 TinyMCE KISSY Editor

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

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

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

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

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