YUI Tree入门（一）

最新推荐文章于 2019-03-31 21:57:07 发布

meladet

最新推荐文章于 2019-03-31 21:57:07 发布

阅读量230

点赞数

分类专栏： Javascript 文章标签： YUI CSS Yahoo Ajax JavaScript ViewUI

Javascript 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

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

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

YUI TreeView是YUI提供的众多组件中的一种，先看一下TreeView组件的目录结构：
[img]http://meladet.iteye.com/upload/picture/pic/40588/de084a48-6edb-3589-9ec5-04f899e2b175.png[/img]
Treeview的结构很清晰，就是一些CSS、图片和Js文件，assets文件里面的是跟组件样式相关的文件，如果要扩展树，可以修改这里面的treeview.css等，可以自己添加图片。Js文件是TreeView的核心，里面有TreeView的功能实现以及各种Node的声明。下面先看看YUI TreeViewz中有哪些类：
[img]http://meladet.iteye.com/upload/picture/pic/40590/683be4ff-05f3-3013-b243-865800184465.png[/img]
以后会对这写Node作详细的说明，现在先了解YUI中有哪些可以直接使用的Node，先看一个简单的例子，用YUI中提供TextNode生成一棵简单的树：
[img]http://meladet.iteye.com/upload/picture/pic/40592/682c55ca-e7a3-3d70-8130-a6d43b4cefba.png[/img]
下面是代码：


<!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方法把树显示出来。

meladet

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
YUI Tree入门（一）

有段时间做开发前台，使用到了YUI。YUI提供了很多实用的工具和组件，不过在工作中只使用到了很少的一部分。其中TreeView和TabView一直都在使用，期间也对这两个组件做了一些扩展，使用中得到一些心得，记录下来希望能对一些人有帮助。先对YUI做一些简单的介绍，写一个Tree使用的简单例子，这些例子中没有涉及到什么新的东西，与YUI文档中给的例子一样。对于使用过YUI Tr...
复制链接

扫一扫