YUI: Yahoo! Web UI库

YUI是Yahoo!提供的一组JS实现的开源Web UI库,基于BSD协议,目前包括拖拽(drag and drop),自动完成(autocomplete),日历(calendar),颜色挑选(color picker),数据表(data table),日志(logger),菜单(menu)等等。

使用很简单,以日历控件为例:

<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.2.0/build/calendar/assets/calendar.css">
<script type="text/javascript" src="http://yui.yahooapis.com/2.2.0/build/yahoo-dom-event/yahoo-dom-event.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.2.0/build/calendar/calendar-min.js"></script>
<span id="cal1Container" style="width: 200px; display: block; float: none"></span>
<input id="obj_test" name="obj[test]" readonly="yes" size="12" value="2007-11-14" />
<script type="text/javascript">
     function selectDay(stuff, days) {
          $('obj_test').value = "" + days[0][0][0] + "/" + days[0][0][1] + "/" + days[0][0][2]
     }
     cal1 = new YAHOO.widget.Calendar("cal1","cal1Container");
     cal1.cfg.setProperty("selected","2007-11-14",false);
     cal1.render();
     cal1.selectEvent.subscribe(selectDay);
</script>

效果如下,文本框会跟随日期的改变而改变:



貌似需要一个rYUI项目让事情变得更简单一些?

This entry was posted in JS. Bookmark the permalink. Post a comment or leave a trackback: Trackback URL.
  • http://www.nowazhu.com nowa

    淘宝有一个tbra的项目,可以尝试下,封装了不少。

  • admin

    刚看了下,TBra也是基于YUI的,名字猥琐了那么一点。

    http://ued.taobao.com/blog/lab/

    不过根据地址点进去,两个项目(还有一个是YUI汉化)都是空的,没有任何文件和文档

  • leondu

    或者考虑下extjs(extjs.com)?

  • admin

    extjs? 没接触过,等有空了看一下

  • http://chuangyiji.com/2007/12/07/%e7%bd%91%e7%ab%99%e9%a1%b9%e7%9b%ae1%e5%88%a9%e7%94%a8ajax%e5%92%8cjs%e6%9d%a5%e5%ae%9e%e7%8e%b0%e7%b1%bbwindows%e7%95%8c%e9%9d%a2/ 网站项目1:利用ajax和js来实现类windows界面 at 创意纪

    [...] table),日志(logger),菜单(menu)等等。(中文定义来自这里)。目前网站上的最新版本是2.4,下面是Yahoo [...]

无觅相关文章插件,快速提升流量