什么是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

什么是YUI?YUI简介相关推荐

  1. YahooUI库(YUI)简介

    Yahoo! UI Library (YUI ) 是一个开放源代码的 JavaScript 函数库,为了能建立一个高互动的网页,它采用了AJAX, DHTML 和 DOM 等程式码技术.它也包含了许多 ...

  2. YUI(Yahoo User Interface)介绍

    在Web 2.0中,SaaS前端不再是一个简单网页.它可以拥有非常Cool的界面,它也可以拥有非常复杂的逻辑.现在,构建一个复杂的SaaS前段界面主要有下面三种技术路线: DHTML(HTML,CSS ...

  3. jquery和yui的比较

    jQuery (不包括jQuery UI之类的增强及插件) 更多的好象一个基本的工具类,涵盖了DOM操作,Event绑定,基本动画,Ajax封闭,以及大量的工具方式,便利的语法结构.简单的插件机制. ...

  4. 前端框架——BootStrap学习

    BootStrap简单总结下:1.栅格系统,能够很好的同时适应手机端和PC端(及传说中的响应式布局) 2.兼容性好 接下来是对BootStrap学习的一些基础案例总结和回顾: 首先引入:bootstr ...

  5. 第十一章:WEB浏览器中的javascript

    客户端javascript涵盖在本系列的第二部分第10章,主要讲解javascript是如何在web浏览器中实现的,这些章节介绍了大量的脚本宿主对象,这些对象可以表示浏览器窗口.文档树的内容.这些章节 ...

  6. Yahoo! UI Library入门

    ! User Interface Library(简称yui) 是一个使用Javascrīpt编写的工具和控件库.它利用DOM脚本,DHTML和AJAX来构造具有丰富交互功能的Web程序.yui也包含 ...

  7. Bootstrap 学习笔记8 下拉菜单滚动监听

    代码部分: <nav class="navbar navbar-default"><a href="#" class="navbar ...

  8. [JavaScript]项目优化总结

    前端时间对公司已有项目JavaScript代码进行优化,本文的是对优化工作的一个总结,拿出来与大家分享.当然我的优化方式可能并不是最优的,或者说有些不对的地方,请指教. 目录 JavaScript优化 ...

  9. Liferay MinifierFilter的研究

    大家都知道,在Web应用程序中,为了节省网络开销,往往吧多个小的js文件整合成一个大的js文件,吧多个小的css文件整合成一个大的js文件,这样原本N次小文件的请求就可以合并成单次的网络请求.最典型的 ...

最新文章

  1. 我的2011就这样混掉了
  2. Intel Realsense D435 连续验证 摄像头初始化 hardware_reset() 失败案例
  3. java定时器的使用
  4. 1960 范德蒙矩阵(数学贪心)
  5. 【三分钟讲清区块链/比特币】之二:比特币入门教程
  6. ubuntu+idea intellij配置android开发环境
  7. JavaWeb--JavaEE
  8. 设计模式学习---单件模式
  9. php7.2连接mysql8_兼容 php 7.2 及 mysql 8
  10. 插入排序——3希尔排序实现
  11. [Pro]斐波那契数列阿【斐波那契数列】
  12. [转]更改windows 2003远程桌面连接的端口
  13. word转PDF(使用liberOffice插件)
  14. 暴风雨前的耳聋:普京在9·11前两天致电布什,警告可能发生恐袭
  15. 富士施乐p355d_富士施乐p355d驱动下载
  16. 游戏引擎笔记(三)天空盒和水面
  17. 大盘点:英特尔®傲腾™突破存储瓶颈的十大价值点
  18. 在日本做科研工作是怎样的体验?
  19. 图片怎么转换为jpg格式的?照片如何在线转格式?
  20. 通过JS解析手机浏览器UA标志中的各种设备信息

热门文章

  1. php+银行卡空格,***解决PHP输出多余的空格或换行
  2. 华为公布新运营商BG总裁/ 苏州超算中心顶楼起火/ 马斯克卖香水赚700万…今日更多新鲜事在此...
  3. C++学习笔记(六)输入输出与文件读写
  4. python利用 while 循环输出 100 以内偶数
  5. 《PHP面向对象编程详解》系列技术文章整理收藏
  6. 乐学偶得QA:Git 下载下来无法安装怎么办
  7. linux笔记本装载 戴尔,第七代戴尔XPS 13开发版笔记本电脑装载Ubuntu 18.04系统
  8. Ubuntu 18.04 安装 GeForce RTX 2080 Ti
  9. Ubuntu系统连接蓝牙鼠标失败问题解决办法
  10. Map集合,File类,IO流