<!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>Menu-Style TreeView Design</title>
<style type="text/css">
/*margin and padding on body element
can introduce errors in determining
element position and are not recommended;
we turn them off as a foundation for YUI
CSS treatments. */
body {
margin:0;
padding:0;
}
</style>
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.6.0/build/fonts/fonts-min.css" />
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.6.0/build/treeview/assets/skins/sam/treeview.css" />
<script type="text/javascript" src="http://yui.yahooapis.com/2.6.0/build/yahoo-dom-event/yahoo-dom-event.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.6.0/build/treeview/treeview-min.js"></script>
<!-- Dependencies -->
<script src="http://yui.yahooapis.com/2.6.0/build/yahoo/yahoo-min.js"></script>
<!-- Source file -->
<script src="http://yui.yahooapis.com/2.6.0/build/json/json-min.js"></script>
<!--begin custom header content for this example-->
<!--bring in the folder-style CSS for the TreeView Control-->
<link rel="stylesheet" type="text/css" href="http://developer.yahoo.com/yui/build/treeview/assets/treeview-menu.css" />
<!-- Some custom style for the expand/contract section-->
<style>
#expandcontractdiv {border:1px dotted #dedede; background-color:#EBE4F2; margin:0 0 .5em 0; padding:0.4em;}
#treeDiv1 { background: #fff; padding:1em; margin-top:1em; }
</style>
<!--end custom header content for this example-->
</head>
<body class=" yui-skin-sam">
<h1>Menu-Style TreeView Design</h1>
<!--BEGIN SOURCE CODE FOR EXAMPLE =============================== -->
<!-- markup for expand/contract links -->
<div id="expandcontractdiv">
<a id="collapse" href="#">Collapse all</a>
</div>
<div id="treeDiv1"></div>
<script type="text/javascript">
//an anonymous function wraps our code to keep our variables
//in function scope rather than in the global namespace:
(function() {
var tree; //will hold our TreeView instance
function treeInit() {
YAHOO.log("Example's treeInit function firing.", "info", "example");
//Hand off ot a method that randomly generates tree nodes:
buildRandomTextNodeTree();
//handler for collapsing all nodes
YAHOO.util.Event.on("collapse", "click", function(e) {
YAHOO.log("Collapsing all TreeView nodes.", "info", "example");
tree.collapseAll();
YAHOO.util.Event.preventDefault(e);
});
}
//This method will build a TreeView instance and populate it with
//between 3 and 7 top-level nodes
function buildRandomTextNodeTree() {
var jsonTree = '{"label":"all", "children":[';
jsonTree += '{"label":"bar", "children":[';
jsonTree += '{"label":"37628"},';
jsonTree += '{"label":"quux", "children":[';
jsonTree += '{"label":"179"},';
jsonTree += '{"label":"7"}';
jsonTree += ']},';
jsonTree += '{"label":"1025"}';
jsonTree += ']}';
jsonTree += ']}';
var jsonString = '{"label":"Level 1","children":[{"label":"Level 2-1"},{"label":"Level 2-2"}]}';
var prod = YAHOO.lang.JSON.parse(jsonString);
var treeObject = YAHOO.lang.JSON.parse(jsonTree);
//instantiate the tree:
tree = new YAHOO.widget.TreeView("treeDiv1", treeObject);
//create top-level nodes
//for (var i = 0; i < Math.floor((Math.random()*4) + 3); i++) {
// var tmpNode = new YAHOO.widget.MenuNode("label-" + i, tree.getRoot(), false);
//we'll delegate to another function to build child nodes:
// buildRandomTextBranch(tmpNode);
//}
//once it's all built out, we need to render
//our TreeView instance:
tree.draw();
}
//This function adds a random number <4 of child nodes to a given
//node, stopping at a specific node depth:
function buildRandomTextBranch(node) {
if (node.depth < 6) {
YAHOO.log("buildRandomTextBranch: " + node.index);
for ( var i = 0; i < Math.floor(Math.random() * 4) ; i++ ) {
var tmpNode = new YAHOO.widget.MenuNode(node.label + "-" + i, node, false);
buildRandomTextBranch(tmpNode);
}
}
}
//When the DOM is done loading, we can initialize our TreeView
//instance:
YAHOO.util.Event.onDOMReady(treeInit);
})();//anonymous function wrapper closed; () notation executes function
</script>
<!--END SOURCE CODE FOR EXAMPLE =============================== -->
<!--MyBlogLog instrumentation-->
</body>
</html>
分享到:
相关推荐
Struts2中使用JSON+YUI
YUI教程YUI 入门教程YUI 入门教程YUI 入门教程
Struts2+JSON+YUI组合应用之二构建RichClient
YUI Test is a complete testing framework for JavaScript and Web applications. You can use the simple JavaScript syntax to write unit tests that can be run in web browsers or on the command line, as ...
yuicompressor-2.4.2.jar yuicompressor-2.4.7.jar jsZip.exe yuicompressor yui compressor js压缩工具 javascript压缩工具 css压缩工具 ------------------------------------ //压缩JS java -jar yui...
YUI 库,全称Yahoo! UI Library。是一组工具和控件,用JavaScript写成, 为的是用DOM 脚本,DHTML和AJAX等技术创建丰富的网页交互式应用程序。 YUI 基于BSD协议,对所有的使用方式都是免费的。YUI 项目包括YUI 库和两...
yui3-master.zip
yui_2.6.0r2 yui_2.6.0r2 yui_2.6.0r2 yui_2.6.0r2 yui_2.6.0r2
"de"]}该生成器支持以下YUI3项目结构: awesomeproject└── src └── awesomeproject-loader ├── build.json ├── js │ └── awesomeproject.js ├── scripts │ └── meta_join.js └──
雅虎的东西,简单的操作很好用 使用例子:java -jar D:\yuicompressor\yuicompressor\yuicompressor.jar E:\js\all.js -o E:\wap\wap2\js\all-min.js --charset utf-8 当然要装jdk了 不然就玩完了
yui 源码下载,3.9.0 r2 包,最新版本
YUI Compressor非常好用,特别是JS的混淆是众多JS Coding的最爱。可惜官网提供的版本都不具备右键功能,每次压缩都要cmd输入一些命令实在是繁琐,本文就介绍如何给YUI Compressor添加右键命令,方便使用。 网上已有...
YUI3 引入了粒度更细的模块管理方式,通过异步 HTTP 请求加载模块、然后执行...YUI是个“学院派”的框架,以性能和严谨著称,易用性相对而言弱了一些。它能否在已经拉开的 JavaScript 框架大战中胜出,让我们拭目以待。
从YUI2到YUI3看前端的演变
YAHOO YUI 中文文档 AJAX 详细 比较好用
基于YUI3的dialog组件该组件是基于YUI3开发的,功能强大,详细见http://www.qiqicartoon.com
yui压缩
利用Yahoo YUI库做的一个TREE实例,很详细的阐述了YUI的使用原理
YUI资料 雅虎 用户接口库 中文说明及如何使用学习 Yui组件分成2类:工具包和控件库 Yui 工具包 Yui 工具包利用DOM脚本来简化浏览器内的开发(in-browser devolvement),使用DHTML和AJAX的特性开发所有的Web程序。...
Yahoo! UI Library (YUI) 是一个开放源代码的 JavaScript 函数库,为了能建立一个高互动的网页,它采用了AJAX, DHTML 和 DOM 等程式码技术。它也包含了许多 CSS 资源。