oqapi/webgui
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

upgraded to yui 0.12.0

Browse source 
upgraded to yui-ext 0.33 rc2
This commit is contained in:
JT Smith 2006-11-28 02:23:34 +00:00
parent 62b3d90db7
commit cfd09a5cb6
1271 changed files with 539033 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

208
www/extras/yui/examples/treeview/anim.html Normal file
View file

@ -0,0 +1,208 @@
<!doctype html public "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Yahoo! UI Library - Tree Control</title>
<link rel="stylesheet" type="text/css" href="css/screen.css">
</head>
<body onload="treeInit()">
<link rel="stylesheet" type="text/css" href="css/local/tree.css">
<div id="pageTitle">
<h3>Tree Control</h3>
</div>
<script type="text/javascript" src="../../build/yahoo/yahoo.js" ></script>
<script type="text/javascript" src="../../build/event/event.js"></script>
<!-- The following are required for the logger -->
<script type="text/javascript" src="../../build/dom/dom.js"></script>
<script type="text/javascript" src="../../build/logger/logger.js"></script>
<!-- End logger reqs -->
<script type="text/javascript" src="../../build/treeview/treeview-debug.js" ></script>
<style type="text/css">
/* logger default styles */
/* font size is controlled here: default 77% */
#yui-log {position:absolute;top:1em;right:1em;font-size:77%;text-align:left;}
/* width is controlled here: default 31em */
.yui-log {background-color:#AAA;border:1px solid black;font-family:monospace;z-index:9000;}
.yui-log p {margin:1px;padding:.1em;}
.yui-log button {font-family:monospace;}
.yui-log .yui-log-hd {padding:.5em;background-color:#575757;color:#FFF;}
/* height is controlled here: default 20em*/
.yui-log .yui-log-bd {width:100%;height:20em;background-color:#FFF;border:1px solid gray;overflow:auto;}
.yui-log .yui-log-ft {margin-top:.5em;margin-bottom:1em;}
.yui-log .yui-log-ft .yui-log-categoryfilters {}
.yui-log .yui-log-ft .yui-log-sourcefilters {width:100%;border-top:1px solid #575757;margin-top:.75em;padding-top:.75em;}
.yui-log .yui-log-btns {position:relative;float:right;bottom:.25em;}
.yui-log .yui-log-filtergrp {margin-right:.5em;}
.yui-log .info {background-color:#A7CC25;} /* A7CC25 green */
.yui-log .warn {background-color:#F58516;} /* F58516 orange */
.yui-log .error {background-color:#E32F0B;} /* E32F0B red */
.yui-log .time {background-color:#A6C9D7;} /* A6C9D7 blue */
.yui-log .window {background-color:#F2E886;} /* F2E886 tan */
</style>
<div id="container">
<img class="ylogo" src="img/logo.gif" alt="" />
<div id="containerTop">
<div id="header">
<h1>
</h1>
<h4>&nbsp;</h4>
</div>
<div id="main">
<div id="rightbar">
<div id="rightBarPad">
<h3>Examples</h3>
<div id="linkage">
<ul>
<li><a href="default.html?mode=dist">Default tree widget</a></li>
<li><a href="dynamic.html?mode=dist">Dynamic load</a></li>
<li><a href="folders.html?mode=dist">Folder view</a></li>
<li><a href="menu.html?mode=dist">Menu</a></li>
<li><a href="html.html?mode=dist">HTML node</a></li>
<li><a href="multi.html?mode=dist">Multiple trees, different styles</a></li>
<li><a href="check.html?mode=dist">Task list</a></li>
<li><a href="anim.html?mode=dist">Fade animation</a></li>
</ul>
</div>
<script type="text/javascript">
//<![CDATA[
YAHOO.example.logApp = function() {
var divId;
return {
init: function(p_divId, p_toggleElId, p_clearElId) {
divId = p_divId
},
onload: function() {
if (YAHOO.widget.Logger) {
var reader = new YAHOO.widget.LogReader( "logDiv", { height: "400px" } );
//reader._onClickPauseBtn(null, reader);
}
}
};
} ();
YAHOO.util.Event.on(window, "load", YAHOO.example.logApp.onload);
//]]>
</script>
<div id="logDiv"></div>
</div>
</div>
<script type="text/javascript" src="../../build/animation/animation.js"></script>
<div id="content">
<form name="mainForm" action="javscript:;">
<div class="newsItem">
<h3>Animated TreeView Widget</h3>
<p> </p>
<div id="expandcontractdiv">
<a href="javascript:tree.expandAll()">Expand all</a>
<a href="javascript:tree.collapseAll()">Collapse all</a>
</div>
<div id="treeDiv1"></div>
</div>
</form>
</div>
<div id="footerContainer">
<div id="footer">
<p>&nbsp;</p>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
var tree;
var nodes = [];
var nodeIndex;
function treeInit() {
buildRandomTextNodeTree();
}
function handleExpand(node) {
YAHOO.log("handle expand " + node.index);
}
function handleCollapse(node) {
YAHOO.log("handle collapse " + node.index);
// return false; // return false to cancel the collapse
}
function handleAnimStart(info) {
YAHOO.log("handle animStart " + info.node.index);
}
function handleAnimComplete(info) {
YAHOO.log("handle animComplete " + info.node.index);
}
function handleLabelClick(node) {
YAHOO.log("handle labelClick " + node.toString());
}
function buildRandomTextNodeTree() {
tree = new YAHOO.widget.TreeView("treeDiv1");
tree.setExpandAnim(YAHOO.widget.TVAnim.FADE_IN);
tree.setCollapseAnim(YAHOO.widget.TVAnim.FADE_OUT);
tree.subscribe("expand", handleExpand);
tree.subscribe("collapse", handleCollapse);
tree.subscribe("animStart", handleAnimStart);
tree.subscribe("animComplete", handleAnimComplete);
tree.subscribe("labelClick", handleLabelClick);
for (var i = 0; i < Math.floor((Math.random()*4) + 3); i++) {
var tmpNode = new YAHOO.widget.TextNode("label-" + i, tree.getRoot(), false);
buildRandomTextBranch(tmpNode);
}
tree.draw();
}
var callback = null;
function buildRandomTextBranch(node) {
if (node.depth < 6) {
YAHOO.log("buildRandomTextBranch: " + node.index);
for ( var i = 0; i < Math.floor(Math.random() * 6) ; i++ ) {
var tmpNode = new YAHOO.widget.TextNode(node.label + "-" + i, node, false);
buildRandomTextBranch(tmpNode);
}
}
}
</script>
</body>
</html>

218
www/extras/yui/examples/treeview/check.html Normal file
View file

@ -0,0 +1,218 @@
<!doctype html public "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Yahoo! UI Library - Tree Control</title>
<link rel="stylesheet" type="text/css" href="css/screen.css">
</head>
<body onload="treeInit()">
<link rel="stylesheet" type="text/css" href="css/check/tree.css">
<div id="pageTitle">
<h3>Tree Control</h3>
</div>
<script type="text/javascript" src="../../build/yahoo/yahoo.js" ></script>
<script type="text/javascript" src="../../build/event/event.js"></script>
<!-- The following are required for the logger -->
<script type="text/javascript" src="../../build/dom/dom.js"></script>
<script type="text/javascript" src="../../build/logger/logger.js"></script>
<!-- End logger reqs -->
<script type="text/javascript" src="../../build/treeview/treeview-debug.js" ></script>
<style type="text/css">
/* logger default styles */
/* font size is controlled here: default 77% */
#yui-log {position:absolute;top:1em;right:1em;font-size:77%;text-align:left;}
/* width is controlled here: default 31em */
.yui-log {background-color:#AAA;border:1px solid black;font-family:monospace;z-index:9000;}
.yui-log p {margin:1px;padding:.1em;}
.yui-log button {font-family:monospace;}
.yui-log .yui-log-hd {padding:.5em;background-color:#575757;color:#FFF;}
/* height is controlled here: default 20em*/
.yui-log .yui-log-bd {width:100%;height:20em;background-color:#FFF;border:1px solid gray;overflow:auto;}
.yui-log .yui-log-ft {margin-top:.5em;margin-bottom:1em;}
.yui-log .yui-log-ft .yui-log-categoryfilters {}
.yui-log .yui-log-ft .yui-log-sourcefilters {width:100%;border-top:1px solid #575757;margin-top:.75em;padding-top:.75em;}
.yui-log .yui-log-btns {position:relative;float:right;bottom:.25em;}
.yui-log .yui-log-filtergrp {margin-right:.5em;}
.yui-log .info {background-color:#A7CC25;} /* A7CC25 green */
.yui-log .warn {background-color:#F58516;} /* F58516 orange */
.yui-log .error {background-color:#E32F0B;} /* E32F0B red */
.yui-log .time {background-color:#A6C9D7;} /* A6C9D7 blue */
.yui-log .window {background-color:#F2E886;} /* F2E886 tan */
</style>
<div id="container">
<img class="ylogo" src="img/logo.gif" alt="" />
<div id="containerTop">
<div id="header">
<h1>
</h1>
<h4>&nbsp;</h4>
</div>
<div id="main">
<div id="rightbar">
<div id="rightBarPad">
<h3>Examples</h3>
<div id="linkage">
<ul>
<li><a href="default.html?mode=dist">Default tree widget</a></li>
<li><a href="dynamic.html?mode=dist">Dynamic load</a></li>
<li><a href="folders.html?mode=dist">Folder view</a></li>
<li><a href="menu.html?mode=dist">Menu</a></li>
<li><a href="html.html?mode=dist">HTML node</a></li>
<li><a href="multi.html?mode=dist">Multiple trees, different styles</a></li>
<li><a href="check.html?mode=dist">Task list</a></li>
<li><a href="anim.html?mode=dist">Fade animation</a></li>
</ul>
</div>
<script type="text/javascript">
//<![CDATA[
YAHOO.example.logApp = function() {
var divId;
return {
init: function(p_divId, p_toggleElId, p_clearElId) {
divId = p_divId
},
onload: function() {
if (YAHOO.widget.Logger) {
var reader = new YAHOO.widget.LogReader( "logDiv", { height: "400px" } );
//reader._onClickPauseBtn(null, reader);
}
}
};
} ();
YAHOO.util.Event.on(window, "load", YAHOO.example.logApp.onload);
//]]>
</script>
<div id="logDiv"></div>
</div>
</div>
<script type="text/javascript" src="js/TaskNode.js"></script>
<div id="content">
<form name="mainForm" action="javscript:;">
<div class="newsItem">
<h3>Task List</h3>
<p>
The check boxes have three states:
unchecked, partially checked (some sub-tasks are finished), checked (all sub-tasks complete)
</p>
<div id="expandcontractdiv">
<a href="javascript:tree.expandAll()">Expand all</a>
<a href="javascript:tree.collapseAll()">Collapse all</a>
<a href="javascript:checkAll()">Check all</a>
<a href="javascript:uncheckAll()">Uncheck all</a>
</div>
<div id="treeDiv1"></div>
</div>
</form>
</div>
<div id="footerContainer">
<div id="footer">
<p>&nbsp;</p>
</div>
</div>
</div>
</div>
</div>
<!--
<input type="button" id="showButton" />
-->
<script type="text/javascript">
var tree;
var nodes = new Array();
var nodeIndex;
function treeInit() {
buildRandomTextNodeTree();
// alert(tree);
}
function buildRandomTextNodeTree() {
tree = new YAHOO.widget.TreeView("treeDiv1");
for (var i = 0; i < Math.floor((Math.random()*4) + 3); i++) {
var tmpNode = new YAHOO.widget.TaskNode("task-" + i, tree.getRoot(), false);
//tmpNode.onCheckClick = onCheckClick;
buildRandomTextBranch(tmpNode);
}
tree.subscribe("checkClick", onCheckClick);
tree.draw();
}
var callback = null;
function buildRandomTextBranch(node) {
if (node.depth < 5) {
YAHOO.log("buildRandomTextBranch: " + node.index);
for ( var i = 0; i < Math.floor(Math.random() * 4) ; i++ ) {
var tmpNode = new YAHOO.widget.TaskNode(node.label + "-" + i, node, false);
// tmpNode.onCheckClick = onCheckClick;
buildRandomTextBranch(tmpNode);
}
} else {
// tmpNode = new YAHOO.widget.TaskNode(node.label + "-" + i, node, false, true);
}
}
function onCheckClick(node) {
YAHOO.log(node.label + " check was clicked, new state: " +
node.checkState);
}
function checkAll() {
var topNodes = tree.getRoot().children;
for(var i = 0; i <= topNodes.length; ++i) {
topNodes[i].check();
}
}
function uncheckAll() {
var topNodes = tree.getRoot().children;
for(var i = 0; i <= topNodes.length; ++i) {
topNodes[i].uncheck();
}
}
</script>
</body>
</html>

1
www/extras/yui/examples/treeview/css/check/tree.css Normal file
View file

@ -0,0 +1 @@
/* Copyright (c) 2006 Yahoo! Inc. All rights reserved. */ /* first or middle sibling, no children */ .ygtvtn {background: url(../../img/default/tn.gif) 0 0 no-repeat; width:16px; height:22px; } /* first or middle sibling, collapsable */ .ygtvtm {background: url(../../img/default/tm.gif) 0 0 no-repeat; width:16px; height:22px; cursor:pointer } /* first or middle sibling, collapsable, hover */ .ygtvtmh {background: url(../../img/default/tmh.gif) 0 0 no-repeat; width:16px; height:22px; cursor:pointer } /* first or middle sibling, expandable */ .ygtvtp {background: url(../../img/default/tp.gif) 0 0 no-repeat; width:16px; height:22px; cursor:pointer } /* first or middle sibling, expandable, hover */ .ygtvtph {background: url(../../img/default/tph.gif) 0 0 no-repeat; width:16px; height:22px; cursor:pointer } /* last sibling, no children */ .ygtvln {background: url(../../img/default/ln.gif) 0 0 no-repeat; width:16px; height:22px; } /* Last sibling, collapsable */ .ygtvlm {background: url(../../img/default/lm.gif) 0 0 no-repeat; width:16px; height:22px; cursor:pointer } /* Last sibling, collapsable, hover */ .ygtvlmh {background: url(../../img/default/lmh.gif) 0 0 no-repeat; width:16px; height:22px; cursor:pointer } /* Last sibling, expandable */ .ygtvlp { background: url(../../img/default/lp.gif) 0 0 no-repeat; width:16px; height:22px; cursor:pointer } /* Last sibling, expandable, hover */ .ygtvlph { background: url(../../img/default/lph.gif) 0 0 no-repeat; width:16px; height:22px; cursor:pointer } /* Loading icon */ .ygtvloading { background: url(../../img/default/loading.gif) 0 0 no-repeat; width:16px; height:22px; } /* the style for the empty cells that are used for rendering the depth * of the node */ .ygtvdepthcell { background: url(../../img/default/vline.gif) 0 0 no-repeat; width:16px; height:22px; } .ygtvblankdepthcell { width:16px; height:22px; } /* the style of the div around each node */ .ygtvitem { } /* the style of the div around each node's collection of children */ .ygtvchildren { } * html .ygtvchildren { height:1%; } /* the style of the text label in ygTextNode */ .ygtvlabel, .ygtvlabel:link, .ygtvlabel:visited, .ygtvlabel:hover { margin-left:2px; text-decoration: none; } .ygtvcheck0 { background: url(../../img/check/check0.gif) 0 0 no-repeat; width:16px; height:22px; cursor:pointer } .ygtvcheck1 { background: url(../../img/check/check1.gif) 0 0 no-repeat; width:16px; height:22px; cursor:pointer } .ygtvcheck2 { background: url(../../img/check/check2.gif) 0 0 no-repeat; width:16px; height:22px; cursor:pointer }

1
www/extras/yui/examples/treeview/css/code.css Normal file
View file

@ -0,0 +1 @@
/************* CSS for dp.SyntaxHighlighter ***************************/ /* Main style for the table */ .dp-highlighter { width: 95%; overflow: auto; line-height: 100% !important; margin: 0px 0px 10px 0px; } .dp-highlighter table { width: 100%; margin: 0px 0px 2px 0px; border-collapse: collapse; border-bottom: 2px solid #eee; background-color:#fff; } .dp-highlighter tbody.hide { display: none; } .dp-highlighter tbody.show { display: table-row-group; _display: block; } .dp-highlighter td { font-family: Courier New; font-size: 12px; } /* Styles for the tools */ .dp-highlighter .tools-corner { background-color: #eee; font-size: 9px; } .dp-highlighter .tools { background-color: #eee; padding: 3px 8px 3px 10px; border-bottom: 1px solid gray; font: 11px Verdana, Geneva, Arial, Helvetica, sans-serif; color: silver; } .dp-highlighter .tools-corner { background-color: #eee; } .dp-highlighter .tools a { font-size: 9px; color: #aaaaaa; text-decoration: none; } .dp-highlighter .tools a:hover { color: red; text-decoration: underline; } /* Gutter with line number */ .dp-highlighter .gutter { padding-right: 5px; padding-left: 10px; width: 5px; background-color: #eee; border-right: 1px solid #cccccc; color: gray; text-align: right; vertical-align: top; } /* Single line style */ .dp-highlighter .line1, .line2 { padding-left: 10px; /* border-bottom: 1px solid #F7F7F7; */ white-space:nowrap; } .dp-highlighter .line2 { /* background-color: #F7F7F7; */ } .dp-xml {} .dp-xml .cdata { color: #ff1493; } .dp-xml .comments { color: green; } .dp-xml .tag { color: blue; } .dp-xml .tag-name { color: black; font-weight: bold; } .dp-xml .attribute { color: red; } .dp-xml .attribute-value { color: blue; } .dp-c {} .dp-c .comment { color: green; } .dp-c .string { color: blue; } .dp-c .preprocessor { color: gray; } .dp-c .keyword { color: blue; } .dp-c .vars { color: #d00; }

98
www/extras/yui/examples/treeview/css/default/tree.css Normal file
View file

@ -0,0 +1,98 @@
/* Copyright (c) 2006 Yahoo! Inc. All rights reserved. */
/* first or middle sibling, no children */
.ygtvtn {
width:16px; height:22px;
background: url(../../../../../../../i/us/nt/widg/tree/dflt/tn.gif) 0 0 no-repeat;
}
/* first or middle sibling, collapsable */
.ygtvtm {
width:16px; height:22px;
cursor:pointer ;
background: url(../../../../../../../i/us/nt/widg/tree/dflt/tm.gif) 0 0 no-repeat;
}
/* first or middle sibling, collapsable, hover */
.ygtvtmh {
width:16px; height:22px;
cursor:pointer ;
background: url(../../../../../../../i/us/nt/widg/tree/dflt/tmh.gif) 0 0 no-repeat;
}
/* first or middle sibling, expandable */
.ygtvtp {
width:16px; height:22px;
cursor:pointer ;
background: url(../../../../../../../i/us/nt/widg/tree/dflt/tp.gif) 0 0 no-repeat;
}
/* first or middle sibling, expandable, hover */
.ygtvtph {
width:16px; height:22px;
cursor:pointer ;
background: url(../../../../../../../i/us/nt/widg/tree/dflt/tph.gif) 0 0 no-repeat;
}
/* last sibling, no children */
.ygtvln {
width:16px; height:22px;
background: url(../../../../../../../i/us/nt/widg/tree/dflt/ln.gif) 0 0 no-repeat;
}
/* Last sibling, collapsable */
.ygtvlm {
width:16px; height:22px;
cursor:pointer ;
background: url(../../../../../../../i/us/nt/widg/tree/dflt/lm.gif) 0 0 no-repeat;
}
/* Last sibling, collapsable, hover */
.ygtvlmh {
width:16px; height:22px;
cursor:pointer ;
background: url(../../../../../../../i/us/nt/widg/tree/dflt/lmh.gif) 0 0 no-repeat;
}
/* Last sibling, expandable */
.ygtvlp {
width:16px; height:22px;
cursor:pointer ;
background: url(../../../../../../../i/us/nt/widg/tree/dflt/lp.gif) 0 0 no-repeat;
}
/* Last sibling, expandable, hover */
.ygtvlph {
width:16px; height:22px; cursor:pointer ;
background: url(../../../../../../../i/us/nt/widg/tree/dflt/lph.gif) 0 0 no-repeat;
}
/* Loading icon */
.ygtvloading {
width:16px; height:22px;
background: url(../../../../../../../i/us/nt/widg/tree/dflt/loading.gif) 0 0 no-repeat;
}
/* the style for the empty cells that are used for rendering the depth
* of the node */
.ygtvdepthcell {
width:16px; height:22px;
background: url(../../../../../../../i/us/nt/widg/tree/dflt/vline.gif) 0 0 no-repeat;
}
.ygtvblankdepthcell { width:16px; height:22px; }
/* the style of the div around each node */
.ygtvitem { }
/* the style of the div around each node's collection of children */
.ygtvchildren { }
* html .ygtvchildren { height:2%; }
/* the style of the text label in ygTextNode */
.ygtvlabel, .ygtvlabel:link, .ygtvlabel:visited, .ygtvlabel:hover {
margin-left:2px;
text-decoration: none;
}
.ygtvspacer { height: 10px; width: 10px; margin: 2px; }

98
www/extras/yui/examples/treeview/css/default/tree.css.orig Normal file
View file

@ -0,0 +1,98 @@
/* Copyright (c) 2006 Yahoo! Inc. All rights reserved. */
/* first or middle sibling, no children */
.ygtvtn {
width:16px; height:22px;
background: url(../../img/default/tn.gif) 0 0 no-repeat;
}
/* first or middle sibling, collapsable */
.ygtvtm {
width:16px; height:22px;
cursor:pointer ;
background: url(../../img/default/tm.gif) 0 0 no-repeat;
}
/* first or middle sibling, collapsable, hover */
.ygtvtmh {
width:16px; height:22px;
cursor:pointer ;
background: url(../../img/default/tmh.gif) 0 0 no-repeat;
}
/* first or middle sibling, expandable */
.ygtvtp {
width:16px; height:22px;
cursor:pointer ;
background: url(../../img/default/tp.gif) 0 0 no-repeat;
}
/* first or middle sibling, expandable, hover */
.ygtvtph {
width:16px; height:22px;
cursor:pointer ;
background: url(../../img/default/tph.gif) 0 0 no-repeat;
}
/* last sibling, no children */
.ygtvln {
width:16px; height:22px;
background: url(../../img/default/ln.gif) 0 0 no-repeat;
}
/* Last sibling, collapsable */
.ygtvlm {
width:16px; height:22px;
cursor:pointer ;
background: url(../../img/default/lm.gif) 0 0 no-repeat;
}
/* Last sibling, collapsable, hover */
.ygtvlmh {
width:16px; height:22px;
cursor:pointer ;
background: url(../../img/default/lmh.gif) 0 0 no-repeat;
}
/* Last sibling, expandable */
.ygtvlp {
width:16px; height:22px;
cursor:pointer ;
background: url(../../img/default/lp.gif) 0 0 no-repeat;
}
/* Last sibling, expandable, hover */
.ygtvlph {
width:16px; height:22px; cursor:pointer ;
background: url(../../img/default/lph.gif) 0 0 no-repeat;
}
/* Loading icon */
.ygtvloading {
width:16px; height:22px;
background: url(../../img/default/loading.gif) 0 0 no-repeat;
}
/* the style for the empty cells that are used for rendering the depth
* of the node */
.ygtvdepthcell {
width:16px; height:22px;
background: url(../../img/default/vline.gif) 0 0 no-repeat;
}
.ygtvblankdepthcell { width:16px; height:22px; }
/* the style of the div around each node */
.ygtvitem { }
/* the style of the div around each node's collection of children */
.ygtvchildren { }
* html .ygtvchildren { height:2%; }
/* the style of the text label in ygTextNode */
.ygtvlabel, .ygtvlabel:link, .ygtvlabel:visited, .ygtvlabel:hover {
margin-left:2px;
text-decoration: none;
}
.ygtvspacer { height: 10px; width: 10px; margin: 2px; }

55
www/extras/yui/examples/treeview/css/folders/tree.css Normal file
View file

@ -0,0 +1,55 @@
/* Copyright (c) 2006 Yahoo! Inc. All rights reserved. */
/* first or middle sibling, no children */
.ygtvtn { background: url(../../img/folders/tn.gif) 0 0 no-repeat; width:17px; height:22px; }
/* first or middle sibling, collapsable */
.ygtvtm { background: url(../../img/folders/tm.gif) 0 0 no-repeat; width:34px; height:22px; cursor:pointer }
/* first or middle sibling, collapsable, hover */
.ygtvtmh { background: url(../../img/folders/tmh.gif) 0 0 no-repeat; width:34px; height:22px; cursor:pointer }
/* first or middle sibling, expandable */
.ygtvtp { background: url(../../img/folders/tp.gif) 0 0 no-repeat; width:34px; height:22px; cursor:pointer }
/* first or middle sibling, expandable, hover */
.ygtvtph { background: url(../../img/folders/tph.gif) 0 0 no-repeat; width:34px; height:22px; cursor:pointer }
/* last sibling, no children */
.ygtvln { background: url(../../img/folders/ln.gif) 0 0 no-repeat; width:17px; height:22px; }
/* Last sibling, collapsable */
.ygtvlm { background: url(../../img/folders/lm.gif) 0 0 no-repeat; width:34px; height:22px; cursor:pointer }
/* Last sibling, collapsable, hover */
.ygtvlmh { background: url(../../img/folders/lmh.gif) 0 0 no-repeat; width:34px; height:22px; cursor:pointer }
/* Last sibling, expandable */
.ygtvlp { background: url(../../img/folders/lp.gif) 0 0 no-repeat; width:34px; height:22px; cursor:pointer }
/* Last sibling, expandable, hover */
.ygtvlph { background: url(../../img/folders/lph.gif) 0 0 no-repeat; width:34px; height:22px; cursor:pointer }
/* Loading icon */
.ygtvloading { background: url(../../img/folders/loading.gif) 0 0 no-repeat; width:16px; height:22px; }
/* the style for the empty cells that are used for rendering the depth
* of the node */
.ygtvdepthcell { background: url(../../img/folders/vline.gif) 0 0 no-repeat; width:17px; height:22px; }
.ygtvblankdepthcell { width:17px; height:22px; }
/* the style of the div around each node */
.ygtvitem { }
/* the style of the div around each node's collection of children */
.ygtvchildren { }
* html .ygtvchildren { height:1%; }
/* the style of the text label in ygTextNode */
.ygtvlabel, .ygtvlabel:link, .ygtvlabel:visited, .ygtvlabel:hover {
margin-left:2px;
text-decoration: none;
}

99
www/extras/yui/examples/treeview/css/local/tree.css Normal file
View file

@ -0,0 +1,99 @@
/* Copyright (c) 2006 Yahoo! Inc. All rights reserved. */
/* first or middle sibling, no children */
.ygtvtn {
width:16px; height:22px;
background: url(../../img/default/tn.gif) 0 0 no-repeat;
}
/* first or middle sibling, collapsable */
.ygtvtm {
width:16px; height:22px;
cursor:pointer ;
background: url(../../img/default/tm.gif) 0 0 no-repeat;
}
/* first or middle sibling, collapsable, hover */
.ygtvtmh {
width:16px; height:22px;
cursor:pointer ;
background: url(../../img/default/tmh.gif) 0 0 no-repeat;
}
/* first or middle sibling, expandable */
.ygtvtp {
width:16px; height:22px;
cursor:pointer ;
background: url(../../img/default/tp.gif) 0 0 no-repeat;
}
/* first or middle sibling, expandable, hover */
.ygtvtph {
width:16px; height:22px;
cursor:pointer ;
background: url(../../img/default/tph.gif) 0 0 no-repeat;
}
/* last sibling, no children */
.ygtvln {
width:16px; height:22px;
background: url(../../img/default/ln.gif) 0 0 no-repeat;
}
/* Last sibling, collapsable */
.ygtvlm {
width:16px; height:22px;
cursor:pointer ;
background: url(../../img/default/lm.gif) 0 0 no-repeat;
}
/* Last sibling, collapsable, hover */
.ygtvlmh {
width:16px; height:22px;
cursor:pointer ;
background: url(../../img/default/lmh.gif) 0 0 no-repeat;
}
/* Last sibling, expandable */
.ygtvlp {
width:16px; height:22px;
cursor:pointer ;
background: url(../../img/default/lp.gif) 0 0 no-repeat;
}
/* Last sibling, expandable, hover */
.ygtvlph {
width:16px; height:22px; cursor:pointer ;
background: url(../../img/default/lph.gif) 0 0 no-repeat;
}
/* Loading icon */
.ygtvloading {
width:16px; height:22px;
background: url(../../img/default/loading.gif) 0 0 no-repeat;
}
/* the style for the empty cells that are used for rendering the depth
* of the node */
.ygtvdepthcell {
width:16px; height:22px;
background: url(../../img/default/vline.gif) 0 0 no-repeat;
}
.ygtvblankdepthcell { width:16px; height:22px; }
/* the style of the div around each node */
.ygtvitem { }
/* the style of the div around each node's collection of children */
.ygtvchildren { }
* html .ygtvchildren { height:2%; }
/* the style of the text label in ygTextNode */
.ygtvlabel, .ygtvlabel:link, .ygtvlabel:visited, .ygtvlabel:hover {
margin-left:2px;
text-decoration: none;
background-color: white;
}
.ygtvspacer { height: 10px; width: 10px; margin: 2px; }

58
www/extras/yui/examples/treeview/css/menu/tree.css Normal file
View file

@ -0,0 +1,58 @@
/* Copyright (c) 2006 Yahoo! Inc. All rights reserved. */
/* first or middle sibling, no children */
.ygtvtn { width:1em; height:20px; }
/* first or middle sibling, collapsable */
.ygtvtm { background: url(../../img/menu/collapse.gif) 0 6px no-repeat; width:1em; height:22px; cursor:pointer }
/* first or middle sibling, collapsable, hover */
.ygtvtmh { background: url(../../img/menu/collapseh.gif) 0 6px no-repeat; width:1em; height:22px; cursor:pointer }
/* first or middle sibling, expandable */
.ygtvtp { background: url(../../img/menu/expand.gif) 0 6px no-repeat; width:1em; height:22px; cursor:pointer }
/* first or middle sibling, expandable, hover */
.ygtvtph { background: url(../../img/menu/expandh.gif) 0 6px no-repeat; width:1em; height:22px; cursor:pointer }
/* last sibling, no children */
.ygtvln { width:1em; height:20px; }
/* Last sibling, collapsable */
.ygtvlm { background: url(../../img/menu/collapse.gif) 0 6px no-repeat; width:1em; height:22px; cursor:pointer }
/* Last sibling, collapsable, hover */
.ygtvlmh { background: url(../../img/menu/collapseh.gif) 0 6px no-repeat; width:1em; height:22px; cursor:pointer }
/* Last sibling, expandable */
.ygtvlp { background: url(../../img/menu/expand.gif) 0 6px no-repeat; width:1em; height:22px; cursor:pointer }
/* Last sibling, expandable, hover */
.ygtvlph { background: url(../../img/menu/expandh.gif) 0 6px no-repeat; width:1em; height:22px; cursor:pointer }
/* Loading icon */
.ygtvloading { background: url(../../img/menu/loading.gif) 0 6px no-repeat; width:1em; height:22px; }
/* the style for the empty cells that are used for rendering the depth
* of the node */
.ygtvdepthcell { width:1em; height:20px; }
.ygtvblankdepthcell { width:1em; height:20px; }
/* the style of the div around each node */
.ygtvitem { border: 0px solid grey; }
/* the style of the div around each node's collection of children */
.ygtvchildren { }
* html .ygtvchildren { height:1%; }
/* the style of the text label in ygTextNode */
.ygtvlabel, .ygtvlabel:link, .ygtvlabel:visited, .ygtvlabel:hover {
/*
margin-left:2px;
text-decoration: none;
*/
font-size: 12px;
}

68
www/extras/yui/examples/treeview/css/multi/tree.css Normal file
View file

@ -0,0 +1,68 @@
/* Copyright (c) 2006 Yahoo! Inc. All rights reserved. */
/* Defaults */
.ygtvtn { width:16px; height:22px; background: url(../../img/default/tn.gif) 0 0 no-repeat; }
.ygtvtm { width:16px; height:22px; cursor:pointer ; background: url(../../img/default/tm.gif) 0 0 no-repeat; }
.ygtvtmh { width:16px; height:22px; cursor:pointer ; background: url(../../img/default/tmh.gif) 0 0 no-repeat; }
.ygtvtp { width:16px; height:22px; cursor:pointer ; background: url(../../img/default/tp.gif) 0 0 no-repeat; }
.ygtvtph { width:16px; height:22px; cursor:pointer ; background: url(../../img/default/tph.gif) 0 0 no-repeat; }
.ygtvln { width:16px; height:22px; background: url(../../img/default/ln.gif) 0 0 no-repeat; }
.ygtvlm { width:16px; height:22px; cursor:pointer ; background: url(../../img/default/lm.gif) 0 0 no-repeat; }
.ygtvlmh { width:16px; height:22px; cursor:pointer ; background: url(../../img/default/lmh.gif) 0 0 no-repeat; }
.ygtvlp { width:16px; height:22px; cursor:pointer ; background: url(../../img/default/lp.gif) 0 0 no-repeat; }
.ygtvlph { width:16px; height:22px; cursor:pointer ; background: url(../../img/default/lph.gif) 0 0 no-repeat; }
.ygtvloading { width:16px; height:22px; background: url(../../img/default/loading.gif) 0 0 no-repeat; }
.ygtvdepthcell { width:16px; height:22px; background: url(../../img/default/vline.gif) 0 0 no-repeat; }
.ygtvblankdepthcell { width:16px; height:22px; }
.ygtvitem { }
.ygtvchildren { }
* html .ygtvchildren { height:2%; }
.ygtvlabel, .ygtvlabel:link, .ygtvlabel:visited, .ygtvlabel:hover {
margin-left:2px;
text-decoration: none;
background-color: white;
}
.ygtvspacer { height: 10px; width: 10px; margin: 2px; }
/* via ID selector */
#tree2 .ygtvtn { background: url(../../img/folders/tn.gif) 0 0 no-repeat; width:17px; height:22px; }
#tree2 .ygtvtm { background: url(../../img/folders/tm.gif) 0 0 no-repeat; width:34px; height:22px; cursor:pointer }
#tree2 .ygtvtmh { background: url(../../img/folders/tmh.gif) 0 0 no-repeat; width:34px; height:22px; cursor:pointer }
#tree2 .ygtvtp { background: url(../../img/folders/tp.gif) 0 0 no-repeat; width:34px; height:22px; cursor:pointer }
#tree2 .ygtvtph { background: url(../../img/folders/tph.gif) 0 0 no-repeat; width:34px; height:22px; cursor:pointer }
#tree2 .ygtvln { background: url(../../img/folders/ln.gif) 0 0 no-repeat; width:17px; height:22px; }
#tree2 .ygtvlm { background: url(../../img/folders/lm.gif) 0 0 no-repeat; width:34px; height:22px; cursor:pointer }
#tree2 .ygtvlmh { background: url(../../img/folders/lmh.gif) 0 0 no-repeat; width:34px; height:22px; cursor:pointer }
#tree2 .ygtvlp { background: url(../../img/folders/lp.gif) 0 0 no-repeat; width:34px; height:22px; cursor:pointer }
#tree2 .ygtvlph { background: url(../../img/folders/lph.gif) 0 0 no-repeat; width:34px; height:22px; cursor:pointer }
#tree2 .ygtvloading { background: url(../../img/folders/loading.gif) 0 0 no-repeat; width:16px; height:22px; }
#tree2 .ygtvdepthcell { background: url(../../img/folders/vline.gif) 0 0 no-repeat; width:17px; height:22px; }
#tree2 .ygtvblankdepthcell { width:17px; height:22px; }
#tree2 .ygtvitem { }
#tree2 .ygtvchildren { }
* html .ygtvchildren { height:1%; }
#tree2 .ygtvlabel, .ygtvlabel:link, .ygtvlabel:visited, .ygtvlabel:hover {
margin-left:2px;
text-decoration: none;
}
/* via css class selector */
.treemenu .ygtvtn {background: transparent; width:1em; height:20px; }
.treemenu .ygtvtm { background: url(../../img/menu/collapse.gif) 0 6px no-repeat; width:1em; height:22px; cursor:pointer }
.treemenu .ygtvtmh { background: url(../../img/menu/collapseh.gif) 0 6px no-repeat; width:1em; height:22px; cursor:pointer }
.treemenu .ygtvtp { background: url(../../img/menu/expand.gif) 0 6px no-repeat; width:1em; height:22px; cursor:pointer }
.treemenu .ygtvtph { background: url(../../img/menu/expandh.gif) 0 6px no-repeat; width:1em; height:22px; cursor:pointer }
.treemenu .ygtvln { background: transparent; width:1em; height:20px; }
.treemenu .ygtvlm { background: url(../../img/menu/collapse.gif) 0 6px no-repeat; width:1em; height:22px; cursor:pointer }
.treemenu .ygtvlmh { background: url(../../img/menu/collapseh.gif) 0 6px no-repeat; width:1em; height:22px; cursor:pointer }
.treemenu .ygtvlp { background: url(../../img/menu/expand.gif) 0 6px no-repeat; width:1em; height:22px; cursor:pointer }
.treemenu .ygtvlph { background: url(../../img/menu/expandh.gif) 0 6px no-repeat; width:1em; height:22px; cursor:pointer }
.treemenu .ygtvloading { background: url(../../img/menu/loading.gif) 0 6px no-repeat; width:1em; height:22px; }
.treemenu .ygtvdepthcell { background: transparent; width:1em; height:20px; }
.treemenu .ygtvblankdepthcell {background: transparent; width:1em; height:20px; }
.treemenu .ygtvitem { border: 0px solid grey; }
.treemenu .ygtvchildren { }
.treemenu .ygtvlabel, .ygtvlabel:link, .ygtvlabel:visited, .ygtvlabel:hover {
font-size: 12px;
}

1
www/extras/yui/examples/treeview/css/screen.css Normal file
View file

@ -0,0 +1 @@
html, body { padding: 0px 0px 10px 0px; border: 0; margin: 0; } body { font: normal 11px verdana, sans-serif; color: #333; line-height: 19px; margin: 0; } #container { clear: both; text-align: left; padding: 0 0; margin: 0 0; } #containerTop { height:48px; } #pad { padding: 0px 20px 0px 20px; } a { text-decoration: underline; color: #46546C; } a:hover { text-decoration: underline; color: #4d77c3; } h1, h2, h3, h4, h5, h6 { font-family: palatino, georgia, "Times New Roman", serif; } h2 { font-size:16px; font-weight: bold; margin: 0 0 11px 0; } .border_2px { border: 1px solid #D8D8D8; padding: 2px; background: #fff; } .border_5px { border: 1px solid #D8D8D8; padding: 5px; background: #fff; margin: 0 0 4px 0; } img { padding: 0; margin: 0; border: 0; } form { padding: 0; margin: 0; } .input { width: 85px; font-size: 9px; } .submit { font-size: 9px; } #pageTitle { position:absolute;top:10px;left:90px; } #pageTitle H3 { font-size:14pt; color:#666666 } #header h1 { float:left; margin-top: 19px; margin-left: 50px; } #header h1 a { display: block; height: 19px; text-decoration: none; } #header { height: 60px; border: 0px solid #CFFB00; margin-bottom:0px; } #header h4 { position: relative; float: right; font-size:11px; letter-spacing: 1px; top: 10px; right: 30px; line-height: 15px; padding: 0 0 0 13px; margin: 0px; } #content { float: left; width: 500px; min-height:400px; padding:10px 0px; border: 0px solid #C13B00; margin-left: 50px; top:0px; } #content h1 { font-size:18px; margin:0px; } .newsItem { padding-bottom:25px; margin-bottom:25px; overflow: hidden; } .newsItem h3 { font-size:18px; margin:0px; } .newsItem h3 a { text-decoration:none; color:#6A7981; } .newsItem h3 a:hover { text-decoration:underline; color:#000; } .newsItemFooter, .newsItemFooter a { font-size:9px; color:#999; font-weight:normal; } .newsItemFooter a:hover { color:#222; } #footer { padding: 0px 0px 20px 0px; clear: both; color: #999; border-top:0px #CCC solid; margin:0px 26px 0px 30px } #footer a { color: #999; } #footer a:hover { color: #222; } #footerContainer { clear: both; } #rightbar { float: right; padding: 5px 5px 5px 5px; width: 304px; /* for IE5-Win */ width: 300px; border: 1px solid #333333; position:relative; right:48px; top:0px; background-color:#eeeeee; } #rightbar h2, #rightbar h3 { font-size:12px; text-align:center; color:#FFF; border-bottom:#848B8F solid 1px; border-right:#949B9F solid 1px; border-top:#eee solid 1px; padding:1px; margin:0px 0px 0px 0px; background-color:#383e45; width:100%; } #rightbar h2 a, #rightbar h3 a { font-size:12px; color:#FFF; text-decoration:none; display:block; } #rightBarPad { margin:0px; } #sidenav { margin: 0px 0; border-bottom: 1px solid #ddd; } #sidenav ul { margin: 0; padding: 0; border: 0; } #sidenav ul li { list-style: none; list-style-image: none !important; margin: 0; padding:0; } #sidenav ul li a { text-decoration: none; padding: 5px 0px 5px 0px; color: #4C5250; display: block; width: 187px; font-size: 11px !important; font-weight: bold; border-top: 1px solid #ddd; border-bottom: 1px solid #aaa; border-left: 1px solid #C7CBD0; text-shadow: -2px -2px 0px #FFF; } #sidenav ul li a:hover { /* background: url(../img/navHover2.png) top no-repeat; */ border-top: 1px solid #A1AAAF; border-bottom: 1px solid #CCC; border-right: 0px solid #C3C7CA; border-left: 1px solid #C3C7CA; text-shadow: 4px 4px 0px #C3C7CA; } .ylogo { position:absolute;top:5px;left:5px }

220
www/extras/yui/examples/treeview/default.html Normal file
View file

@ -0,0 +1,220 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>Yahoo! UI Library - Tree Control</title>
<link rel="stylesheet" type="text/css" href="http://us.js2.yimg.com/us.js.yimg.com/lib/common/css/fonts_2.0.0-b3.css" />
<link rel="stylesheet" type="text/css" href="http://us.js2.yimg.com/us.js.yimg.com/lib/common/css/grids_2.0.0-b3.css" />
<link rel="stylesheet" type="text/css" href="css/screen.css" />
<link rel="stylesheet" type="text/css" href="css/local/tree.css" />
</head>
<body>
<div id="pageTitle">
<h3>Tree Control</h3>
</div>
<script type="text/javascript" src="../../build/yahoo/yahoo.js" ></script>
<script type="text/javascript" src="../../build/event/event.js"></script>
<!-- The following are required for the logger -->
<script type="text/javascript" src="../../build/dom/dom.js"></script>
<script type="text/javascript" src="../../build/logger/logger.js"></script>
<!-- End logger reqs -->
<script type="text/javascript" src="../../build/treeview/treeview-debug.js" ></script>
<style type="text/css">
/* logger default styles */
/* font size is controlled here: default 77% */
#yui-log {position:absolute;top:1em;right:1em;font-size:77%;text-align:left;}
/* width is controlled here: default 31em */
.yui-log {background-color:#AAA;border:1px solid black;font-family:monospace;z-index:9000;}
.yui-log p {margin:1px;padding:.1em;}
.yui-log button {font-family:monospace;}
.yui-log .yui-log-hd {padding:.5em;background-color:#575757;color:#FFF;}
/* height is controlled here: default 20em*/
.yui-log .yui-log-bd {width:100%;height:20em;background-color:#FFF;border:1px solid gray;overflow:auto;}
.yui-log .yui-log-ft {margin-top:.5em;margin-bottom:1em;}
.yui-log .yui-log-ft .yui-log-categoryfilters {}
.yui-log .yui-log-ft .yui-log-sourcefilters {width:100%;border-top:1px solid #575757;margin-top:.75em;padding-top:.75em;}
.yui-log .yui-log-btns {position:relative;float:right;bottom:.25em;}
.yui-log .yui-log-filtergrp {margin-right:.5em;}
.yui-log .info {background-color:#A7CC25;} /* A7CC25 green */
.yui-log .warn {background-color:#F58516;} /* F58516 orange */
.yui-log .error {background-color:#E32F0B;} /* E32F0B red */
.yui-log .time {background-color:#A6C9D7;} /* A6C9D7 blue */
.yui-log .window {background-color:#F2E886;} /* F2E886 tan */
</style>
<div id="container">
<img class="ylogo" src="img/logo.gif" alt="" />
<div id="containerTop">
<div id="header">
<h1>
</h1>
<h4>&nbsp;</h4>
</div>
<div id="main">
<div id="rightbar">
<div id="rightBarPad">
<h3>Examples</h3>
<div id="linkage">
<ul>
<li><a href="default.html?mode=dist">Default tree widget</a></li>
<li><a href="dynamic.html?mode=dist">Dynamic load</a></li>
<li><a href="folders.html?mode=dist">Folder view</a></li>
<li><a href="menu.html?mode=dist">Menu</a></li>
<li><a href="html.html?mode=dist">HTML node</a></li>
<li><a href="multi.html?mode=dist">Multiple trees, different styles</a></li>
<li><a href="check.html?mode=dist">Task list</a></li>
<li><a href="anim.html?mode=dist">Fade animation</a></li>
</ul>
</div>
<script type="text/javascript">
//<![CDATA[
YAHOO.example.logApp = function() {
var divId;
return {
init: function(p_divId, p_toggleElId, p_clearElId) {
divId = p_divId
},
onload: function() {
if (YAHOO.widget.Logger) {
var reader = new YAHOO.widget.LogReader( "logDiv", { height: "400px" } );
//reader._onClickPauseBtn(null, reader);
}
}
};
} ();
YAHOO.util.Event.on(window, "load", YAHOO.example.logApp.onload);
//]]>
</script>
<div id="logDiv"></div>
</div>
</div>
<div id="content">
<form id="mainForm" action="javscript:;">
<div class="newsItem">
<h3>Default TreeView Widget</h3>
<p>
</p>
<div id="expandcontractdiv">
<a href="javascript:tree.expandAll()">Expand all</a>
<a href="javascript:tree.collapseAll()">Collapse all</a>
</div>
<div id="treeDiv1"></div>
</div>
</form>
</div>
<div id="footerContainer">
<div id="footer">
<p>&nbsp;</p>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
//<![CDATA[
var tree;
(function() {
var nodeIndex, nodes=[], callback = null;
function treeInit() {
buildRandomTextNodeTree();
}
function buildRandomTextNodeTree() {
tree = new YAHOO.widget.TreeView("treeDiv1");
for (var i = 0; i < Math.floor((Math.random()*4) + 3); i++) {
var tmpNode = new YAHOO.widget.TextNode("label-" + i, tree.getRoot(), false);
// tmpNode.collapse();
// tmpNode.expand();
// buildRandomTextBranch(tmpNode);
buildLargeBranch(tmpNode);
}
// Expand and collapse happen prior to the actual expand/collapse,
// and can be used to cancel the operation
tree.subscribe("expand", function(node) {
//alert(node.index + " was expanded");
// return false; // return false to cancel the expand
});
tree.subscribe("collapse", function(node) {
//alert(node.index + " was collapsed");
});
// Trees with TextNodes will fire an event for when the label is clicked:
tree.subscribe("labelClick", function(node) {
//alert(node.index + " label was clicked");
});
tree.draw();
}
function buildLargeBranch(node) {
if (node.depth < 10) {
YAHOO.log("buildRandomTextBranch: " + node.index);
for ( var i = 0; i < 10; i++ ) {
new YAHOO.widget.TextNode(node.label + "-" + i, node, false);
}
}
}
function buildRandomTextBranch(node) {
if (node.depth < 10) {
YAHOO.log("buildRandomTextBranch: " + node.index);
for ( var i = 0; i < Math.floor(Math.random() * 4) ; i++ ) {
var tmpNode = new YAHOO.widget.TextNode(node.label + "-" + i, node, false);
buildRandomTextBranch(tmpNode);
}
}
}
YAHOO.util.Event.addListener(window, "load", treeInit);
})();
//]]>
</script>
</body>
</html>

274
www/extras/yui/examples/treeview/dynamic.html Normal file
View file

@ -0,0 +1,274 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"><!--Yahoo! User Interface Library: http://twiki.corp.yahoo.com/view/Devel/PresentationPlatform--><!--Begin YUI CSS infrastructure, including Standard Reset, Standard Fonts, and CSS Page Grids -->
<link rel="stylesheet" type="text/css" href="../../build/fonts/fonts.css">
<link rel="stylesheet" type="text/css" href="../../build/grids/grids.css"><!--end YUI CSS infrastructure--><!--begin YUIL Utilities -->
<script src="../../build/yahoo/yahoo.js"></script>
<script src="../../build/event/event.js"></script>
<script src="../../build/treeview/treeview.js"></script>
<link rel="stylesheet" type="text/css" href="css/code.css">
<link rel="stylesheet" type="text/css" href="css/local/tree.css">
<script>
/*create namespace for examples:*/
YAHOO.namespace("example");
/* Using Crockford's "Module Pattern": */
YAHOO.example.treeExample = function() {
var tree, currentIconMode;
function changeIconMode() {
var newVal = parseInt(this.value);
if (newVal != currentIconMode) {
currentIconMode = newVal;
}
buildTree();
}
function loadNodeData(node, fnLoadComplete) {
//We'll randomize our loader with stock data; in many implementations,
//this step would be replaced with an XMLHttpRequest call to the server
//for more data.
//Array of India's States
var aStates = ["Andhra Pradesh","Arunachal Pradesh","Assam","Bihar","Chhattisgarh","Goa","Gujarat","Haryana","Himachal Pradesh","Jammu and Kashmir","Jharkhand","Karnataka","Kerala","Madhya Pradesh","Maharashtra","Manipur","Meghalaya","Mizoram","Nagaland","Orissa","Punjab","Rajasthan","Sikkim","Tamil Nadu","Tripura","Uttaranchal","Uttar","Pradesh","West Bengal"];
//Random number determines whether a node has children
var index = Math.round(Math.random()*100);
//if our random number is in range, we'll pretend that this node
//has children; here, we'll indicate that 70% of nodes have
//children.
if (index>30) {
//We'll use a random number to determine the number of
//children for each node:
var childCount = (Math.round(Math.random()*5) + 1);
//This is important: The primary job of the data loader function
//is to determine whether the node has children and then to
//actually create the child nodes if they are needed; here, we'll
//loop through to create each child node:
for (var i=0; i<childCount; i++) {
thisState = aStates[Math.round(Math.random()*27)];
var newNode = new YAHOO.widget.TextNode(thisState, node, false);
}
}
//When we're done creating child nodes, we execute the node's
//loadComplete callback method which comes in as our loader's
//second argument (we could also access it at node.loadComplete,
//if necessary):
fnLoadComplete();
}
function buildTree() {
//create a new tree:
tree = new YAHOO.widget.TreeView("treeContainer");
//turn dynamic loading on for entire tree:
tree.setDynamicLoad(loadNodeData, currentIconMode);
//get root node for tree:
var root = tree.getRoot();
//add child nodes for tree:
var tmpNode1 = new YAHOO.widget.TextNode("First Node", root, false);
var tmpNode2 = new YAHOO.widget.TextNode("Second Node", root, false);
var tmpNode3 = new YAHOO.widget.TextNode("Third Node", root, false);
var tmpNode4 = new YAHOO.widget.TextNode("Fourth Node", root, false);
var tmpNode5 = new YAHOO.widget.TextNode("Fifth Node", root, false);
//render tree with these five nodes; all descendants of these nodes
//will be generated as needed by the dynamic loader.
tree.draw();
}
return {
init: function() {
YAHOO.util.Event.on(["mode0", "mode1"], "click", changeIconMode);
var el = document.getElementById("mode1");
if (el && el.checked) {
currentIconMode = parseInt(el.value);
} else {
currentIconMode = 0;
}
buildTree();
}
}
} ();
YAHOO.util.Event.addListener(window, "load", YAHOO.example.treeExample.init, YAHOO.example.treeExample,true)
</script>
<title>Dynamic TreeView Example</title>
</head>
<body id="yahoo">
<!-- id: optional property or feature signature -->
<div id="doc" class="yui-t5"><!-- possible values: t1, t2, t3, t4, t5, t6, t7 -->
<div id="hd">
<h1>TreeView Example</h1>
</div>
<div id="bd">
<!-- start: primary column from outer template -->
<div id="yui-main">
<div class="yui-b">
<p>In
this example, the TreeView control's dyamic loading functionality is
explored. Dynamic loading of child nodes allows you to optmize
performance by only loading data for and creating the nodes that will
be visible when the tree is rendered. Nodes that are not expanded when
the Tree's draw method is invoked are left childless in the initial
state. When such a node is expanded (either by user action or by
script), a dynamic loader function is called. That function has three
important roles:</p>
<ol>
<li><strong>Check for child nodes:</strong>
The dynamic loader function will check for child nodes by evaluating
in-page data (for example, data held in a JavaScript array or object)
or by retrieving data about the expanding node from the server via
XMLHttpRequest. In the example on this page, an in-page random list
generator is used to generate the Tree structure. </li>
<li><strong>Add child nodes, if present:</strong>
If it determines that child node's are present for the expanding node,
the dynamic loader must add those child nodes to the Tree instance.
Because these nodes are only added when needed, the overall complexity
of the Tree's complexity (in JavaScript and in the DOM) is reduced and
its initial render time is much faster.</li>
<li><strong>Invoke the expanding node's callback method:</strong>
Once the dynamic loader method determines whether the expanding node
has children (and adds any children that may be present), it must
notify the expanding node's object that dynamic loading is complete. It
does this via a callback method which is passed into the dynamic loader
as an argument.</li>
</ol>
<h3>Creating a Dynamic Loader Method</h3>
<p>In
this example, our dynamic loader method will accomplish its first task
(checking for child nodes) by using a random number generator; we'll
specify that roughly 70% of our nodes have children. When there are
children present, there will be children will between one and six
children (also randomly enumerated) whose labels are drawn from an
array of Indian states.</p>
<p>Our method, which we'll call <code>loadNodeData</code>, will be
passed two arguments by the Tree instance when called: The first is a
reference to the expanding node's node object; the second is the
callback method that we need to call when we're done adding children to
the expanding node. The method as it appears on this page (only the
array of state names has been truncated) follows, with comments
glossing each step:</p>
<pre><textarea name="code" class="JScript" cols="60" rows="1">loadNodeData: function(node, fnLoadComplete) {
//Array of India's States
var aStates = ["Andhra Pradesh",
"Arunachal Pradesh","Assam",
...
];
//Random number determines whether a node has children
var index = Math.round(Math.random()*100);
//if our random number is in range, we'll pretend that this node
//has children; here, we'll indicate that 70% of nodes have
//children.
if (index&gt;30) {
//We'll use a random number to determine the number of
//children for each node:
var childCount = (Math.round(Math.random()*5) + 1);
//This is important: The primary job of the data loader function
//is to determine whether the node has children and then to
//actually create the child nodes if they are needed; here, we'll
//loop through to create each child node:
for (var i=0; i&lt;childCount; i++) {
thisState = aStates[Math.round(Math.random()*27)];
var newNode = new YAHOO.widget.TextNode(thisState, node, false);
}
}
//When we're done creating child nodes, we execute the node's
//loadComplete callback method which comes in as our loader's
//second argument (we could also access it at node.loadComplete,
//if necessary):
fnLoadComplete();
}</textarea></pre>
<h3>Setting Up the Tree Instance and Configuring It for Dynamic Loading</h3>
<p>Creating
the initial state of a Tree object that will be configured for dynamic
loading is no different than for non-dynamic Tree instances &#8212; use the
Tree constructor to create your new instance:</p>
<pre><textarea name="code" class="JScript" cols="60" rows="1">//create a new tree:
tree = new YAHOO.widget.TreeView("treeContainer");</textarea></pre>
<p>In the example on this page, the entire tree is configured for
dynamic loading. That will result in all nodes having their children
populated by the dynamic loader method when they are expanded for the
first time. (You can also choose to specify individual nodes and their
descendants as being dynamically loaded.) To the Tree instance for
dynamic loading, merely pass the instance's <code>setDynamicLoad</code> method a reference to your dynamic loader method:</p>
<pre><textarea name="code" class="JScript" cols="60" rows="1">//turn dynamic loading on for entire tree:
tree.setDynamicLoad(this.loadNodeData);
</textarea></pre>
<p>Having created a Tree instance and configured it for dynamic
loading, we can now add the tree's top-level nodes and then render the
Tree via its <code>draw</code> method:</p>
<pre><textarea name="code" class="JScript" cols="60" rows="1">//add child nodes for tree:
var tmpNode1 = new YAHOO.widget.TextNode("First Node", root, false);
var tmpNode2 = new YAHOO.widget.TextNode("Second Node", root, false);
var tmpNode3 = new YAHOO.widget.TextNode("Third Node", root, false);
var tmpNode4 = new YAHOO.widget.TextNode("Fourth Node", root, false);
var tmpNode5 = new YAHOO.widget.TextNode("Fifth Node", root, false);
//render tree with these five nodes; all descendants of these nodes
//will be generated as needed by the dynamic loader.
tree.draw();
</textarea></pre>
<p>With that, our tree renders on the page, showing its five top-level
nodes. As the user interacts with the tree, child nodes will be added
and displayed based on the output of the <code>loadNodeData</code> method.</p>
<h3>Childless Node Style</h3><p>There are two built-in visual treatments for
childless nodes. Before a dynamically loaded node is expanded, its icon
indicates that it can be expanded &mdash; this reflects the possibility that
the dynamic loader will find and populate children for that node if it is
expanded. However, once the Tree determines that a node has no children, it
can reflect the childless state either through the "expanded" icon (<img
src="">) or by omitting the icon entirely. In this example, we've
added a control that enables you to experiment with each setting to explore its
visual impact</p><p>The default visual treatment for a childless node is the
"expanded" icon. To change this setting, pass a second argument to your
<code>setDynamicLoad</code> method &mdash; pass a value of <code>1</code> to
use the iconless visual treatment.</p> </div> </div> <!-- end: primary column
from outer template -->
<!-- start: secondary column from outer template --> <div
class="yui-b"> <h3>Dynamically Loaded TreeView:</h3> <div
id="treeContainer"></div> <h3>Childless Node Style:</h3> <dd> <label>
<input type="radio" id="mode0" name="mode" value ="0" checked />
Expand/Collapse </label> </dd> <dd> <label> <input type="radio"
id="mode1" name="mode" value ="1" /> Leaf Node </label> </dd> </div>
<!-- end: secondary column from outer template -->
</div> <div id="ft"> </div> </div> <script
src="js/dpSyntaxHighlighter.js"></script> <script language="javascript">
dp.SyntaxHighlighter.HighlightAll('code'); </script> </body></html>

184
www/extras/yui/examples/treeview/folders.html Normal file
View file

@ -0,0 +1,184 @@
<!doctype html public "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Yahoo! UI Library - Tree Control</title>
<link rel="stylesheet" type="text/css" href="css/screen.css">
</head>
<body onload="treeInit()">
<link rel="stylesheet" type="text/css" href="css/folders/tree.css">
<div id="pageTitle">
<h3>Tree Control</h3>
</div>
<script type="text/javascript" src="../../build/yahoo/yahoo.js" ></script>
<script type="text/javascript" src="../../build/event/event.js"></script>
<!-- The following are required for the logger -->
<script type="text/javascript" src="../../build/dom/dom.js"></script>
<script type="text/javascript" src="../../build/logger/logger.js"></script>
<!-- End logger reqs -->
<script type="text/javascript" src="../../build/treeview/treeview-debug.js" ></script>
<style type="text/css">
/* logger default styles */
/* font size is controlled here: default 77% */
#yui-log {position:absolute;top:1em;right:1em;font-size:77%;text-align:left;}
/* width is controlled here: default 31em */
.yui-log {background-color:#AAA;border:1px solid black;font-family:monospace;z-index:9000;}
.yui-log p {margin:1px;padding:.1em;}
.yui-log button {font-family:monospace;}
.yui-log .yui-log-hd {padding:.5em;background-color:#575757;color:#FFF;}
/* height is controlled here: default 20em*/
.yui-log .yui-log-bd {width:100%;height:20em;background-color:#FFF;border:1px solid gray;overflow:auto;}
.yui-log .yui-log-ft {margin-top:.5em;margin-bottom:1em;}
.yui-log .yui-log-ft .yui-log-categoryfilters {}
.yui-log .yui-log-ft .yui-log-sourcefilters {width:100%;border-top:1px solid #575757;margin-top:.75em;padding-top:.75em;}
.yui-log .yui-log-btns {position:relative;float:right;bottom:.25em;}
.yui-log .yui-log-filtergrp {margin-right:.5em;}
.yui-log .info {background-color:#A7CC25;} /* A7CC25 green */
.yui-log .warn {background-color:#F58516;} /* F58516 orange */
.yui-log .error {background-color:#E32F0B;} /* E32F0B red */
.yui-log .time {background-color:#A6C9D7;} /* A6C9D7 blue */
.yui-log .window {background-color:#F2E886;} /* F2E886 tan */
</style>
<div id="container">
<img class="ylogo" src="img/logo.gif" alt="" />
<div id="containerTop">
<div id="header">
<h1>
</h1>
<h4>&nbsp;</h4>
</div>
<div id="main">
<div id="rightbar">
<div id="rightBarPad">
<h3>Examples</h3>
<div id="linkage">
<ul>
<li><a href="default.html?mode=dist">Default tree widget</a></li>
<li><a href="dynamic.html?mode=dist">Dynamic load</a></li>
<li><a href="folders.html?mode=dist">Folder view</a></li>
<li><a href="menu.html?mode=dist">Menu</a></li>
<li><a href="html.html?mode=dist">HTML node</a></li>
<li><a href="multi.html?mode=dist">Multiple trees, different styles</a></li>
<li><a href="check.html?mode=dist">Task list</a></li>
<li><a href="anim.html?mode=dist">Fade animation</a></li>
</ul>
</div>
<script type="text/javascript">
//<![CDATA[
YAHOO.example.logApp = function() {
var divId;
return {
init: function(p_divId, p_toggleElId, p_clearElId) {
divId = p_divId
},
onload: function() {
if (YAHOO.widget.Logger) {
var reader = new YAHOO.widget.LogReader( "logDiv", { height: "400px" } );
//reader._onClickPauseBtn(null, reader);
}
}
};
} ();
YAHOO.util.Event.on(window, "load", YAHOO.example.logApp.onload);
//]]>
</script>
<div id="logDiv"></div>
</div>
</div>
<div id="content">
<form name="mainForm" action="javscript:;">
<div class="newsItem">
<h3>Folders</h3>
<p>
</p>
<div id="expandcontractdiv">
<a href="javascript:tree.expandAll()">Expand all</a>
<a href="javascript:tree.collapseAll()">Collapse all</a>
</div>
<div id="treeDiv1"></div>
</div>
</form>
</div>
<div id="footerContainer">
<div id="footer">
<p>&nbsp;</p>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
var tree;
var nodes = new Array();
var nodeIndex;
function treeInit() {
buildRandomTextNodeTree();
}
function buildRandomTextNodeTree() {
tree = new YAHOO.widget.TreeView("treeDiv1");
for (var i = 0; i < Math.floor((Math.random()*4) + 3); i++) {
var tmpNode = new YAHOO.widget.TextNode("label-" + i, tree.getRoot(), false);
buildRandomTextBranch(tmpNode);
}
tree.draw();
}
var callback = null;
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.TextNode(node.label + "-" + i, node, false);
buildRandomTextBranch(tmpNode);
}
}
}
</script>
</body>
</html>

209
www/extras/yui/examples/treeview/html.html Normal file
View file

@ -0,0 +1,209 @@
<!doctype html public "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Yahoo! UI Library - Tree Control</title>
<link rel="stylesheet" type="text/css" href="css/screen.css">
</head>
<body>
<link rel="stylesheet" type="text/css" href="css/local/tree.css">
<div id="pageTitle">
<h3>Tree Control</h3>
</div>
<script type="text/javascript" src="../../build/yahoo/yahoo.js" ></script>
<script type="text/javascript" src="../../build/event/event.js"></script>
<!-- The following are required for the logger -->
<script type="text/javascript" src="../../build/dom/dom.js"></script>
<script type="text/javascript" src="../../build/logger/logger.js"></script>
<!-- End logger reqs -->
<script type="text/javascript" src="../../build/treeview/treeview-debug.js" ></script>
<style type="text/css">
/* logger default styles */
/* font size is controlled here: default 77% */
#yui-log {position:absolute;top:1em;right:1em;font-size:77%;text-align:left;}
/* width is controlled here: default 31em */
.yui-log {background-color:#AAA;border:1px solid black;font-family:monospace;z-index:9000;}
.yui-log p {margin:1px;padding:.1em;}
.yui-log button {font-family:monospace;}
.yui-log .yui-log-hd {padding:.5em;background-color:#575757;color:#FFF;}
/* height is controlled here: default 20em*/
.yui-log .yui-log-bd {width:100%;height:20em;background-color:#FFF;border:1px solid gray;overflow:auto;}
.yui-log .yui-log-ft {margin-top:.5em;margin-bottom:1em;}
.yui-log .yui-log-ft .yui-log-categoryfilters {}
.yui-log .yui-log-ft .yui-log-sourcefilters {width:100%;border-top:1px solid #575757;margin-top:.75em;padding-top:.75em;}
.yui-log .yui-log-btns {position:relative;float:right;bottom:.25em;}
.yui-log .yui-log-filtergrp {margin-right:.5em;}
.yui-log .info {background-color:#A7CC25;} /* A7CC25 green */
.yui-log .warn {background-color:#F58516;} /* F58516 orange */
.yui-log .error {background-color:#E32F0B;} /* E32F0B red */
.yui-log .time {background-color:#A6C9D7;} /* A6C9D7 blue */
.yui-log .window {background-color:#F2E886;} /* F2E886 tan */
</style>
<div id="container">
<img class="ylogo" src="img/logo.gif" alt="" />
<div id="containerTop">
<div id="header">
<h1>
</h1>
<h4>&nbsp;</h4>
</div>
<div id="main">
<div id="rightbar">
<div id="rightBarPad">
<h3>Examples</h3>
<div id="linkage">
<ul>
<li><a href="default.html?mode=dist">Default tree widget</a></li>
<li><a href="dynamic.html?mode=dist">Dynamic load</a></li>
<li><a href="folders.html?mode=dist">Folder view</a></li>
<li><a href="menu.html?mode=dist">Menu</a></li>
<li><a href="html.html?mode=dist">HTML node</a></li>
<li><a href="multi.html?mode=dist">Multiple trees, different styles</a></li>
<li><a href="check.html?mode=dist">Task list</a></li>
<li><a href="anim.html?mode=dist">Fade animation</a></li>
</ul>
</div>
<script type="text/javascript">
//<![CDATA[
YAHOO.example.logApp = function() {
var divId;
return {
init: function(p_divId, p_toggleElId, p_clearElId) {
divId = p_divId
},
onload: function() {
if (YAHOO.widget.Logger) {
var reader = new YAHOO.widget.LogReader( "logDiv", { height: "400px" } );
//reader._onClickPauseBtn(null, reader);
}
}
};
} ();
YAHOO.util.Event.on(window, "load", YAHOO.example.logApp.onload);
//]]>
</script>
<div id="logDiv"></div>
</div>
</div>
<div id="content">
<form name="mainForm" action="javscript:;">
<div class="newsItem">
<h3>HTML Node</h3>
<p>
</p>
<div id="expandcontractdiv">
<a href="javascript:tree.expandAll()">Expand all</a>
<a href="javascript:tree.collapseAll()">Collapse all</a>
</div>
<div id="treeDiv1"></div>
</div>
</form>
</div>
<div id="footerContainer">
<div id="footer">
<p>&nbsp;</p>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
var tree;
function treeInit() {
buildRandomTextNodeTree();
}
function buildRandomTextNodeTree() {
tree = new YAHOO.widget.TreeView("treeDiv1");
for (var i = 0; i < Math.floor((Math.random()*4) + 3); i++) {
var tmpNode = new YAHOO.widget.TextNode("label-" + i, tree.getRoot(), false);
buildRandomTextBranch(tmpNode);
// var tmpNode2 = new YAHOO.widget.HTMLNode("label-" + i, tree.getRoot(), false, true);
buildRandomTextBranch(tmpNode);
// buildRandomTextBranch(tmpNode2);
}
tree.draw();
}
var callback = null;
function buildRandomTextBranch(node) {
if (node.depth < 3) {
YAHOO.log("buildRandomTextBranch: " + node.index);
for ( var i = 0; i < Math.floor(Math.random() * 4) + 1 ; i++ ) {
tmpNode = new YAHOO.widget.TextNode(node.label + "-" + i, node, false);
// tmpNode2 = new YAHOO.widget.HTMLNode(node.html + "-" + i, node, false, true);
// if (node.depth == 2) {
buildRandomHTMLBranch(tmpNode);
// buildRandomHTMLBranch(tmpNode2);
// } else {
// buildRandomTextBranch(tmpNode);
// }
}
}
}
var counter = 0;
function buildRandomHTMLBranch(node) {
YAHOO.log("buildRandomHTMLBranch: " + node.index);
var id = "htmlnode_" + counter++;
var html = '<div id="' + id + '"' +
' style="border:1px solid #aaaaaa; ' +
' position:relative; ' +
' height:100px; width:200px; ' +
' margin-bottom:10px; ' +
' background-color: #c5dbfc">' +
'Info ' + id + '</div>';
// new YAHOO.widget.HTMLNode(html, node, false, true);
new YAHOO.widget.HTMLNode(html, node, false, false);
}
YAHOO.util.Event.addListener(window, "load", treeInit);
</script>
</body>
</html>

BIN
www/extras/yui/examples/treeview/img/bullet.gif Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 172 B

BIN
www/extras/yui/examples/treeview/img/check/check0.gif Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 608 B

BIN
www/extras/yui/examples/treeview/img/check/check1.gif Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 609 B

BIN
www/extras/yui/examples/treeview/img/check/check2.gif Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 622 B

BIN
www/extras/yui/examples/treeview/img/check/lm.gif Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 94 B

BIN
www/extras/yui/examples/treeview/img/check/lmh.gif Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 106 B

BIN
www/extras/yui/examples/treeview/img/check/ln.gif Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 142 B

BIN
www/extras/yui/examples/treeview/img/check/loading.gif Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 2.6 KiB

BIN
www/extras/yui/examples/treeview/img/check/lp.gif Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 130 B

BIN
www/extras/yui/examples/treeview/img/check/lph.gif Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 111 B

BIN
www/extras/yui/examples/treeview/img/check/tm.gif Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 545 B

BIN
www/extras/yui/examples/treeview/img/check/tmh.gif Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 563 B

BIN
www/extras/yui/examples/treeview/img/check/tn.gif Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 504 B

BIN
www/extras/yui/examples/treeview/img/check/tp.gif Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 539 B

BIN
www/extras/yui/examples/treeview/img/check/tph.gif Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 568 B

BIN
www/extras/yui/examples/treeview/img/check/vline.gif Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 503 B

BIN
www/extras/yui/examples/treeview/img/default/lm.gif Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 94 B

BIN
www/extras/yui/examples/treeview/img/default/lmh.gif Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 106 B

BIN
www/extras/yui/examples/treeview/img/default/ln.gif Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 142 B

BIN
www/extras/yui/examples/treeview/img/default/loading.gif Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 2.6 KiB

BIN
www/extras/yui/examples/treeview/img/default/lp.gif Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 130 B

BIN
www/extras/yui/examples/treeview/img/default/lph.gif Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 111 B

BIN
www/extras/yui/examples/treeview/img/default/tm.gif Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 545 B

BIN
www/extras/yui/examples/treeview/img/default/tmh.gif Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 563 B

BIN
www/extras/yui/examples/treeview/img/default/tn.gif Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 504 B

BIN
www/extras/yui/examples/treeview/img/default/tp.gif Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 539 B

BIN
www/extras/yui/examples/treeview/img/default/tph.gif Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 568 B

BIN
www/extras/yui/examples/treeview/img/default/vline.gif Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 503 B

BIN
www/extras/yui/examples/treeview/img/folders/lm.gif Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 666 B

BIN
www/extras/yui/examples/treeview/img/folders/lmh.gif Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 677 B

BIN
www/extras/yui/examples/treeview/img/folders/ln.gif Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 142 B

BIN
www/extras/yui/examples/treeview/img/folders/loading.gif Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 2.6 KiB

BIN
www/extras/yui/examples/treeview/img/folders/lp.gif Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 641 B

BIN
www/extras/yui/examples/treeview/img/folders/lph.gif Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 651 B

BIN
www/extras/yui/examples/treeview/img/folders/tm.gif Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 1.3 KiB

BIN
www/extras/yui/examples/treeview/img/folders/tmh.gif Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 1.3 KiB

BIN
www/extras/yui/examples/treeview/img/folders/tn.gif Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 504 B

BIN
www/extras/yui/examples/treeview/img/folders/tp.gif Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 1.2 KiB

BIN
www/extras/yui/examples/treeview/img/folders/tph.gif Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 1.2 KiB

BIN
www/extras/yui/examples/treeview/img/folders/vline.gif Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 503 B

BIN
www/extras/yui/examples/treeview/img/greybg.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 197 B

BIN
www/extras/yui/examples/treeview/img/header.gif Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 203 B

BIN
www/extras/yui/examples/treeview/img/logo.gif Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 705 B

BIN
www/extras/yui/examples/treeview/img/menu/collapse.gif Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 56 B

BIN
www/extras/yui/examples/treeview/img/menu/collapseh.gif Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 67 B

BIN
www/extras/yui/examples/treeview/img/menu/collapseon.gif Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 64 B

BIN
www/extras/yui/examples/treeview/img/menu/dash.gif Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 114 B

BIN
www/extras/yui/examples/treeview/img/menu/expand.gif Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 57 B

BIN
www/extras/yui/examples/treeview/img/menu/expandh.gif Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 66 B

BIN
www/extras/yui/examples/treeview/img/menu/expandon.gif Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 65 B

BIN
www/extras/yui/examples/treeview/img/menu/loading.gif Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 2.6 KiB

BIN
www/extras/yui/examples/treeview/img/navHover2.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 875 B

BIN
www/extras/yui/examples/treeview/img/qbottom.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 1.3 KiB

BIN
www/extras/yui/examples/treeview/img/qmiddle.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 385 B

BIN
www/extras/yui/examples/treeview/img/qtop.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 2 KiB

44
www/extras/yui/examples/treeview/index.html Normal file
View file

@ -0,0 +1,44 @@
<!doctype html public "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Yahoo! UI Library - Tree Control</title>
<link rel="stylesheet" type="text/css" media="screen" href="css/screen.css">
</head>
<body style="height:100%">
<img src="img/logo.gif" style="position:absolute;top:5px;left:5px" />
<div id="pageTitle">
<h3>Tree Control</h3>
</div>
<div id="content">
<form name="dragDropForm" action="javscript:;">
<div class="newsItem">
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p><a href="default.html?mode=dist">Default TreeView widget</a></p>
<p><a href="dynamic.html?mode=dist">Dynamic load</a></p>
<p><a href="folders.html?mode=dist">Folder style</a></p>
<p><a href="menu.html?mode=dist">Menu style</a></p>
<p><a href="html.html?mode=dist">HTML node</a></p>
<p><a href="multi.html?mode=dist">Mutiple trees, different styles</a></p>
<p><a href="check.html?mode=dist">Task list</a></p>
<p><a href="anim.html?mode=dist">Fade animation</a></p>
</div>
</form>
</div>
<div id="footerContainer">
<div id="footer">
<p>&nbsp;</p>
</div>
</div>
</div>
</div>
</div>
</body>
</html>

23
www/extras/yui/examples/treeview/js/CheckOnClickNode.js vendored Normal file
View file

@ -0,0 +1,23 @@
/* Copyright (c) 2006 Yahoo! Inc. All rights reserved. */
YAHOO.example.CheckOnClickNode = function(oData, oParent, expanded, checked) {
if (oParent) {
this.init(oData, oParent, expanded);
this.setUpLabel(oData);
this.checked = checked;
}
};
YAHOO.example.CheckOnClickNode.prototype = new YAHOO.widget.TaskNode();
YAHOO.example.CheckOnClickNode.prototype.getCheckLink = function() {
return "var n=YAHOO.widget.TreeView.getNode(\'" + this.tree.id + "\'," +
this.index + "); " +
"var r = n.checkClick(); " +
"YAHOO.example.customCheckClickFunction(n);" +
"return r;";
};
YAHOO.example.customCheckClickFunction = function(node) {
alert(node.checked + "(" + node.checkState + ")");
};

275
www/extras/yui/examples/treeview/js/TaskNode.js vendored Normal file
View file

@ -0,0 +1,275 @@
/**
* The check box marks a task complete. It is a simulated form field
* with three states ...
* 0=unchecked, 1=some children checked, 2=all children checked
* When a task is clicked, the state of the nodes and parent and children
* are updated, and this behavior cascades.
*
* @extends YAHOO.widget.TextNode
* @constructor
* @param oData {object} A string or object containing the data that will
* be used to render this node.
* @param oParent {Node} This node's parent node
* @param expanded {boolean} The initial expanded/collapsed state
* @param checked {boolean} The initial checked/unchecked state
*/
YAHOO.widget.TaskNode = function(oData, oParent, expanded, checked) {
if (oData) {
this.init(oData, oParent, expanded);
this.setUpLabel(oData);
this.setUpCheck(checked);
}
this.logger = new YAHOO.widget.LogWriter(this.toString());
};
YAHOO.extend(YAHOO.widget.TaskNode, YAHOO.widget.TextNode, {
/**
* True if checkstate is 1 (some children checked) or 2 (all children checked),
* false if 0.
* @type boolean
*/
checked: false,
/**
* checkState
* 0=unchecked, 1=some children checked, 2=all children checked
* @type int
*/
checkState: 0,
taskNodeParentChange: function() {
/**
* Custom event that is fired when the check box is clicked. The
* custom event is defined on the tree instance, so there is a single
* event that handles all nodes in the tree. The node clicked is
* provided as an argument. Note, your custom node implentation can
* implement its own node specific events this way.
*
* @event checkClick
* @for YAHOO.widget.TreeView
* @param {YAHOO.widget.Node} node the node clicked
*/
if (this.tree && !this.tree.hasEvent("checkClick")) {
this.tree.createEvent("checkClick", this.tree);
}
},
setUpCheck: function(checked) {
if (checked && checked === true) {
this.check();
}
// set up the custom event on the tree
this.taskNodeParentChange();
this.subscribe("parentChange", this.taskNodeParentChange);
},
/**
* The id of the check element
* @for YAHOO.widget.TaskNode
* @type string
*/
getCheckElId: function() {
return "ygtvcheck" + this.index;
},
/**
* Returns the check box element
* @return the check html element (img)
*/
getCheckEl: function() {
return document.getElementById(this.getCheckElId());
},
/**
* The style of the check element, derived from its current state
* @return {string} the css style for the current check state
*/
getCheckStyle: function() {
return "ygtvcheck" + this.checkState;
},
/**
* Returns the link that will invoke this node's check toggle
* @return {string} returns the link required to adjust the checkbox state
*/
getCheckLink: function() {
return "YAHOO.widget.TreeView.getNode(\'" + this.tree.id + "\'," +
this.index + ").checkClick()";
},
/**
* Invoked when the user clicks the check box
*/
checkClick: function() {
this.logger.log("previous checkstate: " + this.checkState);
if (this.checkState === 0) {
this.check();
} else {
this.uncheck();
}
this.onCheckClick();
this.tree.fireEvent("checkClick", this);
},
/**
* Override to get the check click event
*/
onCheckClick: function() {
this.logger.log("onCheckClick: " + this);
},
/**
* Refresh the state of this node's parent, and cascade up.
*/
updateParent: function() {
var p = this.parent;
if (!p || !p.updateParent) {
this.logger.log("Abort udpate parent: " + this.index);
return;
}
var somethingChecked = false;
var somethingNotChecked = false;
for (var i=0;i< p.children.length;++i) {
if (p.children[i].checked) {
somethingChecked = true;
// checkState will be 1 if the child node has unchecked children
if (p.children[i].checkState == 1) {
somethingNotChecked = true;
}
} else {
somethingNotChecked = true;
}
}
if (somethingChecked) {
p.setCheckState( (somethingNotChecked) ? 1 : 2 );
} else {
p.setCheckState(0);
}
p.updateCheckHtml();
p.updateParent();
},
/**
* If the node has been rendered, update the html to reflect the current
* state of the node.
*/
updateCheckHtml: function() {
if (this.parent && this.parent.childrenRendered) {
this.getCheckEl().className = this.getCheckStyle();
}
},
/**
* Updates the state. The checked property is true if the state is 1 or 2
*
* @param the new check state
*/
setCheckState: function(state) {
this.checkState = state;
this.checked = (state > 0);
},
/**
* Check this node
*/
check: function() {
this.logger.log("check");
this.setCheckState(2);
for (var i=0; i<this.children.length; ++i) {
this.children[i].check();
}
this.updateCheckHtml();
this.updateParent();
},
/**
* Uncheck this node
*/
uncheck: function() {
this.setCheckState(0);
for (var i=0; i<this.children.length; ++i) {
this.children[i].uncheck();
}
this.updateCheckHtml();
this.updateParent();
},
// Overrides YAHOO.widget.TextNode
getNodeHtml: function() {
this.logger.log("Generating html");
var sb = new Array();
sb[sb.length] = '<table border="0" cellpadding="0" cellspacing="0">';
sb[sb.length] = '<tr>';
for (var i=0;i<this.depth;++i) {
sb[sb.length] = '<td class="' + this.getDepthStyle(i) + '">&#160;</td>';
}
sb[sb.length] = '<td';
sb[sb.length] = ' id="' + this.getToggleElId() + '"';
sb[sb.length] = ' class="' + this.getStyle() + '"';
if (this.hasChildren(true)) {
sb[sb.length] = ' onmouseover="this.className=';
sb[sb.length] = 'YAHOO.widget.TreeView.getNode(\'';
sb[sb.length] = this.tree.id + '\',' + this.index + ').getHoverStyle()"';
sb[sb.length] = ' onmouseout="this.className=';
sb[sb.length] = 'YAHOO.widget.TreeView.getNode(\'';
sb[sb.length] = this.tree.id + '\',' + this.index + ').getStyle()"';
}
sb[sb.length] = ' onclick="javascript:' + this.getToggleLink() + '">&#160;';
sb[sb.length] = '</td>';
// check box
sb[sb.length] = '<td';
sb[sb.length] = ' id="' + this.getCheckElId() + '"';
sb[sb.length] = ' class="' + this.getCheckStyle() + '"';
sb[sb.length] = ' onclick="javascript:' + this.getCheckLink() + '">';
sb[sb.length] = '&#160;</td>';
sb[sb.length] = '<td>';
sb[sb.length] = '<a';
sb[sb.length] = ' id="' + this.labelElId + '"';
sb[sb.length] = ' class="' + this.labelStyle + '"';
sb[sb.length] = ' href="' + this.href + '"';
sb[sb.length] = ' target="' + this.target + '"';
if (this.hasChildren(true)) {
sb[sb.length] = ' onmouseover="document.getElementById(\'';
sb[sb.length] = this.getToggleElId() + '\').className=';
sb[sb.length] = 'YAHOO.widget.TreeView.getNode(\'';
sb[sb.length] = this.tree.id + '\',' + this.index + ').getHoverStyle()"';
sb[sb.length] = ' onmouseout="document.getElementById(\'';
sb[sb.length] = this.getToggleElId() + '\').className=';
sb[sb.length] = 'YAHOO.widget.TreeView.getNode(\'';
sb[sb.length] = this.tree.id + '\',' + this.index + ').getStyle()"';
}
sb[sb.length] = ' >';
sb[sb.length] = this.label;
sb[sb.length] = '</a>';
sb[sb.length] = '</td>';
sb[sb.length] = '</tr>';
sb[sb.length] = '</table>';
return sb.join("");
},
toString: function() {
return "TaskNode (" + this.index + ") " + this.label;
}
});

736
www/extras/yui/examples/treeview/js/dpSyntaxHighlighter.js vendored Normal file
View file

@ -0,0 +1,736 @@
/**
* Code Syntax Highlighter.
* Version 1.2.0
* Copyright (C) 2004 Alex Gorbatchev.
* http://www.dreamprojections.com/syntaxhighlighter/
*
* This library is free software; you can redistribute it and/or modify it under the terms of the GNU Lesser General
* Public License as published by the Free Software Foundation; either version 2.1 of the License, or (at your option)
* any later version.
*
* This library is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied
* warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU Lesser General Public License for more
* details.
*
* You should have received a copy of the GNU Lesser General Public License along with this library; if not, write to
* the Free Software Foundation, Inc., 59 Temple Place, Suite 330, Boston, MA 02111-1307 USA
*/
//
// create namespaces
//
var dp = {
sh : // dp.sh
{
Utils : {}, // dp.sh.Utils
Brushes : {}, // dp.sh.Brushes
Strings : {}
},
Version : '1.2.0'
};
dp.sh.Strings = {
AboutDialog : '<html><head><title>About...</title></head><body class="dp-about"><table cellspacing="0"><tr><td class="copy"><div class="para title">dp.SyntaxHighlighter</div><div class="para">Version: {V}</div><div class="para"><a href="http://www.dreamprojections.com/sh/?ref=about" target="_blank">http://www.dreamprojections.com/SyntaxHighlighter</a></div>&copy;2004-2005 Alex Gorbatchev. All right reserved.</td></tr><tr><td class="footer"><input type="button" class="close" value="OK" onClick="window.close()"/></td></tr></table></body></html>',
// tools
ExpandCode : '+ expand code',
ViewPlain : 'view plain',
Print : '',
CopyToClipboard : '',
About : '',
CopiedToClipboard : 'The code is in your clipboard now.'
};
dp.SyntaxHighlighter = dp.sh;
//
// Dialog and toolbar functions
//
dp.sh.Utils.Expand = function(sender)
{
var table = sender;
var span = sender;
// find the span in which the text label and pipe contained so we can hide it
while(span != null && span.tagName != 'SPAN')
span = span.parentNode;
// find the table
while(table != null && table.tagName != 'TABLE')
table = table.parentNode;
// remove the 'expand code' button
span.parentNode.removeChild(span);
table.tBodies[0].className = 'show';
table.parentNode.style.height = '100%'; // containing div isn't getting updated properly when the TBODY is shown
}
// opens a new windows and puts the original unformatted source code inside.
dp.sh.Utils.ViewSource = function(sender)
{
var code = sender.parentNode.originalCode;
var wnd = window.open('', '_blank', 'width=750, height=400, location=0, resizable=1, menubar=0, scrollbars=1');
code = code.replace(/</g, '&lt;');
wnd.document.write('<pre>' + code + '</pre>');
wnd.document.close();
}
// copies the original source code in to the clipboard (IE only)
dp.sh.Utils.ToClipboard = function(sender)
{
var code = sender.parentNode.originalCode;
// This works only for IE. There's a way to make it work with Mozilla as well,
// but it requires security settings changed on the client, which isn't by
// default, so 99% of users won't have it working anyways.
if(window.clipboardData)
{
window.clipboardData.setData('text', code);
alert(dp.sh.Strings.CopiedToClipboard);
}
}
// creates an invisible iframe, puts the original source code inside and prints it
dp.sh.Utils.PrintSource = function(sender)
{
var td = sender.parentNode;
var code = td.processedCode;
var iframe = document.createElement('IFRAME');
var doc = null;
var wnd =
// this hides the iframe
iframe.style.cssText = 'position:absolute; width:0px; height:0px; left:-5px; top:-5px;';
td.appendChild(iframe);
doc = iframe.contentWindow.document;
code = code.replace(/</g, '&lt;');
doc.open();
doc.write('<pre>' + code + '</pre>');
doc.close();
iframe.contentWindow.focus();
iframe.contentWindow.print();
td.removeChild(iframe);
}
dp.sh.Utils.About = function()
{
var wnd = window.open('', '_blank', 'dialog,width=320,height=150,scrollbars=0');
var doc = wnd.document;
var styles = document.getElementsByTagName('style');
var links = document.getElementsByTagName('link');
doc.write(dp.sh.Strings.AboutDialog.replace('{V}', dp.sh.Version));
// copy over ALL the styles from the parent page
for(var i = 0; i < styles.length; i++)
doc.write('<style>' + styles[i].innerHTML + '</style>');
for(var i = 0; i < links.length; i++)
if(links[i].rel.toLowerCase() == 'stylesheet')
doc.write('<link type="text/css" rel="stylesheet" href="' + links[i].href + '"></link>');
doc.close();
wnd.focus();
}
//
// Match object
//
dp.sh.Match = function(value, index, css)
{
this.value = value;
this.index = index;
this.length = value.length;
this.css = css;
}
//
// Highlighter object
//
dp.sh.Highlighter = function()
{
this.addGutter = true;
this.addControls = true;
this.collapse = false;
this.tabsToSpaces = true;
}
// static callback for the match sorting
dp.sh.Highlighter.SortCallback = function(m1, m2)
{
// sort matches by index first
if(m1.index < m2.index)
return -1;
else if(m1.index > m2.index)
return 1;
else
{
// if index is the same, sort by length
if(m1.length < m2.length)
return -1;
else if(m1.length > m2.length)
return 1;
}
return 0;
}
// gets a list of all matches for a given regular expression
dp.sh.Highlighter.prototype.GetMatches = function(regex, css)
{
var index = 0;
var match = null;
while((match = regex.exec(this.code)) != null)
{
this.matches[this.matches.length] = new dp.sh.Match(match[0], match.index, css);
}
}
dp.sh.Highlighter.prototype.AddBit = function(str, css)
{
var span = document.createElement('span');
str = str.replace(/&/g, '&amp;');
str = str.replace(/ /g, '&nbsp;');
str = str.replace(/</g, '&lt;');
str = str.replace(/\n/gm, '&nbsp;<br>');
// when adding a piece of code, check to see if it has line breaks in it
// and if it does, wrap individual line breaks with span tags
if(css != null)
{
var regex = new RegExp('<br>', 'gi');
if(regex.test(str))
{
var lines = str.split('&nbsp;<br>');
str = '';
for(var i = 0; i < lines.length; i++)
{
span = document.createElement('SPAN');
span.className = css;
span.innerHTML = lines[i];
this.div.appendChild(span);
// don't add a <BR> for the last line
if(i + 1 < lines.length)
this.div.appendChild(document.createElement('BR'));
}
}
else
{
span.className = css;
span.innerHTML = str;
this.div.appendChild(span);
}
}
else
{
span.innerHTML = str;
this.div.appendChild(span);
}
}
// checks if one match is inside any other match
dp.sh.Highlighter.prototype.IsInside = function(match)
{
if(match == null || match.length == 0)
return;
for(var i = 0; i < this.matches.length; i++)
{
var c = this.matches[i];
if(c == null)
continue;
if((match.index > c.index) && (match.index <= c.index + c.length))
return true;
}
return false;
}
dp.sh.Highlighter.prototype.ProcessRegexList = function()
{
for(var i = 0; i < this.regexList.length; i++)
this.GetMatches(this.regexList[i].regex, this.regexList[i].css);
}
dp.sh.Highlighter.prototype.ProcessSmartTabs = function(code)
{
var lines = code.split('\n');
var result = '';
var tabSize = 4;
var tab = '\t';
// This function inserts specified amount of spaces in the string
// where a tab is while removing that given tab.
function InsertSpaces(line, pos, count)
{
var left = line.substr(0, pos);
var right = line.substr(pos + 1, line.length); // pos + 1 will get rid of the tab
var spaces = '';
for(var i = 0; i < count; i++)
spaces += ' ';
return left + spaces + right;
}
// This function process one line for 'smart tabs'
function ProcessLine(line, tabSize)
{
if(line.indexOf(tab) == -1)
return line;
var pos = 0;
while((pos = line.indexOf(tab)) != -1)
{
// This is pretty much all there is to the 'smart tabs' logic.
// Based on the position within the line and size of a tab,
// calculate the amount of spaces we need to insert.
var spaces = tabSize - pos % tabSize;
line = InsertSpaces(line, pos, spaces);
}
return line;
}
// Go through all the lines and do the 'smart tabs' magic.
for(var i = 0; i < lines.length; i++)
result += ProcessLine(lines[i], tabSize) + '\n';
return result;
}
dp.sh.Highlighter.prototype.SwitchToTable = function()
{
// Safari fix: for some reason lowercase <br> isn't getting picked up, even though 'i' is set
var lines = this.div.innerHTML.split(/<BR>/gi);
var row = null;
var cell = null;
var tBody = null;
var html = '';
var pipe = ' | ';
// creates an anchor to a utility
function UtilHref(util, text)
{
return '<a href="#" onclick="dp.sh.Utils.' + util + '(this); return false;">' + text + '</a>';
}
tBody = document.createElement('TBODY'); // can be created and all others go to tBodies collection.
this.table.appendChild(tBody);
if(this.addGutter == true)
{
row = tBody.insertRow(-1);
cell = row.insertCell(-1);
cell.className = 'tools-corner';
}
if(this.addControls == true)
{
var tHead = document.createElement('THEAD'); // controls will be placed in here
this.table.appendChild(tHead);
row = tHead.insertRow(-1);
// add corner if there's a gutter
if(this.addGutter == true)
{
cell = row.insertCell(-1);
cell.className = 'tools-corner';
}
cell = row.insertCell(-1);
// preserve some variables for the controls
cell.originalCode = this.originalCode;
cell.processedCode = this.code;
cell.className = 'tools';
if(this.collapse == true)
{
tBody.className = 'hide';
cell.innerHTML += '<span><b>' + UtilHref('Expand', dp.sh.Strings.ExpandCode) + '</b>' + pipe + '</span>';
}
cell.innerHTML += UtilHref('ViewSource', dp.sh.Strings.ViewPlain) ;
// IE has this clipboard object which is easy enough to use
if(window.clipboardData)
cell.innerHTML += pipe + UtilHref('ToClipboard', dp.sh.Strings.CopyToClipboard);
}
for(var i = 0; i < lines.length - 1; i++)
{
row = tBody.insertRow(-1);
if(this.addGutter == true)
{
cell = row.insertCell(-1);
cell.className = 'gutter';
cell.innerHTML = i + 1;
}
cell = row.insertCell(-1);
cell.className = 'line' + (i % 2 + 1); // uses .line1 and .line2 css styles for alternating lines
cell.innerHTML = lines[i];
}
this.div.innerHTML = '';
}
dp.sh.Highlighter.prototype.Highlight = function(code)
{
function Trim(str)
{
return str.replace(/^\s*(.*?)[\s\n]*$/g, '$1');
}
function Chop(str)
{
return str.replace(/\n*$/, '').replace(/^\n*/, '');
}
function Unindent(str)
{
var lines = str.split('\n');
var indents = new Array();
var regex = new RegExp('^\\s*', 'g');
var min = 1000;
// go through every line and check for common number of indents
for(var i = 0; i < lines.length && min > 0; i++)
{
if(Trim(lines[i]).length == 0)
continue;
var matches = regex.exec(lines[i]);
if(matches != null && matches.length > 0)
min = Math.min(matches[0].length, min);
}
// trim minimum common number of white space from the begining of every line
if(min > 0)
for(var i = 0; i < lines.length; i++)
lines[i] = lines[i].substr(min);
return lines.join('\n');
}
// This function returns a portions of the string from pos1 to pos2 inclusive
function Copy(string, pos1, pos2)
{
return string.substr(pos1, pos2 - pos1);
}
var pos = 0;
this.originalCode = code;
this.code = Chop(Unindent(code));
this.div = document.createElement('DIV');
this.table = document.createElement('TABLE');
this.matches = new Array();
if(this.CssClass != null)
this.table.className = this.CssClass;
// replace tabs with spaces
if(this.tabsToSpaces == true)
this.code = this.ProcessSmartTabs(this.code);
this.table.border = 0;
this.table.cellSpacing = 0;
this.table.cellPadding = 0;
this.ProcessRegexList();
// if no matches found, add entire code as plain text
if(this.matches.length == 0)
{
this.AddBit(this.code, null);
this.SwitchToTable();
return;
}
// sort the matches
this.matches = this.matches.sort(dp.sh.Highlighter.SortCallback);
// The following loop checks to see if any of the matches are inside
// of other matches. This process would get rid of highligting strings
// inside comments, keywords inside strings and so on.
for(var i = 0; i < this.matches.length; i++)
if(this.IsInside(this.matches[i]))
this.matches[i] = null;
// Finally, go through the final list of matches and pull the all
// together adding everything in between that isn't a match.
for(var i = 0; i < this.matches.length; i++)
{
var match = this.matches[i];
if(match == null || match.length == 0)
continue;
this.AddBit(Copy(this.code, pos, match.index), null);
this.AddBit(match.value, match.css);
pos = match.index + match.length;
}
this.AddBit(this.code.substr(pos), null);
this.SwitchToTable();
}
dp.sh.Highlighter.prototype.GetKeywords = function(str)
{
return '\\b' + str.replace(/ /g, '\\b|\\b') + '\\b';
}
// highlightes all elements identified by name and gets source code from specified property
dp.sh.HighlightAll = function(name, showGutter /* optional */, showControls /* optional */, collapseAll /* optional */)
{
function FindValue()
{
var a = arguments;
for(var i = 0; i < a.length; i++)
{
if(a[i] == null)
continue;
if(typeof(a[i]) == 'string' && a[i] != '')
return a[i] + '';
if(typeof(a[i]) == 'object' && a[i].value != '')
return a[i].value + '';
}
return null;
}
function IsOptionSet(value, list)
{
for(var i = 0; i < list.length; i++)
if(list[i] == value)
return true;
return false;
}
var elements = document.getElementsByName(name);
var highlighter = null;
var registered = new Object();
var propertyName = 'value';
// if no code blocks found, leave
if(elements == null)
return;
// register all brushes
for(var brush in dp.sh.Brushes)
{
var aliases = dp.sh.Brushes[brush].Aliases;
if(aliases == null)
continue;
for(var i = 0; i < aliases.length; i++)
registered[aliases[i]] = brush;
}
for(var i = 0; i < elements.length; i++)
{
var element = elements[i];
var options = FindValue(
element.attributes['class'], element.className,
element.attributes['language'], element.language
);
var language = '';
if(options == null)
continue;
options = options.split(':');
language = options[0].toLowerCase();
if(registered[language] == null)
continue;
// instantiate a brush
highlighter = new dp.sh.Brushes[registered[language]]();
// hide the original element
element.style.display = 'none';
highlighter.addGutter = (showGutter == null) ? !IsOptionSet('nogutter', options) : showGutter;
highlighter.addControls = (showControls == null) ? !IsOptionSet('nocontrols', options) : showControls;
highlighter.collapse = (collapseAll == null) ? IsOptionSet('collapse', options) : collapseAll;
highlighter.Highlight(element[propertyName]);
// place the result table inside a div
var div = document.createElement('DIV');
div.className = 'dp-highlighter';
div.appendChild(highlighter.table);
element.parentNode.insertBefore(div, element);
}
}
dp.sh.Brushes.JScript = function()
{
var keywords = 'abstract boolean break byte case catch char class const continue debugger ' +
'default delete do double else enum export extends false final finally float ' +
'for function goto if implements import in instanceof int interface long native ' +
'new null package private protected public return short static super switch ' +
'synchronized this throw throws transient true try typeof var void volatile while with';
this.regexList = [
{ regex: new RegExp('//.*$', 'gm'), css: 'comment' }, // one line comments
{ regex: new RegExp('/\\*[\\s\\S]*?\\*/', 'g'), css: 'comment' }, // multiline comments
{ regex: new RegExp('"(?:[^"\n]|[\"])*"', 'g'), css: 'string' }, // double quoted strings
{ regex: new RegExp("'(?:[^'\n]|[\'])*'", 'g'), css: 'string' }, // single quoted strings
{ regex: new RegExp('^\\s*#.*', 'gm'), css: 'preprocessor' }, // preprocessor tags like #region and #endregion
{ regex: new RegExp(this.GetKeywords(keywords), 'gm'), css: 'keyword' } // keywords
];
this.CssClass = 'dp-c';
}
dp.sh.Brushes.JScript.prototype = new dp.sh.Highlighter();
dp.sh.Brushes.JScript.Aliases = ['js', 'jscript', 'javascript'];
dp.sh.Brushes.Php = function()
{
var keywords = 'and or xor __FILE__ __LINE__ array as break case ' +
'cfunction class const continue declare default die do echo else ' +
'elseif empty enddeclare endfor endforeach endif endswitch endwhile eval exit ' +
'extends for foreach function global if include include_once isset list ' +
'new old_function print require require_once return static switch unset use ' +
'var while __FUNCTION__ __CLASS__';
this.regexList = [
{ regex: new RegExp('//.*$', 'gm'), css: 'comment' }, // one line comments
{ regex: new RegExp('/\\*[\\s\\S]*?\\*/', 'g'), css: 'comment' }, // multiline comments
{ regex: new RegExp('"(?:[^"\n]|[\"])*"', 'g'), css: 'string' }, // double quoted strings
{ regex: new RegExp("'(?:[^'\n]|[\'])*'", 'g'), css: 'string' }, // single quoted strings
{ regex: new RegExp('\\$\\w+', 'g'), css: 'vars' }, // variables
{ regex: new RegExp(this.GetKeywords(keywords), 'gm'), css: 'keyword' } // keyword
];
this.CssClass = 'dp-c';
}
dp.sh.Brushes.Php.prototype = new dp.sh.Highlighter();
dp.sh.Brushes.Php.Aliases = ['php'];
dp.sh.Brushes.Xml = function()
{
this.CssClass = 'dp-xml';
}
dp.sh.Brushes.Xml.prototype = new dp.sh.Highlighter();
dp.sh.Brushes.Xml.Aliases = ['xml', 'xhtml', 'xslt', 'html', 'xhtml'];
dp.sh.Brushes.Xml.prototype.ProcessRegexList = function()
{
function push(array, value)
{
array[array.length] = value;
}
/* If only there was a way to get index of a group within a match, the whole XML
could be matched with the expression looking something like that:
(<!\[CDATA\[\s*.*\s*\]\]>)
| (<!--\s*.*\s*?-->)
| (<)*(\w+)*\s*(\w+)\s*=\s*(".*?"|'.*?'|\w+)(/*>)*
| (</?)(.*?)(/?>)
*/
var index = 0;
var match = null;
var regex = null;
// Match CDATA in the following format <![ ... [ ... ]]>
// <\!\[[\w\s]*?\[(.|\s)*?\]\]>
this.GetMatches(new RegExp('<\\!\\[[\\w\\s]*?\\[(.|\\s)*?\\]\\]>', 'gm'), 'cdata');
// Match comments
// <!--\s*.*\s*?-->
this.GetMatches(new RegExp('<!--\\s*.*\\s*?-->', 'gm'), 'comments');
// Match attributes and their values
// (\w+)\s*=\s*(".*?"|\'.*?\'|\w+)*
regex = new RegExp('([\\w-\.]+)\\s*=\\s*(".*?"|\'.*?\'|\\w+)*', 'gm');
while((match = regex.exec(this.code)) != null)
{
push(this.matches, new dp.sh.Match(match[1], match.index, 'attribute'));
// if xml is invalid and attribute has no property value, ignore it
if(match[2] != undefined)
{
push(this.matches, new dp.sh.Match(match[2], match.index + match[0].indexOf(match[2]), 'attribute-value'));
}
}
// Match opening and closing tag brackets
// </*\?*(?!\!)|/*\?*>
this.GetMatches(new RegExp('</*\\?*(?!\\!)|/*\\?*>', 'gm'), 'tag');
// Match tag names
// </*\?*\s*(\w+)
regex = new RegExp('</*\\?*\\s*([\\w-\.]+)', 'gm');
while((match = regex.exec(this.code)) != null)
{
push(this.matches, new dp.sh.Match(match[1], match.index + match[0].indexOf(match[1]), 'tag-name'));
}
}
dp.sh.Brushes.CSS = function()
{
var keywords = 'link over active visited';
this.regexList = [
{ regex: new RegExp('/\\*[\\s\\S]*?\\*/', 'g'), css: 'comment' }, // multiline comments
{ regex: new RegExp('"(?:[^"\n]|[\"])*"', 'g'), css: 'string' }, // double quoted strings
{ regex: new RegExp("'(?:[^'\n]|[\'])*'", 'g'), css: 'string' }, // single quoted strings
{ regex: new RegExp('^\\s*#.*', 'gm'), css: 'preprocessor' }, // preprocessor tags like #region and #endregion
{ regex: new RegExp(this.GetKeywords(keywords), 'gm'), css: 'keyword' } // keywords
];
this.CssClass = 'dp-c';
}
dp.sh.Brushes.CSS.prototype = new dp.sh.Highlighter();
dp.sh.Brushes.CSS.Aliases = ['css'];

150
www/extras/yui/examples/treeview/js/json.js vendored Normal file
View file

@ -0,0 +1,150 @@
/*
Copyright (c) 2005 JSON.org
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The Software shall be used for Good, not Evil.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
*/
/*
The global object JSON contains two methods.
JSON.stringify(value) takes a JavaScript value and produces a JSON text.
The value must not be cyclical.
JSON.parse(text) takes a JSON text and produces a JavaScript value. It will
throw a 'JSONError' exception if there is an error.
*/
var JSON = {
copyright: '(c)2005 JSON.org',
license: 'http://www.crockford.com/JSON/license.html',
/*
Stringify a JavaScript value, producing a JSON text.
*/
stringify: function (v) {
var a = [];
/*
Emit a string.
*/
function e(s) {
a[a.length] = s;
}
/*
Convert a value.
*/
function g(x) {
var c, i, l, v;
switch (typeof x) {
case 'object':
if (x) {
if (x instanceof Array) {
e('[');
l = a.length;
for (i = 0; i < x.length; i += 1) {
v = x[i];
if (typeof v != 'undefined' &&
typeof v != 'function') {
if (l < a.length) {
e(',');
}
g(v);
}
}
e(']');
return;
} else if (typeof x.valueOf == 'function') {
e('{');
l = a.length;
for (i in x) {
v = x[i];
if (typeof v != 'undefined' &&
typeof v != 'function' &&
(!v || typeof v != 'object' ||
typeof v.valueOf == 'function')) {
if (l < a.length) {
e(',');
}
g(i);
e(':');
g(v);
}
}
return e('}');
}
}
e('null');
return;
case 'number':
e(isFinite(x) ? +x : 'null');
return;
case 'string':
l = x.length;
e('"');
for (i = 0; i < l; i += 1) {
c = x.charAt(i);
if (c >= ' ') {
if (c == '\\' || c == '"') {
e('\\');
}
e(c);
} else {
switch (c) {
case '\b':
e('\\b');
break;
case '\f':
e('\\f');
break;
case '\n':
e('\\n');
break;
case '\r':
e('\\r');
break;
case '\t':
e('\\t');
break;
default:
c = c.charCodeAt();
e('\\u00' + Math.floor(c / 16).toString(16) +
(c % 16).toString(16));
}
}
}
e('"');
return;
case 'boolean':
e(String(x));
return;
default:
e('null');
return;
}
}
g(v);
return a.join('');
},
/*
Parse a JSON text, producing a JavaScript value.
*/
parse: function (text) {
return (/^(\s+|[,:{}\[\]]|"(\\["\\\/bfnrtu]|[^\x00-\x1f"\\]+)*"|-?\d+(\.\d*)?([eE][+-]?\d+)?|true|false|null)+$/.test(text)) &&
eval('(' + text + ')');
}
};

34
www/extras/yui/examples/treeview/js/key.js vendored Normal file
View file

@ -0,0 +1,34 @@
/* Copyright (c) 2006 Yahoo! Inc. All rights reserved. */
YAHOO.util.Key = new function() {
// this.logger = new ygLogger("ygEventUtil");
// DOM key constants
this.DOM_VK_UNDEFINED = 0x0;
this.DOM_VK_RIGHT_ALT = 0x12;
this.DOM_VK_LEFT_ALT = 0x12;
this.DOM_VK_LEFT_CONTROL = 0x11;
this.DOM_VK_RIGHT_CONTROL = 0x11;
this.DOM_VK_LEFT_SHIFT = 0x10;
this.DOM_VK_RIGHT_SHIFT = 0x10;
this.DOM_VK_META = 0x9D;
this.DOM_VK_BACK_SPACE = 0x08;
this.DOM_VK_CAPS_LOCK = 0x14;
this.DOM_VK_DELETE = 0x7F;
this.DOM_VK_END = 0x23;
this.DOM_VK_ENTER = 0x0D;
this.DOM_VK_ESCAPE = 0x1B;
this.DOM_VK_HOME = 0x24;
this.DOM_VK_NUM_LOCK = 0x90;
this.DOM_VK_PAUSE = 0x13;
this.DOM_VK_PRINTSCREEN = 0x9A;
this.DOM_VK_SCROLL_LOCK = 0x91;
this.DOM_VK_SPACE = 0x20;
this.DOM_VK_TAB = 0x09;
this.DOM_VK_LEFT = 0x25;
this.DOM_VK_RIGHT = 0x27;
this.DOM_VK_UP = 0x26;
this.DOM_VK_DOWN = 0x28;
this.DOM_VK_PAGE_DOWN = 0x22;
this.DOM_VK_PAGE_UP = 0x21;
};

15
www/extras/yui/examples/treeview/js/log.js vendored Normal file
View file

@ -0,0 +1,15 @@
// Adapter for YAHOO.widget.Logger
var ygLogger = function(module) {
return new YAHOO.widget.LogWriter(module);
};
YAHOO.widget.LogWriter.prototype.debug = function() {
this.log.apply(this, arguments);
};
ygLogger.init = function(div) {
new YAHOO.widget.LogReader(div, {
height: "400px"
});
};

242
www/extras/yui/examples/treeview/menu.html Normal file
View file

@ -0,0 +1,242 @@
<!doctype html public "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Yahoo! UI Library - Tree Control</title>
<link rel="stylesheet" type="text/css" href="css/screen.css">
<style type="text/css">
.emLabel, .emLabel:link, .emLabel:visited, .emLabel:hover {
font-weight: bold;
}
</style>
</head>
<body onload="treeInit()">
<link rel="stylesheet" type="text/css" href="css/menu/tree.css">
<div id="pageTitle">
<h3>Tree Control</h3>
</div>
<script type="text/javascript" src="../../build/yahoo/yahoo.js" ></script>
<script type="text/javascript" src="../../build/event/event.js"></script>
<!-- The following are required for the logger -->
<script type="text/javascript" src="../../build/dom/dom.js"></script>
<script type="text/javascript" src="../../build/logger/logger.js"></script>
<!-- End logger reqs -->
<script type="text/javascript" src="../../build/treeview/treeview-debug.js" ></script>
<style type="text/css">
/* logger default styles */
/* font size is controlled here: default 77% */
#yui-log {position:absolute;top:1em;right:1em;font-size:77%;text-align:left;}
/* width is controlled here: default 31em */
.yui-log {background-color:#AAA;border:1px solid black;font-family:monospace;z-index:9000;}
.yui-log p {margin:1px;padding:.1em;}
.yui-log button {font-family:monospace;}
.yui-log .yui-log-hd {padding:.5em;background-color:#575757;color:#FFF;}
/* height is controlled here: default 20em*/
.yui-log .yui-log-bd {width:100%;height:20em;background-color:#FFF;border:1px solid gray;overflow:auto;}
.yui-log .yui-log-ft {margin-top:.5em;margin-bottom:1em;}
.yui-log .yui-log-ft .yui-log-categoryfilters {}
.yui-log .yui-log-ft .yui-log-sourcefilters {width:100%;border-top:1px solid #575757;margin-top:.75em;padding-top:.75em;}
.yui-log .yui-log-btns {position:relative;float:right;bottom:.25em;}
.yui-log .yui-log-filtergrp {margin-right:.5em;}
.yui-log .info {background-color:#A7CC25;} /* A7CC25 green */
.yui-log .warn {background-color:#F58516;} /* F58516 orange */
.yui-log .error {background-color:#E32F0B;} /* E32F0B red */
.yui-log .time {background-color:#A6C9D7;} /* A6C9D7 blue */
.yui-log .window {background-color:#F2E886;} /* F2E886 tan */
</style>
<div id="container">
<img class="ylogo" src="img/logo.gif" alt="" />
<div id="containerTop">
<div id="header">
<h1>
</h1>
<h4>&nbsp;</h4>
</div>
<div id="main">
<div id="rightbar">
<div id="rightBarPad">
<h3>Examples</h3>
<div id="linkage">
<ul>
<li><a href="default.html?mode=dist">Default tree widget</a></li>
<li><a href="dynamic.html?mode=dist">Dynamic load</a></li>
<li><a href="folders.html?mode=dist">Folder view</a></li>
<li><a href="menu.html?mode=dist">Menu</a></li>
<li><a href="html.html?mode=dist">HTML node</a></li>
<li><a href="multi.html?mode=dist">Multiple trees, different styles</a></li>
<li><a href="check.html?mode=dist">Task list</a></li>
<li><a href="anim.html?mode=dist">Fade animation</a></li>
</ul>
</div>
<script type="text/javascript">
//<![CDATA[
YAHOO.example.logApp = function() {
var divId;
return {
init: function(p_divId, p_toggleElId, p_clearElId) {
divId = p_divId
},
onload: function() {
if (YAHOO.widget.Logger) {
var reader = new YAHOO.widget.LogReader( "logDiv", { height: "400px" } );
//reader._onClickPauseBtn(null, reader);
}
}
};
} ();
YAHOO.util.Event.on(window, "load", YAHOO.example.logApp.onload);
//]]>
</script>
<div id="logDiv"></div>
</div>
</div>
<div id="content">
<form name="mainForm" action="javscript:;">
<div class="newsItem">
<h3>Menu TreeView Widget</h3>
<p>
The presentation differences between the default treeview widget and this
one were accomplished by modifying the css styles in tree.css. The
functionality is the same, except the menu does not allow multiple siblings
to be expanded at one time (when you expand a node, all of its expanded
siblings are collapsed.
</p>
<div id="expandcontractdiv">
<a href="javascript:tree.expandAll()">Expand all</a>
<a href="javascript:tree.collapseAll()">Collapse all</a>
</div>
<div id="treeDiv1"></div>
</div>
</form>
</div>
<div id="footerContainer">
<div id="footer">
<p>&nbsp;</p>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
var tree;
var nodes = new Array();
var nodeIndex = 0;
function treeInit() {
buildRandomTextNodeTree();
}
function buildRandomTextNodeTree() {
tree = new YAHOO.widget.TreeView("treeDiv1");
tree.onExpand = function(node) {
// alert(node.index + " was expanded");
}
tree.onCollapse = function(node) {
// alert(node.index + " was collapsed");
}
for (var i = 0; i < Math.floor((Math.random()*4) + 3); i++) {
var thisId = nodeIndex++;
var thisLabel = "menu" + i;
// nodes[thisId] = new YAHOO.widget.TextNode({ label: thisLabel }, tree.getRoot(), false);
// nodes[thisId] = new YAHOO.widget.MenuNode({label:thisLabel, href:"http://asdf"}, tree.getRoot(), false);
nodes[thisId] = new YAHOO.widget.MenuNode(thisLabel, tree.getRoot(), false);
var p1 = nodes[thisId];
var l1 = thisLabel;
for (var j = 0; j < Math.floor(Math.random()*6) + 1; j++) {
thisId = nodeIndex++;
thisLabel = l1 + "-" + j;
// nodes[thisId] = new YAHOO.widget.TextNode({ label: thisLabel }, p1, true);
nodes[thisId] = new YAHOO.widget.MenuNode(thisLabel, p1, false);
var p2 = nodes[thisId];
var l2 = thisLabel;
for (var k =0; k < Math.floor(Math.random()*6) + 1; k++) {
thisId = nodeIndex++;
thisLabel = l2 + "-" + k;
var data = {
id: thisId,
label: thisLabel,
href: "javascript:onLabelClick(" + thisId + ")"
}
//var data = { label: thisLabel, href: "javascript:void(window.open('http://www.yahoo.com'))" }
nodes[thisId] = new YAHOO.widget.TextNode(data, p2, false);
nodes[thisId].labelStyle = "emLabel";
// nodes[thisId] = new YAHOO.widget.MenuNode(thisLabel, p2, false);
}
}
}
// nodes[0] = new YAHOO.widget.TextNode(tree.getRoot(), false, "label-0");
tree.draw();
}
var selectedId = null;
function onLabelClick(id) {
var node = tree.getNodeByProperty("id", id);
// alert(node.label);
var el = node.getLabelEl()
YAHOO.log("pos: " + YAHOO.util.Dom.getXY(el));
el.style.backgroundColor = "#c5dbfc";
if (selectedId != null) {
node = tree.getNodeByProperty("id", selectedId);
node.getLabelEl().style.backgroundColor = "white";
}
selectedId = id;
}
</script>
</body>
</html>

185
www/extras/yui/examples/treeview/multi.html Normal file
View file

@ -0,0 +1,185 @@
<!doctype html public "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Yahoo! UI Library - Tree Control</title>
<link rel="stylesheet" type="text/css" href="css/screen.css">
</head>
<body onload="treeInit()">
<link rel="stylesheet" type="text/css" href="css/multi/tree.css">
<style>
#treecontaner {width: 550px;}
#tree1 {width:120px;padding: 10px;float:left;}
#tree2 {width:120px;padding: 10px;float:left;}
#tree3 {width:120px;padding: 10px;float:left;}
</style>
<div id="pageTitle">
<h3>Tree Control</h3>
</div>
<script type="text/javascript" src="../../build/yahoo/yahoo.js" ></script>
<script type="text/javascript" src="../../build/event/event.js"></script>
<!-- The following are required for the logger -->
<script type="text/javascript" src="../../build/dom/dom.js"></script>
<script type="text/javascript" src="../../build/logger/logger.js"></script>
<!-- End logger reqs -->
<script type="text/javascript" src="../../build/treeview/treeview-debug.js" ></script>
<style type="text/css">
/* logger default styles */
/* font size is controlled here: default 77% */
#yui-log {position:absolute;top:1em;right:1em;font-size:77%;text-align:left;}
/* width is controlled here: default 31em */
.yui-log {background-color:#AAA;border:1px solid black;font-family:monospace;z-index:9000;}
.yui-log p {margin:1px;padding:.1em;}
.yui-log button {font-family:monospace;}
.yui-log .yui-log-hd {padding:.5em;background-color:#575757;color:#FFF;}
/* height is controlled here: default 20em*/
.yui-log .yui-log-bd {width:100%;height:20em;background-color:#FFF;border:1px solid gray;overflow:auto;}
.yui-log .yui-log-ft {margin-top:.5em;margin-bottom:1em;}
.yui-log .yui-log-ft .yui-log-categoryfilters {}
.yui-log .yui-log-ft .yui-log-sourcefilters {width:100%;border-top:1px solid #575757;margin-top:.75em;padding-top:.75em;}
.yui-log .yui-log-btns {position:relative;float:right;bottom:.25em;}
.yui-log .yui-log-filtergrp {margin-right:.5em;}
.yui-log .info {background-color:#A7CC25;} /* A7CC25 green */
.yui-log .warn {background-color:#F58516;} /* F58516 orange */
.yui-log .error {background-color:#E32F0B;} /* E32F0B red */
.yui-log .time {background-color:#A6C9D7;} /* A6C9D7 blue */
.yui-log .window {background-color:#F2E886;} /* F2E886 tan */
</style>
<div id="container">
<img class="ylogo" src="img/logo.gif" alt="" />
<div id="containerTop">
<div id="header">
<h1>
</h1>
<h4>&nbsp;</h4>
</div>
<div id="main">
<div id="rightbar">
<div id="rightBarPad">
<h3>Examples</h3>
<div id="linkage">
<ul>
<li><a href="default.html?mode=dist">Default tree widget</a></li>
<li><a href="dynamic.html?mode=dist">Dynamic load</a></li>
<li><a href="folders.html?mode=dist">Folder view</a></li>
<li><a href="menu.html?mode=dist">Menu</a></li>
<li><a href="html.html?mode=dist">HTML node</a></li>
<li><a href="multi.html?mode=dist">Multiple trees, different styles</a></li>
<li><a href="check.html?mode=dist">Task list</a></li>
<li><a href="anim.html?mode=dist">Fade animation</a></li>
</ul>
</div>
<script type="text/javascript">
//<![CDATA[
YAHOO.example.logApp = function() {
var divId;
return {
init: function(p_divId, p_toggleElId, p_clearElId) {
divId = p_divId
},
onload: function() {
if (YAHOO.widget.Logger) {
var reader = new YAHOO.widget.LogReader( "logDiv", { height: "400px" } );
//reader._onClickPauseBtn(null, reader);
}
}
};
} ();
YAHOO.util.Event.on(window, "load", YAHOO.example.logApp.onload);
//]]>
</script>
<div id="logDiv"></div>
</div>
</div>
<div id="content">
<form name="mainForm" action="javscript:;">
<div class="newsItem">
<h3>Multiple trees with different styles</h3>
<p>
</p>
<div id="treecontainer">
<div id="tree1"></div>
<div id="tree2"></div>
<div id="tree3" class="treemenu"></div>
</div>
</div>
</form>
</div>
<div id="footerContainer">
<div id="footer">
<p>&nbsp;</p>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
function treeInit() {
buildRandomTextNodeTree(new YAHOO.widget.TreeView("tree1"));
buildRandomTextNodeTree(new YAHOO.widget.TreeView("tree2"));
buildRandomTextNodeTree(new YAHOO.widget.TreeView("tree3"));
}
function buildRandomTextNodeTree(tree) {
for (var i = 0; i < Math.floor((Math.random()*4) + 3); i++) {
var tmpNode = new YAHOO.widget.TextNode("label-" + i, tree.getRoot(), false);
buildRandomTextBranch(tmpNode);
}
tree.draw();
}
var callback = null;
function buildRandomTextBranch(node) {
if (node.depth < 1) {
YAHOO.log("buildRandomTextBranch: " + node.index);
for ( var i = 0; i < Math.floor(Math.random() * 4 + 2) ; i++ ) {
var tmpNode = new YAHOO.widget.TextNode(node.label + "-" + i, node, false);
buildRandomTextBranch(tmpNode);
}
}
}
</script>
</body>
</html>