14th Nov, 2007

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项目让事情变得更简单一些?

评论

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

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

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

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

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

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

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

留条评论?

Your response:

Categories