转自:
http://blog.csdn.net/newhappy2008/archive/2007/06/23/1663987.aspx
简介
Yahoo! User Interface Library(
简称
yui)
是一个使用
Javascrīpt
编写的工具和控件库。它利用
DOM
脚本
,DHTML
和
AJAX
来构造具有丰富交互功能的
Web
程序。
yui
也包含几个核心
的
CSS
文件。
yui
中的所有组件已经以开源的形式发布,它们遵循
BSD
协议并且可以免费使用。可以从
Sourceforge
站点下载完整的项目文件,同
时包含相关文档和示例。
yui
项目开发人员的
BLOG
:
YUI Blog
,交流社区:
ydn-javascrīpt on Yahoo! Groups
。
准备工作:
1
、
下载
yui
yui
项目文件已经发布在
Sourceforge
站点,文件包含相关文档,示例和代码。
注:
Yahoo
没有为
yui
的运行提供免费的运行环境,你需要运行在你在即
Web
服务器上。
2
、
在你的网页中加入你需要的类库文件
为了使用
yui
中的组件你必须在你的页面文件中用
<scrīpt>
指定相关组件的类库文件地址。如果该组件依赖于其他组件,你必须使用
<scrīpt>
指定所依赖的组件的类库文件地址。
3
、
如果有必要,在页面中加入
CSS
文件
某些
yui
的控件包含一个相应的
CSS
文件,用来设定控件的样式。此时,你必须在页面中使用
<style>
指定相应的
CSS
文件的地址。你可以通过修改相应的
CSS
文件达到你想要的效果。
4
、
浏览相关文档和示例
每一个组件都包含详细的
API
文档,并且提供了常用的例子。学习完后,回顾一下所有的
API
,做到心中有数。因为对于
API
理解的好坏将影响你对
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
的
Javascrīpt
控制台。
yui
的
Debug
组件将完整的记录输出信息和调试信息。
菜单(
Menu
)控件
:利用此控件只需要几行简单的代码就可以设计一个动态样式的菜单。可以完全使用
javascrīpt
构造一个菜单,
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
声明来排除页面的空白部分并且公共元素的样式兼容各种浏览器的展现。