[yui][译]Yahoo!User Interface Libray 介绍

简介:

[yui]Yahoo!User Interface Libray 介绍

                                -Written by 浪子@cnblogs.com  (06-08-21)

第一章 简介

Yahoo! User Interface Library(简称yui) 是一个使用JavaScript编写的工具和控件库。它利用DOM脚本,DHTML和AJAX来构造具有丰富交互功能的Web程序。yui也包含几个核心的CSS文件。yui中的所有组件已经以开源的形式发布,它们遵循BSD协议并且可以免费使用。可以从Sourceforge站点下载完整的项目文件,同时包含相关文档和示例。

yui项目开发人员的BLOG:YUI Blog,交流社区:ydn-javaScript on Yahoo! Groups

准备工作:

1、 下载yui

yui项目文件已经发布在Sourceforge站点,文件包含相关文档,示例和代码。

注:Yahoo没有为yui的运行提供免费的运行环境,你需要运行在你在即Web服务器上。

2、 在你的网页中加入你需要的类库文件

为了使用yui中的组件你必须在你的页面文件中用<script>指定相关组件的类库文件地址。如果该组件依赖于其他组件,你必须使用<script>指定所依赖的组件的类库文件地址。

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



本文转自浪子博客园博客,原文链接:http://www.cnblogs.com/walkingboy/archive/2006/08/21/yui_intro.html,如需转载请自行联系原作者
目录
相关文章
|
4月前
Angular获取Location对象,获取当前网页url、hash、hostname、href、pathname、port、protocal
Angular获取Location对象,获取当前网页url、hash、hostname、href、pathname、port、protocal
|
9月前
Pingdom Website Speed Test
在Pingdom输入 URL 地址,即可测试页面加载速度,分析并找出性能瓶颈。帮助用户找出影响网站速度的原因,并给出改善网页性能的可行性方案,很适合做网站的用户。
37 0
|
程序员 iOS开发 开发者
iOS开发:报错‘Unknown class ViewController in Interface Builder file’解决方法
在iOS开发过程中,会遇到一些比较常见的错误,尤其是刚入门的初级开发者,如果不熟练的话就会出错,本篇博文就来分享一个常见的问题,即报错‘Unknown class ViewController in Interface Builder file’的解决方法。
273 1
iOS开发:报错‘Unknown class ViewController in Interface Builder file’解决方法
How to render S4 Code List extension field into CRM WebUI product search view
This question is asked by Wade. Suppose I have created one extension field in S4 with type CodeList which contains all possible queue type supported by JDK. This extension field must be exposed to CRM Product Search WebUI. POC is done in X3C/504:
How to render S4 Code List extension field into CRM WebUI product search view
SAP Spartacus lazy load 的一个例子 - User Module
SAP Spartacus lazy load 的一个例子 - User Module
85 0
SAP Spartacus lazy load 的一个例子 - User Module
|
存储 Windows
Window“.NET研究”s Phone 7 Tips (2)
  上一篇Tips:Windows Phone 7 Tips (1), 今天也是分享10个Windows Phone 7 技巧,并提供离线文档下载。  1. 在Windows Phone 7中最简单的操作IsolatedStorge的代码: SaveNote()将文本框内容保存到Note.txt中,Edit()读取Note.txt到文本框中。
991 0
|
XML Java 数据格式
Myeclipse中java web.xml报错cvc-complex-type.2.3: Element 'web-app' cannot have character [children], because the type's content type is element- only.
web.xml文件添加servlet访问限制后出现如下错误:   cvc-complex-type.2.3: Element 'web-app' cannot have character [children], because the type's content type is element- only. 翻译:   cvc-complex-type.2.3:元素'web-app'不能包含character [children],因为该类型的内容类型是仅包含元素的。
3798 0
|
JavaScript 前端开发

热门文章

最新文章