Yahoo! UI Library入门

简介: 简介 Yahoo! User Interface Library(简称yui) 是一个使用Javascrīpt编写的工具和控件库。
简介
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声明来排除页面的空白部分并且公共元素的样式兼容各种浏览器的展现。  

相关文章
XR Interaction Toolkit教程⭐三、实现抓取和交互功能
XR Interaction Toolkit教程⭐三、实现抓取和交互功能
|
4月前
|
编解码 前端开发
XR Interaction Toolkit教程⭐四、实现与UI交互
XR Interaction Toolkit教程⭐四、实现与UI交互
|
定位技术 数据库
Win之Software Installation:谷歌地球(Google Earth) 的简介、安装、使用方法之详细攻略
Win之Software Installation:谷歌地球(Google Earth) 的简介、安装、使用方法之详细攻略
Win之Software Installation:谷歌地球(Google Earth) 的简介、安装、使用方法之详细攻略
|
移动开发 机器人 数据安全/隐私保护
RobotFramework RobotFramework官方demo Quick Start Guide浅析
RobotFramework RobotFramework官方demo Quick Start Guide浅析
114 0
|
Java BI 开发框架
pentaho Report Designer 入门教程(二)
       采用Pentaho Report Designer5.1版本,也是最新的版本。 一、       安装和介绍 介绍部分内容略,首先安装jdk,并配置java相关环境变量,下载pentaho report并解压,直接运行即可。 二、       第一个示例 三、在Swing程序中集成 示例程序主要有三个部分,程序目录如下图:
3564 0
|
XML 存储 SQL
Google Architecture Components应用框架初探
Google Architecture Components应用框架初探
330 0
Google Architecture Components应用框架初探
|
JavaScript Linux 开发工具
APICloud-Tools-Core-APICloud 开发工具核心库
APICloud 开发工具核心库,支持新建页面模板,新建应用模板,WiFi 同步等核心功能。 开发者可基于此核心库,定制各种编辑器插件或者将 APICloud 的开发调试功能与已有的自动化业务流程结合,提升开发效率。
146 0
|
Web App开发 移动开发 JavaScript
使用Google App Engine、Google Closure Library与Clojure编写HTML5应用
上周,Freiheit.com的CTO Stefan Richter在慕尼黑举办的Google开发者日上谈到了他对于使用HTML 5与Google App Engine编写富Internet应用的愿景。
928 0
|
Web App开发 前端开发 JavaScript