雅虎用戶界面博客（YUIBlog）

在YUI 3畫廊：傳送帶模塊

什麼是旋轉木馬？

旋轉木馬控制提供了一個小部件之間的一組用於瀏覽對象，如垂直或水平排列在重載頁面區域。 在“旋轉木馬”的比喻，源於一個比喻，以幻燈片輪播在天的電影拍攝;的傳送帶控制能保持忠於這個比喻讓一個連續的，圓形的導航，通過所有的內容塊。

傳送帶是部分家庭的小部件，讓你“超負荷”的空間在頁面上，提供更多內容的空間比裝在它的尺寸，同時提供一種簡單，直觀的機制，為用戶發現和瀏覽其他內容。 手風琴，標籤，樹木和ScrollViews其他例子這一流派。

為什麼又傳送帶控制？

YUI 3需要一個強大的，功能豐富的旋轉木馬（正如我們在YUI 2 ）。 設計目標是為這輪播，使精益和清潔，並添加額外的配置，通過插件，趁勢YUI 3' s內在支持模塊化保持亮度和速度。

YUI 3 Widget框架

其中一個最大的優點編寫自定義部件使用YUI 3的Widget框架（更多的Widget框架： 用戶指南 ， 深入的視頻介紹 ）。 比較旋轉木馬在YUI 2.8.2到我的YUI 3畫廊轉盤時，YUI 3版本是精簡和優雅。 這是因為大多數的繁重就提供了基礎，提供一套通用的構件屬性，有紀律的生命週期，逐步增強的支持，等來的Widget類。

YUI 3的控件框架還提供了一致的MVC模式從而促進每一個部件採用分離狀態的方法與用戶界面的更新方法。 這使得代碼非常乾淨和維護。 事實上，這是其中一個重要因素，為什麼 YUI 3輪播優於其先前的YUI 2的表妹。

在YUI 3插件模型允許開發人員添加新的功能或修改現有的行為對象。 這允許添加額外的功能之上輪播動態拉元素通過 Ajax，等於是把YUI 3旋轉木馬沒有動畫代碼烤到它，而是我創建了一個插件，它增加了動畫的支持情況下需要的地方。 這有助於保持該組件非常輕巧。

一個畫廊傳送帶為自己的網站

在閱讀關於什麼是旋轉木馬，以及它如何能幫助您改善您的網站，你希望感到渴望得到你的手臟。 不要擔心，我們的YUI 3畫廊傳送帶延伸，實施了傳送帶上你的網站是那麼容易，因為提供了一個項目符號列表的HTML。 這不只是一個推銷 - 這就是我們最近整合了畫廊傳送帶進入雅虎體育搜索結果頁。

一個簡單的例子

讓我們從一個簡單的例子，將幾乎涵蓋了所有你需要知道的。 最簡單的方法讓你使用新的畫廊旋轉木馬是讓 YUI 3自動地加載它從雅虎的內容分發網絡。 回顧什麼是傳送帶，可滾動的列表項，我們創建了一個列表的HTML。 我們的名單中包括一個 div，這使得我們的JavaScript輕鬆地找到並使用它。 如果你已經有了一些數據，表示在一個類似列表的方式在你的標記，你也可能只是把它周圍的傳送帶格和測試你的運氣！ 這是非常重要的說，雖然我們使用的是形象的例子在這裡，你可以使用廊傳送帶任何想要的！

  <div class="carousel" id="container">
   <OL>
     <LI> <img src="img/c1.jpg"> </ LI>
     <LI> <img src="img/c2.jpg"> </ LI>
     <LI> <img src="img/c3.jpg"> </ LI>
     <LI> <img src="img/c4.jpg"> </ LI>
     <LI> <img src="img/c5.jpg"> </ LI>
     </ OL>
 </ DIV> 

現在，我們有我們的數據一起工作，我們要加強時裝展示，顯示所有五個項目使用傳送帶部件。 假設你已經在使用YUI 3這是一個簡單的任務。 唯一的事情，你可能沒有見過的，這取決於你有多深已挖掘到YUI 3和畫廊，過去是，我們明確地指定庫版本。 這是必要的，因為我們使用的是全新的部件，這是不包括在庫構建 YUI的加載程序試圖加載默認。 然而，YUI和YUI畫廊成熟，這將不會再有必要在未來的時候默認生成數量正在增加。

  YUI（{畫廊：“畫廊 2010.10.20 - 19 - 33'}）
  。使用（“畫廊旋轉木馬”，“畫廊，旋轉木馬，ANIM”，“代替”功能（Y）{
   VAR =新Y.旋轉木馬旋轉木馬（{boundingBox：“＃容器”，
    contentBox：“＃容器> OL”}）;
   carousel.plug（Y. CarouselAnimPlugin，{動畫：{速度：0.7}}）;
   carousel.render（）;
 }）; 

（順便說一句，如果你有興趣在獲得全新的東西，您可以訪問YUI 3畫廊庫 GitHub上或戈帕爾的叉子 ，在那裡他開發旋轉木馬，如果您發現了錯誤，我們總是樂意傾聽。）

回到我們的例子... YUI將它從這裡。 加載程序自動拉廊旋轉木馬和它的依賴雅虎的內容分發網絡。 在此之後，旋轉木馬是被初始化並顯示出來。 然後，用戶可以點擊向左或向右箭頭滾動顯示。 請原諒我對引進一條線的不必要的複雜性，但我無法抗拒。 我用Y.CarouselAnimPlugin讓我們的幻燈片輪播順利從一個網頁到另一個而不是僅僅顯示下一頁瞬間。 隨意發揮的速度參數，如果你的願望。

正如你可以看到上面的截圖中，傳送帶啟動和運行。 但是，CSS很可能不適合進入休息的您的網頁。 這使我們對我們的下一個部分，在這裡我們將討論如何定制畫廊傳送帶。

自畫廊傳送帶

現在，你有你的旋轉木馬並運行，並確定了用例為您的網站，你希望要整合它的無縫連接。 如前所述，我們這樣做是為我們的體育搜索結果頁。 如果你想增加的數量明顯的項目，例如，從三到四個，你可以通過修改該行的實例傳送帶。

  VAR =新Y.旋轉木馬旋轉木馬（{boundingBox：“＃容器”，
  contentBox：“＃容器> OL”，numVisible：4}）; 

還不夠好？ 是的，沒錯。 幸運的是CSS允許我們添加我們自己的樣式定義，甚至覆蓋最初的不接觸任何現有的CSS。 所以，你的第一步可能是消除邊界，因為他們是有相當突兀。 只需添加以下CSS到你的頁面標題。

  。YUI 3旋轉木馬 {
  邊框：沒有！重要;
 }
 。YUI 3旋轉木馬資產淨值 {
  背景：沒有！重要;
 }
 。傳送帶 OL裡 {
  邊框：沒有！重要;
 } 

現在，比較好看。 我還使用了一個消極的保證金，以減少差距我的旋轉木馬和標題。 但是，我們現在還沒有完全存在。 我認為你也想用自己的自定義按鈕，它很好地集成到您的頁面佈局。 對於這個例子中，我們將使用相同的按鈕，也可用於對雅虎的搜索結果頁面。 這需要多一點，但仍然簡單，CSS。

  。YUI 3轉盤鍵 {
  背景：網址（“sprite_button.png”）不重複滾動 0 0透明的！重要;
  高度：20像素！重要;寬度：28px！重要;
 }
 。YUI 3旋轉木馬資產淨值項 {
  背景：網址（“sprite_button.png”）不重複滾動 0 0透明的！重要;
  背景位置：- 133px 0！重要;
 }
 。YUI 3旋轉木馬一鍵 {
  背景位置：- 90px 0！重要;
  保證金右：35px！重要;
 }
 。YUI 3旋轉木馬一鍵式殘疾人 {
  背景位置：- 60px 0！重要;
  保證金右：35px！重要;
 }
 。YUI 3旋轉木馬，下一個按鈕 {
  背景位置：- 30px 0！重要;
 }
 。YUI 3傳送帶按鈕殘疾 {
  背景位置：0 0！重要;
 }
 。YUI 3旋轉木馬，導航項目選擇的{
  背景位置：- 121px 0！重要;
 } 

我們將留待今天說，希望你覺得準備好開始。 至少，這是我們所需要的一切。 但是，根據您的網站有多大，以及如何感興趣，你是它的性能，也有一般的想法有關加載的東西從第三方內容交付網絡，也適用於此。 例如，Sidnei達席爾瓦制定了一些有趣的想法在博客本月初。 我們將很樂意為您提供一個如何解釋如何YUI組件和它的依賴可以移動到自己的網站，甚至是內容分發網絡，使你能夠保持HTTP請求的數量盡可能低。 讓我們知道，如果你有興趣，我們期待著您的反饋！

更多探索畫廊

在優秀團隊的愛德華蘭格倫和Nate卡瓦諾的Liferay有一個旋轉木馬組件，以及在畫廊 -當然值得一試，如果你在市場上的這種控制。

查找談話： bloglines | technorati

共享和擴展： 書籤與del.icio.us | Digg它！ | 書籤交易！