YUI Tree入门（一） -

meladet

浏览: 27248 次
性别:
来自: 杭州

最近访客更多访客>>

Java_peggy

jaysuba

xxssqq

carlglf

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

YUI Tree入门（一）

博客分类：

Javascript

YUI CSS Yahoo Ajax JavaScript

    有段时间做开发前台，使用到了YUI。YUI提供了很多实用的工具和组件，不过在工作中只使用到了很少的一部分。其中TreeView和TabView一直都在使用，期间也对这两个组件做了一些扩展，使用中得到一些心得，记录下来希望能对一些人有帮助。
    先对YUI做一些简单的介绍，写一个Tree使用的简单例子，这些例子中没有涉及到什么新的东西，与YUI文档中给的例子一样。对于使用过YUI Tree的人应该都了解这些。之后对Tree中涉及到的类和类之间的关系做一些讲解，结合源代码。最后就是对树做一些扩展。

    Yahoo! User Interface Library(简称YUI) 是一个使用Javascript编写的工具和控件库。它利用DOM脚本,DHTML和AJAX来构造具有丰富交互功能的Web程序。YUI也包含几个核心的CSS文件，YUI组件分成2类：工具包和控件库。
•YUI工具包：
    Animation Utility
动画（Animation）：在你的页面中通过指定位置，大小，透明度或者页面元素的其他特性来创建一个"电影效果（cinematic effects）"。这些效果将在你的页面发生变化的时候给用户更好的体验。
    Browser History Manager
    Connection Manager (for XHR/Ajax)
连接管理（Connection Manager）：这个工具包帮助你管理XMLHttpRequest（一般被称为AJAX）事务，它提供对表单提交（form posts），错误捕获（error handling）和callbacks的全面支持。该工具包也支持文件的上传管理。
    DataSource Utility
数据源工具：
    Drag and Drop Utility
拖放（Drag and Drop）：创建可拖放的对象。为了提供丰富的交互功能（比如拖动一个对象到目标位置）你可能需要编写很多代码。这个工具包可以在所有支持的浏览器中捕获所有的操作事务并保证其稳定地运行。
    Element Utility
    Get Utility
动态的添加外部Javascript和CSS。
    ImageLoader Utility
加载图像工具
    JSON Utility
这将做解析JSON的首选组件。
    Profiler
通过编程方式查看应用的动行情况。可以很方便的观察程序的执行性能。
    Selector Utility
实现用类似CSS Selector的方式收集Node元素。最常用的方法query()。
•YUI控件：
    AutoComplete
自动完成控件为文本输入提供一种渐进式的用户体验（streamline user interactions）。控件会提供相似项列表和基于多样化的数据格式的提前键入功能（type-ahead functionality based on a variety of data-source formats），并且可以通过XMLHttpRequest访问服务端的数据。
    Button
一个按钮控件
    Calendar
一个用来日期选择的动态图形控件
    Charts [experimental]
混合了javascript和flash，支持显示条形，曲线和饼图。
    Color Picker
一个选择颜色的控件
    Container (including Module, Overlay, Panel, Tooltip, Dialog, SimpleDialog)
一组模仿windows样式的控件，他们包括Tooltip, Panel, Dialog 和 SimpleDialog。其中Module 和 Overlay控件提供一个可扩展的平台，你可以控制自定义的模仿windows样式的控件
    DataTable
表格及其相关操作
    Logger
提供一个快速和简单的记录日志的方式，它直接将日志信息输出到屏幕控制台（on-screen console）、Firefox的扩展组件FireBug，或者Safari的Javascrīpt控制台。yui的Debug组件将完整的记录输出信息和调试信息。
    Menu
利用此控件只需要几行简单的代码就可以设计一个动态样式的菜单。可以完全使用javascrīpt构造一个菜单，can be layered on top of semantic unordered lists。
   Rich Text Editor
类似word的一个文本编辑器
    Slider
提供一个可滑动的组件，它允许使用者在一定的范围内（x轴，y轴）改变滑块的位置。
    TabView
    TreeView
提供一个节点可缩放的树形控件。节点可以是链接，自定义属性，并且可以动态加载。节点元素的展现可以通过CSS修改，比如文件夹视图，TO－DO任务列表或者其他可视化处理
•YUI的CSS资源
    CSS Reset (neutralizes browser CSS styles)
标准的CSS排列（Standard CSS Reset）：使用这些CSS声明来排除页面的空白部分并且公共元素的样式兼容各种浏览器的展现。
    CSS Base (applies consistent style foundation for common elements)
    CSS Fonts (foundation for typography and font-sizing)
标准的CSS字体（Standard CSS Fonts）：标准的跨浏览器字体样式和大小展现。
    CSS Grids (more than 1,000 CSS-driven wireframes in a 4KB file)
页面网格样式（CSS Page Grids）：7个基本的用css组织子组件的页面框架，支持130种不通的页面布局。

YUI TreeView是YUI提供的众多组件中的一种，先看一下TreeView组件的目录结构：

Treeview的结构很清晰，就是一些CSS、图片和Js文件，assets文件里面的是跟组件样式相关的文件，如果要扩展树，可以修改这里面的treeview.css等，可以自己添加图片。Js文件是TreeView的核心，里面有TreeView的功能实现以及各种Node的声明。下面先看看YUI TreeViewz中有哪些类：

以后会对这写Node作详细的说明，现在先了解YUI中有哪些可以直接使用的Node，先看一个简单的例子，用YUI中提供TextNode生成一棵简单的树：

下面是代码：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>YUI Tree Test</title>
		<link rel="stylesheet" type="text/css" href="build/fonts/fonts-min.css" />
		<link rel="stylesheet" type="text/css" href="build/treeview/assets/skins/sam/treeview.css" />
		<script type="text/javascript" src="build/yahoo/yahoo.js"></script>
		<script type="text/javascript" src="build/event/event.js"></script>
		<script type="text/javascript" src="build/treeview/treeview.js"></script>
		
		<script type="text/javascript">
			function init(){
				var treeView = new YAHOO.widget.TreeView('demoTreeDiv');
				var node1 = new YAHOO.widget.TextNode("node",treeView.getRoot(),false);
				var node2 = new YAHOO.widget.TextNode("node1",node1,false);
				var node3 = new YAHOO.widget.TextNode("node2",node2,false);
				var node4 = new YAHOO.widget.TextNode("node3",node3,false);
				var node5 = new YAHOO.widget.TextNode("node4",node3,false);
				treeView.draw();
			}	
		</script>
	</head>
	<body onload="init()">
		<div id="demoTreeDiv" style="margin:10px; border:1px solid #EEE;"></div>
	</body>
</html>

要使用TreeView组件，需要先引入TreeView相关的Js和Css文件，从代码中可以看出，我们还引入了yahoo.js和event.js，yahoo.js这个文件包含了YUI中的一些全局对象以及全局方法，还有一些命名空间比如：YAHOO.widget，在TreeView中也有用到这些东西，所以需要把yahoo.js这个文件也引入。Event.js里面有一些事件操作方法，比如给一些组件绑定和监听事件之类的。
下面看树的构造过程：
1、从树的构造代码来看，生成一棵树需要一个TreeView，这个treeview与HTML中的某一个Div绑定，之后树就生成在这个Div中。
2、生成节点的时候用new YAHOO.widget.TextNode("node",treeView.getRoot(),false)，把节点挂载到Treeview的根结点之上，之后构造父子关系就很简单了，只要指定已经生成节点作为父亲就可以。
3、最后调用treeview的draw方法把树显示出来。

分享到：

YUI Tree入门（二）各类Node详细分析 | 常见的ruby内部变量

2009-07-17 16:10
浏览 3974
评论(3)
论坛回复 / 浏览 (3 / 5653)
分类:非技术
查看更多

3 楼 zhengjj_2009 2010-05-23

YUI2.8下用了你的例子，可以调试出你的例子。谢谢这个入门的帖子。

2 楼 zhenghaoju 2009-10-11

我用的是YUI2.8 试了你的例子 firebug报错 Dom is undefined
[Break on this error] this._el = Dom.get(id);\n

希望解决一下

1 楼 TTLtry 2009-08-14

接触YUI不久，不过感觉很不错，提供了很多控件 css资源

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

YUI Tree入门（一）

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

YUI Tree入门（一）

评论

发表评论

相关推荐

Javascript 继承小结

YUI Tree入门（三） 扩展Tree节点

YUI Tree入门（二）各类Node详细分析

最近访客更多访客>>

YUI Tree入门（三）扩展Tree节点