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

在YUI 3画廊：斯蒂芬伍兹TimePicker模块

二零一零年3月3日，上午7:30由斯蒂芬伍兹|在YUI的3画廊 | 3评论

我正在这里内部的产品在雅虎天的时间在一个特定的格式输入所需的用户。 我决定，而不是强迫用户输入完全正确的格式，只是提供一个时间输入的UI组件，它会更容易。 我一直很喜欢jQuery 的timepicker ;这是一个简单而快速的方式输入的时间和我使用的情况下，完全符合。 当然，我们使用YUI 3 ，所以我决定重新使用YUI 3的部件。 （这是快速和容易与YUI的3部件的基础 。）我想这可能是有用的其他使用YUI工作，所以我决定给它的右后卫在自己的项目使用的社会。

使用机械手，应为你很简单，如果你熟悉YUI 3的基础。 （见这里的现场版 ）。

要使用机械手在自己的项目，包括脚本：

	 <脚本类型=“文/ JAVASCRIPT”

然后实例化和渲染小部件：

 YUI（）。使用（“画廊timepicker”，函数（y）{
	 / /通过配置对象的timepicker
        VAR选择器=新Y.Saw.Timepicker（
            {
			    / /一个元素将包含在timepicker
                contentBox：“div.foo” 

			    /初始时间
               时间：{
                   时间：0
                   分：0
                }，
               字符串：{
                   我：'我'，
                   下午：“下午”，
                   分隔符：“：”
                }，
               延迟：5 / /延迟，然后选择一箱鼠标悬停
            }
        ）;
       picker.render（）;
 }）;

像所有YUI 3部件timepicker构造函数接受一个配置对象，控制部件的初始显示。 然后做操作部件通过部件的方法render ， hide和show 。 render方法是创建实际的DOM元素hide隐藏show显示简单的添加和yui-timepicker-hidden的隐藏元素边界框。 这个类（widget的额外的CSS类）必须实现部件的正常运行。 为了简便起见，这里有我上运行的例子中使用的样式：

	 / *假设YUI复位* /
	 。YUI - timepicker {
        显示：块;
        保证金：5px;
        左：0;
        位置：相对;
        背景：透明;
     }

     / *标准部件，在这种情况下只需按下了屏幕，隐藏着一个* /
     YUI - timepicker隐藏{
        左：- 9999em;
        位置：绝对;
     }

     。YUI - timepicker {
        颜色：＃000;
        字体家庭：宋体;
        文本对齐：左;
     }

 / *选择器实际上是两个有序列表* /
    锐timepicker OL {
        显示：块;
        位置：相对;
        左：0;
        左：5px;
        保证金：0px;
        填充：0px;
        高度：24px;
        文本对齐：左;
         WebKit的转型：左0.1小号缓解;
     }

    锐timepicker李{
        列表样式：无;
        显示：块;
        浮动：左;
        位置：相对;
        左：0;
        溢出：隐藏;
        宽度：19px;
        填充：1px的;
        保证金：0 2px的0;
        边界：1px的固体＃999;
        文本对齐：中心;
     }

    锐timepicker李{
         MOZ边界半径：2px的;
         - WebKit的边界半径：2px的;
     }

	 / *突出显示选定的时间* /
    锐timepicker li.yui timepicker积极{
        背景：＃000;
        颜色：＃FFF;
         MOZ -盒的影子：2px的2px的2px的＃CCC;
         WebKit的框阴影：2px的2px的2px的＃CCC;
     }

我只使用WebKit的动画风格，为您的项目，自定义这些样式，您认为合适的。 对于大多数用途，您将要隐藏的最初的选择器。 调用hide方法，只是增加yui-timepicker-hidden隐藏式部件的边框。 我添加了一个单击处理程序，以我的包装元素，使一个id time的点击时间将导致部件出现/消失：

	  picker.hide（）;
      Y.get（'＃主“）上（”点击“功能（E）{
          VAR目标= e.target;
          （target.test（“＃时间”））{
              picker.toggle（）;
          }
      }）;

为了使机械手真的有用，我会听取

timeset

事件，它返回一个对象选定的时间信息，我将使用“s24hour”成员对象传递给处理程序。 这是一个在24小时格式的时间字符串表示形式。 （也可以是hour ， minute ， ampm和s12hour ）：

	 picker.subscribe（timeset“功能（E）{
         / / timeset是一个自定义事件触发时的时间是*设置*
         / /使用此而比timeChange
         Y.get（“＃时间”）集（“价值”，e.s24hour）;
     }）;

 / /添加处理程序“单元格中单击”隐藏选择器，当用户点击一个细胞
     picker.subscribe（cellclick“功能（E）{
        this.hide（）;
     }，选择器）;

这就是这么简单！ 享受。

谈话： bloglines | technorati

分享和扩展： 书签del.icio.us Digg它！ | 书签交易！