雅虎用戶界面博客（YUIBlog）

在銳3圖庫：馬特Parker的調整插件

2010年3月25日6:45分由馬特派克|在發展 ， 銳3圖庫 | 1條評論

我們使用非常多的不同銳2部件和組件在我們的主要應用，並愛他們！ 但我想應該是時候開始變得進行搏鬥與銳3 ，決定我有一個去把銳2的調整公用事業到銳3。 我也有較長遠的計劃寫一本日記部件，如果它要在銳 3，將需要一些resizableness。

其結果是： 我的銳3圖庫調整插件 。 提供源代碼在GitHub ，並在這裡是一個功能的例子 。

我決定做它作為一個插件，而不是一個小部件。 據我所知道的，就像一個漂亮的插件手袋或一對駝鳥皮鞋;他們幾乎一個現有的元素，但它們不是BE的所有和高端所有。 製作一個元素重新調整大小感覺就像一個插件給我。

要使用調整，包括在你的頁面的代碼：

 <腳本鋼骨混凝土=“http://yui.yahooapis.com/combo?3.0.0/build/yui/yui-min.js&gallery-2010.03.23-17-54/build/gallery-resize/gallery-resize-min的。js“> </腳本>

一旦你在頁面上的模塊，使一元調整大小是那麼容易，因為它插入：

銳（）。使用（“畫廊調整大小”，函數（Y）{
   Y.one（“＃elementId”）。插頭（Y.Plugin.Resize）;
 }）;

它似乎很重要，我認為配置和API銳 3個版本的組件中存在的銳 2應該是相似的，至少，或盡可能多，因為他們可以在銳 3的辦法。 所以，你可以使用相同的配置對象，與此插件銳 2版本，我提供了相同的API方法。 我寫的插件代碼從頭開始，但CSS是直接複製從銳2，只有改變了前綴從yui-到yui3- 。 這應有助於降低人的學習曲線使銳銳 2 3過渡。

下面是一個例子有一些更多的選擇，通過為一個對象作為第二個參數plug()

銳（）。使用（“畫廊調整大小”，函數（Y）{

   Y.one（“＃elementId”）
    。插頭（Y.Plugin.Resize，
          {拖動：真實，
            比例：假的，
            身高：150，
            代理：真實，
            鬼：的確，
            人稱：真，
             autoRatio：的確，
            處理：[“噸”，“乙”，“升”，“住宅”，“熱釋光”，“風帆”，“基本法”，“商業登記”]，
             hiddenHandles：假的，
            懸停：的確，
             knobHandles：的確，
             useShim：的確，
            狀態：真實，
             / /這是新的：一個選擇的子元素內找到＃elementId
             / /應該按比例調整大小的包裝。
             wrappedEls：“img”的，
             / /所以是這樣的：如果包裝'擁抱'的包裝元素？
             / /這將只使用一個包裝元素。
             hugWrappedEl：真
              }）;
  }）;

有一個例外的一致性與銳 2：包裝元素。 我的畫廊模塊增加了一些調整div元素內的元素的被調整給你拖動手柄。 這是罰款，只要元素接受子節點;但圖像，文本域和不喜歡。 銳2， 調整公用事業自動（或如果你告訴它）增加了一個包裝元素圖片（或其他），使其重新調整大小。

這是好的，但它也不是那麼好了插件的方法。 插件插入到特定的節點，並作為一個屬性訪問該節點。 但是，如果我的插件開始創建新的父節點和重視自己和其行為的父母，該接口是一個有點破了，它會引起困惑使用。 因此，底線是，你有你的照片來包裝自己現在的。 這可能是人作為一個優勢的包裝元素可以包含一堆圖像，也就是說，它們都可能被縮小的包裝，但他們可能是字幕獨處。

我很想反饋用戶（ 在全新的畫廊調整論壇 ）作為插件的方法是否適合你-那就是，你喜歡的方便或將您喜歡的額外帶來了方便實用的自動包裝的處理圖像和文本域？ 我有一些其他待辦事項仍，以及，例如，我還沒有拿到有線的事件，有一些重新編排雜物（拉出來的CSS類名），以及一些性能和尺寸最佳化尚未做。 我還沒有完成跨瀏覽器測試，或者，如果你使用的是Mac與調整，尤其是我喜歡的反饋上它是如何為你工作。

查找談話： bloglines | Technorati的

共享和擴展： 書籤和書籤 | Digg它！ | reddit！