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

转载于:https://blog.51cto.com/newhappy/76855

Yahoo! UI Library入门相关推荐

  1. [转]WIN MOBILE UI开发入门

    标 题: [原创]WIN MOBILE UI开发入门 作 者: 打小 时 间: 2009-06-06,12:17:14 链 接: http://bbs.pediy.com/showthread.php ...

  2. UI设计入门:五种基本APP界面类型【萧蕊冰】

    今天这篇是一个UI设计入门:五种基本APP界面类型的欣赏.随着互联网的发展和智能手机的普及,移动应用成了大家最热爱的宠儿,许多移动APP也会根据用户的需求来随时替换本身的UI设计.本篇UI设计入门分享 ...

  3. 【组件-工具】小程序ui组件Color UI快速入门

    小程序ui组件Color UI快速入门 什么是ColorUI ColorUI是UI组件库!不是一个Js框架.相比于同类小程序组件库,ColorUI更注重于视觉交互,样式更加华丽精美,使用方法简单,只需 ...

  4. UI设计入门知识有哪些 怎么掌握图标设计原则

    UI设计入门知识有哪些?怎么掌握图标设计原则?随着用户体验及审美度的变化,产品界面也在相应的改变,图标作为UI设计师的吸粉利器,被看做是世界上最通用的图形语言.如何才能快速准确地把握图标,掌握图标设计 ...

  5. 怎么学UI设计入门知识 图标设计要遵守哪些原则

    怎么学UI设计入门知识?图标设计要遵守哪些原则?随着用户体验及审美度的变化,产品界面也在相应的改变,图标作为UI设计师的吸粉利器,被看做是世界上最通用的图形语言.如何才能快速准确地把握图标,掌握图标设 ...

  6. 怎么学ui设计入门?怎样才能少走弯路?

    很多人错误地将工具作为学习UI设计的入门课,其实入门UI设计最好是选择美术基础.设计理论.很多自学UI设计的小伙伴,都会出现这样一种现象,会使用工具但是在了解真实的需求后却完全动不了手. 这里给想要入 ...

  7. 【干货】磨金石教育UI快速入门!U设计基础知识整理,新人必备

    今天 磨金石教育 小编 整理 出了一篇 关于 UI 的概念 .UI 入门 需要 掌握 的软件工具 .理论知识 以及 能力 要求 ,希望 能够 为想要 进入 这个 领域 的伙伴 带来 帮助 . UI设计 ...

  8. UI设计入门知识大全!零基础小白必看

    很多零基础入门UI设计的朋友们,可能对于学习UI有很多疑问,今天我就来简单回复一些大家常问的问题吧~ 1.UI设计是什么? UI即User Interface(用户界面),简称UI,是指对软件的人机交 ...

  9. BCGControlBar UI设计入门:如何创建第一个MFC应用程序

    BCGControlBar ("Business Components Gallery ControlBar")是MFC扩展库,使您可以创建具有完全自定义选项(功能区.可自定义工具 ...

最新文章

  1. LeetCode实战:反转字符串
  2. iOS开发日记1-tableview编辑
  3. 自定义ListView【通用】适配器并实现监听控件
  4. 论文笔记:Group Equivariant Convolutional Networks
  5. mysql 主从同步配置
  6. 【lLinux驱动】linux内核源码目录结构
  7. 使用GitHub构建个人博客网站
  8. POJ 2018 Best Cow Fences (二分答案构造新权值 or 斜率优化)
  9. 程序结束后去哪儿了?
  10. 树莓派能做什么_使用树莓派做两轮自平衡车(一)
  11. 华为音量键只能调通话_手机音量键还在以为只能调音量?别傻了,赶紧看看下文绝对涨知识!...
  12. Android 记忆卡片游戏 记忆力 Android游戏 Android记忆卡片游戏源代码
  13. android 生成 kml代码,android 导入KML文件
  14. Android性能测试
  15. 赵荣人文地理学第2版笔记和课后答案
  16. 全拼到缩写月份单词python_月份的英文缩写及全名
  17. 【Arduino】WIN7装不上arduino驱动解决办法
  18. linux uvc 拍照程序,Linux UVC driver
  19. LeetCode两个爬楼梯题目解析(动态规划)
  20. Tmux常用命令小结(超全够用)

热门文章

  1. 打包跳过编译_Apache Flink v1.9-SNAPSHOT 源码编译
  2. 多类感知器算法题目_先进算法讲解
  3. matlab需要多大运存_提高matlab运行效率
  4. 使用Spring框架开发会遇到的所有异常及解决方案(持续更)
  5. 【c++】29.设计模式总结
  6. 《深入理解java虚拟机》笔记2——GC算法与内存分配策略
  7. 让你彻底理解Synchronized
  8. 从Java多线程可见性谈Happens-Before原则
  9. Spring Validation(使用Hibernate Validator)
  10. Java assertion 介绍和用法