Yahoo! UI Library简介

转自: 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 声明来排除页面的空白部分并且公共元素的样式兼容各种浏览器的展现。  

 

posted on 2009-05-10 19:20 luofeng225 阅读(915) 评论(0)  编辑  收藏 所属分类: Ajax


只有注册用户登录后才能发表评论。


网站导航:
 
<2009年5月>
日一二三四五六
262728293012
3456789
10111213141516
17181920212223
24252627282930
31123456

导航

统计

公告

我曾经听到这么一个故事: 一个年轻的程序员问一个老程序员(一个比较牛逼的公司的CTO) 年轻程序员: 你为什么这么牛X., 就好像没有你不会的。老程序员: 积累的。年轻程序员: 怎么才能积累到您的程度呢。我每天都在积累。但是似乎都没有感觉到进步。老程序员: 我从20岁开始做到了一件事情,直到今天,而且尽可能地保证不间断。年轻程序员: 到底是什么? 老程序员: 我每天保证自己有2个小时在学习新的东西。

常用链接

留言簿(3)

随笔分类

随笔档案

文章分类

相册

收藏夹

Java Website

java技术博客

搜索

最新评论

阅读排行榜

评论排行榜