什么是YUI?YUI简介

什么是YUI?

按照官方解释就是“The Yahoo! User Interface Library (YUI)”，中文说过来就是“雅虎 用户接口库(简称YUI)”--我个人喜欢说法是  
“Yahoo用户界面库”，它是一个使用JavaScript编写的工具和控件库。它利用DOM脚本,DHTML和AJAX来构造具有丰富交互功能的Web程序。yui
也包含几个核心的CSS文件。yui中的所有组件已经以开源的形式发布，它们遵循BSD协议并且可以免费使用。可以从
http://developer.yahoo.com/yui/ 站点下载完整的项目文件，以及开源站点Sourceforge站点下载完整的项目文件，同时包含相关文档和示例
。同时包含相关文档和示例(正因为yui的文档很详细，所以网上基本上比较少有别人写新的文章)。  
呵呵 大家英文都不太好，可以看看这个网址：
http://www.worldlingo.com/wl/services/S1790.5/translation?wl_srclang=PT&wl_trglang=zh_cn&wl_url=http%3A%2F%
2Fdeveloper.yahoo.com%2Fyui%2F
(一模一样的yahoo中文YUI 站点)

1、 下载YUI

现在最新版本是2.3.1 大小是6M，
下载地址：http://developer.yahoo.com/yui/
http://sourceforge.net/projects/yui/

Yui组件分成2类：工具包和控件库  

Yui 工具包  

Yui 工具包利用DOM脚本来简化浏览器内的开发（in-browser devolvement），使用DHTML和AJAX的特性开发所有的Web程序。  

动画（Animation）：在你的页面中通过指定位置，大小，透明度或者页面元素的其他特性来创建一个“电影效果（cinematic effects）”。
这些效果将在你的页面发生变化的时候给用户更好的体验。  

连接管理（Connection Manager ）：这个工具包帮助你管理XMLHttpRequest（一般被称为AJAX）事务，它提供对表单提交（form posts），错
误捕获（error handling）和callbacks的全面支持。该工具包也支持文件的上传管理。  

DOM：DOM工具包提供更简单的DOM脚本的功能调用方式，包含元素的位置和CSS样式的管理。  

拖放（Drag and Drop）：创建可拖放的对象。为了提供丰富的交互功能（比如拖动一个对象到目标位置）你可能需要编写很多代码。这个工具
包可以在所有支持的浏览器中捕获所有的操作事务并保证其稳定地运行。  

事件（Event）：这个神奇的管理类库给你提供一种简单安全的方法访问浏览器的事件（比如点击和键盘操作）。这个事件封包中还包含了自定
义事件对象，它为你的程序交互提供一种发布和订阅事件的机制。  
  

yui控件：  

yui控件库为你页面提供一组高交互性性的可视化元素。这些元素完全在客户端创建维护，不需要请求服务器进行页面刷新。  

这些控件包括：  

自动完成（AutoComplete）控件：自动完成控件为文本输入提供一种渐进式的用户体验（streamline user interactions）。控件会提供相似
项列表和基于多样化的数据格式的提前键入功能（type-ahead functionality based on a variety of data-source formats），并且可以通
过XMLHttpRequest访问服务端的数据。  

日历（Calendar）控件：一个用来日期选择的动态图形控件。  

容器（Container）控件：一组模仿windows样式的控件，他们包括Tooltip, Panel, Dialog 和 SimpleDialog。其中Module 和 Overlay控件提
供一个可扩展的平台，你可以控制自定义的模仿windows样式的控件。  

日志（Logger）控件：提供一个快速和简单的记录日志的方式，它直接将日志信息输出到屏幕控制台（on-screen console）、Firefox的扩展
组件FireBug，或者Safari的Javascript控制台。yui的Debug组件将完整的记录输出信息和调试信息。  

菜单（Menu）控件：利用此控件只需要几行简单的代码就可以设计一个动态样式的菜单。可以完全使用javascript构造一个菜单，can be  
layered on top of semantic unordered lists。  

滑块（Slider）控件：提供一个可滑动的组件，它允许使用者在一定的范围内（x轴，y轴）改变滑块的位置。  

树形（TreeView）控件：提供一个节点可缩放的树形控件。节点可以是链接，自定义属性，并且可以动态加载。节点元素的展现可以通过CSS修改，比如文件夹视图，TO－DO任务列表或者其他可视化处理  
   

第三章 yui的CSS资源  

为了让CSS能符合不同等级的浏览器（A-Grade browsers）的标准，把这些作为yui类库的一部分共享出来，希望能在这里得到促进，获得一个简洁的，可维护并在浏览器中表现优秀的设计。  

页面网格样式（CSS Page Grids）：7个基本的用css组织子组件的页面框架，支持130种不通的页面布局。  

标准的CSS字体（Standard CSS Fonts）：标准的跨浏览器字体样式和大小展现。  

标准的CSS排列（Standard CSS Reset）：使用这些CSS声明来排除页面的空白部分并且公共元素的样式兼容各种浏览器的展现。


Yahoo YUI的Ajax工具包

雅虎前不久推出了称为YUI的Ajax工具包,同时Yahoo发表了一系列的Ajax设计模式. Yahoo的这些工具包是Yahoo在收购了多个Web2.0网站后推出的Ajax工具包，代码的注释也写的很好，文档也很丰富和详尽。

YUI的组件也在不断的增加中，yahoo为YUI设了一个Yahoo用户组，里面的邮件很活跃，问的问题基本都有人回答，而且比较细致和具体。

YUI分为两个大类,一个是Ajax组件,里面包括对底层javascript包装后的几个工具包,分别是connection,event, dom,animation,dnd.还包括一组高级的javascript控件，目前包括AutoComplete,Calendar, Container,Menu,Slider,TreeView.

另一类是几个很有用的几个CSS文件，一个是CSS Page Grids，用它可以很方便的布局你的网页。另外两个是Standard CSS Fonts和Standard CSS Reset,利用这两个CSS可以对字体等在不同浏览器中获得一致的效果.

Yahoo的Ajax设计模式是在目前的WEB2.0网站中常用的一些改善用户体验,增强交互效果的文章,格式和Design Pattern类似.有时会提供一些例子网站或网页,当然都是yahoo自己的几个网站,上面的javascript可能还没有整理到YUI里面去,但是 也都是格式化很好的javascript,也没有混淆.

参考：
浪子http://www.cnblogs.com/walkingboy/archive/2006/08/21/yui_intro.html



作者：richyue
来自：it学习网原创
更新日志:
参考文档:
致谢：
讨论网址：
标签(Tag)：YUI
该文章转载自IT学习网：http://www.itstudy.cn/www/ArticleContent.asp?id=12

转载于:https://www.cnblogs.com/showz_y/archive/2008/08/22/1273682.html