有段时间做开发前台，使用到了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方法把树显示出来。
分享到：
相关推荐
IEC 60364-7-722-2018 低压电气装置.第7-722部分：特殊装置或场所的要求.电动车辆的电源.pdf
、eNSP的安装 1．安装eNSP之前必须先安装以下三个插件： VirtualBox WinPcap Wireshack eNSP作为模拟器主体，需要对应版本的VirtualBox和WinPcap提供虚拟环境，Wireshack用于实验当中测试抓取数据包使用。 安装好这三个插件，只需要点下一步选择好对应的安装位置即可，然后就可以安装eNSP软件了。 eNSP的页面
附件是vmware虚拟机安装教程，文件绿色安全，请大家放心下载，仅供交流学习使用，无任何商业目的！
大屏网站粒子效果实现方式
Node.js，简称Node，是一个开源且跨平台的JavaScript运行时环境，它允许在浏览器外运行JavaScript代码。Node.js于2009年由Ryan Dahl创立，旨在创建高性能的Web服务器和网络应用程序。它基于Google Chrome的V8 JavaScript引擎，可以在Windows、Linux、Unix、Mac OS X等操作系统上运行。 Node.js的特点之一是事件驱动和非阻塞I/O模型，这使得它非常适合处理大量并发连接，从而在构建实时应用程序如在线游戏、聊天应用以及实时通讯服务时表现卓越。此外，Node.js使用了模块化的架构，通过npm（Node package manager，Node包管理器）,社区成员可以共享和复用代码，极大地促进了Node.js生态系统的发展和扩张。 Node.js不仅用于服务器端开发。随着技术的发展，它也被用于构建工具链、开发桌面应用程序、物联网设备等。Node.js能够处理文件系统、操作数据库、处理网络请求等，因此，开发者可以用JavaScript编写全栈应用程序，这一点大大提高了开发效率和便捷性。 在实践中，许多大型企业和组织已经采用Node.js作为其Web应用程序的开发平台，如Netflix、PayPal和Walmart等。它们利用Node.js提高了应用性能，简化了开发流程，并且能更快地响应市场需求。
KingbaseES的jar包
"想要快速掌握Python编程的基础知识吗？这个资源是您的最佳选择！它详细介绍了Python编程的基本知识点，包括数据类型、控制结构、函数、模块等内容，让您轻松入门Python编程。 无论您是编程初学者，还是有一定编程基础但希望深入学习Python的开发者，这个资源都适合您。它以通俗易懂的语言，配合实例演示，帮助您更好地理解和掌握Python编程的核心概念和技巧。 这个资源的使用场景非常广泛。您可以在学习Python编程的过程中，将其作为参考资料，随时查阅和巩固知识点。也可以在准备Python面试或考试时，通过这个资源进行复习和提升。此外，如果您是计算机相关专业的学生或教师，这个资源也可以作为教学资料，辅助教学和学习。 这个资源的优势在于它的全面性和实用性。它不仅涵盖了Python编程的基础知识点，还提供了一些实用的编程技巧和经验分享。通过学习这个资源，您将能够更加熟练地使用Python编程，解决实际问题和项目挑战。 如果您还在为找不到好的Python编程学习资源而苦恼，那么这个资源将是您的解决方案。它不仅能够帮助您快速入门Python编程，还能够为您的编程之路提供坚实的支持。还等什么
聚类分析（108页 PPT）
径硕科技：B2B企业如何一个人搭建内容营销体系？.pdf
ISO IEC 27001-2022 信息安全、网络安全和隐私保护信息安全管理系统要求.pdf
SMC 3.0 用户手册
Node.js，简称Node，是一个开源且跨平台的JavaScript运行时环境，它允许在浏览器外运行JavaScript代码。Node.js于2009年由Ryan Dahl创立，旨在创建高性能的Web服务器和网络应用程序。它基于Google Chrome的V8 JavaScript引擎，可以在Windows、Linux、Unix、Mac OS X等操作系统上运行。 Node.js的特点之一是事件驱动和非阻塞I/O模型，这使得它非常适合处理大量并发连接，从而在构建实时应用程序如在线游戏、聊天应用以及实时通讯服务时表现卓越。此外，Node.js使用了模块化的架构，通过npm（Node package manager，Node包管理器）,社区成员可以共享和复用代码，极大地促进了Node.js生态系统的发展和扩张。 Node.js不仅用于服务器端开发。随着技术的发展，它也被用于构建工具链、开发桌面应用程序、物联网设备等。Node.js能够处理文件系统、操作数据库、处理网络请求等，因此，开发者可以用JavaScript编写全栈应用程序，这一点大大提高了开发效率和便捷性。 在实践中，许多大型企业和组织已经采用Node.js作为其Web应用程序的开发平台，如Netflix、PayPal和Walmart等。它们利用Node.js提高了应用性能，简化了开发流程，并且能更快地响应市场需求。
Node.js，简称Node，是一个开源且跨平台的JavaScript运行时环境，它允许在浏览器外运行JavaScript代码。Node.js于2009年由Ryan Dahl创立，旨在创建高性能的Web服务器和网络应用程序。它基于Google Chrome的V8 JavaScript引擎，可以在Windows、Linux、Unix、Mac OS X等操作系统上运行。 Node.js的特点之一是事件驱动和非阻塞I/O模型，这使得它非常适合处理大量并发连接，从而在构建实时应用程序如在线游戏、聊天应用以及实时通讯服务时表现卓越。此外，Node.js使用了模块化的架构，通过npm（Node package manager，Node包管理器）,社区成员可以共享和复用代码，极大地促进了Node.js生态系统的发展和扩张。 Node.js不仅用于服务器端开发。随着技术的发展，它也被用于构建工具链、开发桌面应用程序、物联网设备等。Node.js能够处理文件系统、操作数据库、处理网络请求等，因此，开发者可以用JavaScript编写全栈应用程序，这一点大大提高了开发效率和便捷性。 在实践中，许多大型企业和组织已经采用Node.js作为其Web应用程序的开发平台，如Netflix、PayPal和Walmart等。它们利用Node.js提高了应用性能，简化了开发流程，并且能更快地响应市场需求。
C语言文件读写操作是C语言编程中的一个基础且重要的部分，它允许程序与磁盘上的文件进行交互，实现数据的存储和读取。以下是关于C语言文件读写操作代码的500字资源描述： C语言提供了丰富的文件操作函数，如fopen、fclose、fread、fwrite、fscanf、fprintf等，这些函数为开发者提供了灵活的文件读写方式。通过这些函数，开发者可以轻松地打开文件、读取文件内容、写入数据到文件，以及关闭文件。 在C语言中，文件通常被视为字节流，这意味着文件操作是以字节为单位进行的。例如，fread函数可以从文件中读取指定数量的字节，而fwrite函数则可以将数据以字节的形式写入文件。这种操作方式使得C语言文件读写具有高度的灵活性和可移植性。 此外，C语言还支持文本模式和二进制模式两种文件打开方式。在文本模式下，文件操作会考虑平台特定的换行符转换；而在二进制模式下，文件操作则直接按字节进行，不进行任何转换。这使得C语言可以适应不同平台和不同文件类型的需求。 一个典型的C语言文件读写操作代码示例会包括使用fopen函数打开文件、使用fread或fscanf函数读取文件内容、对读取到的
大学生，数学建模，美国大学生数学建模竞赛，MCM/ICM，2022年美赛特等奖O奖论文
Node.js，简称Node，是一个开源且跨平台的JavaScript运行时环境，它允许在浏览器外运行JavaScript代码。Node.js于2009年由Ryan Dahl创立，旨在创建高性能的Web服务器和网络应用程序。它基于Google Chrome的V8 JavaScript引擎，可以在Windows、Linux、Unix、Mac OS X等操作系统上运行。 Node.js的特点之一是事件驱动和非阻塞I/O模型，这使得它非常适合处理大量并发连接，从而在构建实时应用程序如在线游戏、聊天应用以及实时通讯服务时表现卓越。此外，Node.js使用了模块化的架构，通过npm（Node package manager，Node包管理器）,社区成员可以共享和复用代码，极大地促进了Node.js生态系统的发展和扩张。 Node.js不仅用于服务器端开发。随着技术的发展，它也被用于构建工具链、开发桌面应用程序、物联网设备等。Node.js能够处理文件系统、操作数据库、处理网络请求等，因此，开发者可以用JavaScript编写全栈应用程序，这一点大大提高了开发效率和便捷性。 在实践中，许多大型企业和组织已经采用Node.js作为其Web应用程序的开发平台，如Netflix、PayPal和Walmart等。它们利用Node.js提高了应用性能，简化了开发流程，并且能更快地响应市场需求。
2024-2030中国HMI PLC一体机市场现状研究分析与发展前景预测报告
研发运营一体化(Dev0ps)能力成熟度模型 第7部分-组织结构
"Image and video denoising by sparse 3D transform-domain collaborative filtering" 是一篇关于图像和视频去噪技术的研究论文，它介绍了一种基于稀疏3D变换域的协同滤波方法。这种方法的核心思想是利用图像或视频中的空间和时间冗余信息来去除噪声
BS EN 1822-2-2009 第2部分：气溶胶生产、测量设备、颗粒物计数统计.pdf