Yahoo! UI Library入门

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









本文转自 牛海彬 51CTO博客,原文链接:http://blog.51cto.com/newhappy/76855,如需转载请自行联系原作者
目录
相关文章
|
2月前
|
开发框架 前端开发 .NET
七天.NET 8操作SQLite入门到实战 - (1)第七天BootstrapBlazor UI组件库引入
七天.NET 8操作SQLite入门到实战 - (1)第七天BootstrapBlazor UI组件库引入
|
2月前
|
XML API Android开发
【Android 从入门到出门】第三章:使用Hilt处理Jetpack Compose UI状态
【Android 从入门到出门】第三章:使用Hilt处理Jetpack Compose UI状态
50 4
|
2月前
|
存储 XML 编译器
【Android 从入门到出门】第二章:使用声明式UI创建屏幕并探索组合原则
【Android 从入门到出门】第二章:使用声明式UI创建屏幕并探索组合原则
66 3
|
10月前
|
前端开发 测试技术 API
SAP UI5 Theme Library 的解析逻辑和 SAP UI5 配置元数据的默认值
SAP UI5 Theme Library 的解析逻辑和 SAP UI5 配置元数据的默认值
|
10月前
|
前端开发 搜索推荐
SAP 电商云 Spartacus UI 的 style library 介绍
SAP 电商云 Spartacus UI 的 style library 介绍
|
10月前
|
Web App开发 Dart 开发工具
谷歌移动UI框架Flutter入门
谷歌移动UI框架Flutter入门
|
JSON 小程序 前端开发
uni-app入门:小程序UI组件Vant Weapp
Vant Weapp 是一个轻量、可靠的移动端组件库,于 2017 年开源,是由有赞前端团队开源的小程序UI组件库,可以简化小程序开发。
uni-app入门:小程序UI组件Vant Weapp
|
资源调度 前端开发
阅读源码入门实践系列之 element ui(1)
阅读源码入门实践系列之 element ui(1)
138 1
|
Kubernetes 关系型数据库 数据库
基础设施即代码(IAC),Zalando Postgres Operator UI 入门
基础设施即代码(IAC),Zalando Postgres Operator UI 入门
123 0
基础设施即代码(IAC),Zalando Postgres Operator UI 入门
|
移动开发 前端开发 JavaScript
HaaS UI小程序解决方案进阶教学之一:Canvas画图入门
canvas的应用场景非常多,主要运用在一些需要操作图形的场景,如绘制曲线、特效、粒子特效、图表、游戏、二维码、条形码等等场景。
HaaS UI小程序解决方案进阶教学之一:Canvas画图入门