雅虎的用戶界面博客（YUIBlog）

在銳三廊：斯蒂芬伍茲TimePicker模塊

我工作在一個內部產品這裡雅虎，要求用戶輸入時的一天在一個特定的格式。 我決定，而不是強迫用戶輸入完全正確的格式將更加容易，提供一個用戶界面部件的時間投入。 我一直喜歡jQuery的timepicker ，它是一個簡單而快速的方式輸入的時間和完全符合我的用例。 當然，我們使用銳3 ，所以我決定重新創建部件與銳3。 （這是快速，簡單與銳3部件的基礎。）我想這可能是對他人有益的工作與銳，所以我決定給它的權利回饋社會的用在你自己的項目。

使用選擇器應該很簡單的你，如果你熟悉基本的銳 3。 （看到現場的版本在這裡）。

要使用選擇器在你自己的項目包括腳本：

	 <腳本類型 =“文本/ JavaScript的”鋼骨混凝土=“http://yui.yahooapis.com/combo?3.0.0/build/yui/yui-min.js&gallery-2010.02.25-22/build/gallery-timepicker/畫廊 timepicker - min.js“> </腳本>

然後實例化並呈現小部件：

銳（）。使用（'畫廊timepicker'，函數（Y）的（/ /傳遞一個配置對象來採摘的timepicker變種新Y.Saw.Timepicker =（（/ /元素將包含timepicker contentBox：'科。富'，/時間的起始時間：（小時：0分：0），字符串：（我：'上午'，下午：'總理'，分隔符：'：'），延遲：5 / /延遲後，他選擇一框鼠標懸停））; picker.render（）;））; 

像所有的timepicker銳 3部件的構造需要配置對象來控制初步顯示該 Widget。 操縱部件，然後通過小部件的方法進行render ， hide和show 。 該render的方法就是實際的DOM元素創建的。 hide和show簡單地添加和刪除類yui-timepicker-hidden的元素邊界框。 這個類（和額外的CSS類的小部件）必須實行正確的部件的行為。 為了簡單起見，這裡有我的風格上使用運行的例子：

	 / *假設銳復位 * /
	 。蕊timepicker（
        顯示：塊;
        保證金：5px;
        左：0;
        位置：親屬;
        背景：透明;
     ）

     / *標準構件，在這種情況下，剛剛隱藏的一推了屏幕* /
     。蕊timepicker隱藏（
        左：- 9999em;
        位置：絕對的;
     ）

     。蕊timepicker（
        顏色：＃000;
        字體家庭：Verdana字體;
        文本對齊：左;
     ）

 / *在選擇器實際上是兩個有序列表* /
     。蕊timepicker醇（
        顯示：塊;
        位置：親屬;
        左：0;
         。左：5px;
        保證金：0px;
        填充：0px;
        身高：共二;
        文本對齊：左;
         - WebKit的過渡：左0.1更加方便中;
     ）

     。蕊timepicker李（
        列表樣式：無;
        顯示：塊;
        浮動：左;
        位置：親屬;
        左：0;
        溢出：隱藏;
        寬度：19px;
        填充：1px;
        保證金：0 2px 0 0;
        邊界：1px固體＃999;
        文本對齊：中心;
     ）

     。蕊timepicker李（
         -萬盎司，邊界半徑：2px;
         - WebKit的邊界半徑：2px;
     ）

	 / *突出選定的時間 * /
     。蕊timepicker li.yui - timepicker積極的（
        背景：＃000;
        顏色：＃000000;
         -萬盎司箱陰影：2px 2px 2px＃CCC認證;
         - WebKit的箱陰影：2px 2px 2px＃CCC認證;
     ）

我使用的WebKit的動畫只是風格;為您的項目，自定義這些樣式，你認為合適的。 在大多數情況你將要隱藏的最初選擇器。 調用hide方法只是增加了yui-timepicker-hidden式的小部件的邊界框。 我增加了一個點擊處理程序，使我的包裝元素上點擊的元素的ID time會導致部件出現/消失：

	  picker.hide（）;
      Y.get（'＃主'）。對（'點擊'功能（五）（
          VaR的目標 = e.target;
         如果（target.test（'＃時間'））（
              picker.toggle（）;
          ）
      ））;

為了使揀貨其實有用，我會聽

timeset

事件，它返回一個對象的有關信息與選定的時間，我將使用“s24hour”成員的對象傳遞給處理程序。 這是一個字符串表示的時間在24小時格式。 （也可以是hour ， minute ， ampm和s12hour ）：

	 picker.subscribe（'timeset'，功能（五）（
         / / timeset是一個自定義事件觸發時設定的時間是* *
         / /使用這個，而不是timeChange
         Y.get（'＃時間'）。集（'值'，e.s24hour）;
     ））;

 / /添加一個處理程序，以“單元格中單擊”隱藏的選擇器，當用戶點擊一個單元格
     picker.subscribe（'cellclick'，功能（五）（
        this.hide（）;
     ），選擇器）;

這就是這麼簡單！ 享受。

查找談話： bloglines | Technorati的

共享和擴展： 書籤與Del.icio.us的 | Digg它！ | reddit的！