JavaScript DHTML/YUI Library/Tree TreeView
Содержание
- 1 Adding A Context Menu To A TreeView
- 2 Build a TabView from JavaScript.
- 3 Build a TabView from markup.
- 4 Copy of the second branch of the tree at the top
- 5 Copy of the tree above taken from its own definition
- 6 Create Tree from markup
- 7 Default presentation for the TreeView Control.
- 8 Dynamically Loading Node Data
- 9 Folder-Style TreeView Design: transform the look of your TreeView Control by changing CSS
- 10 Inline Editing of TreeView Node Labels
- 11 Menu-Style TreeView Design
- 12 Tree built from a static definition
- 13 TreeView with Tooltips
- 14 Using TreeView with Custom Icons
Adding A Context Menu To A TreeView
<!--
Software License Agreement (BSD License)
Copyright (c) 2009, Yahoo! Inc.
All rights reserved.
Redistribution and use of this software in source and binary forms, with or without modification, are permitted provided that the following conditions are met:
* Redistributions of source code must retain the above copyright notice, this list of conditions and the
following disclaimer.
* Redistributions in binary form must reproduce the above copyright notice, this list of conditions and the following disclaimer in the documentation and/or other materials provided with the distribution.
* Neither the name of Yahoo! Inc. nor the names of its contributors may be used to endorse or promote products derived from this software without specific prior written permission of Yahoo! Inc.
THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
Sources of Intellectual Property Included in the YUI Library
YUI is issued by Yahoo! under the BSD license above. Below is a list of certain publicly available software that is the source of intellectual property in YUI, along with the licensing terms that pertain to thosesources of IP. This list is for informational purposes only and is not intended to represent an exhaustive list of third party contributions to the YUI.
* Douglas Crockford"s JSON parsing and stringifying methods: In the JSON Utility, Douglas Crockford"s JSON parsing and stringifying methods are adapted from work published at JSON.org. The adapted work is in the public domain.
* Robert Penner"s animation-easing algorithms: In the Animation Utility, YUI makes use of Robert Penner"s algorithms for easing.
* Geoff Stearns"s SWFObject: In the Charts Control and the Uploader versions through 2.7.0, YUI makes use of Geoff Stearns"s SWFObject v1.5 for Flash Player detection and embedding. More information on SWFObject can be found here (http://blog.deconcept.ru/swfobject/). SWFObject is (c) 2007 Geoff Stearns and is released under the MIT License (http://www.opensource.org/licenses/mit-license.php).
* Diego Perini"s IEContentLoaded technique: The Event Utility employs a technique developed by Diego Perini and licensed under GPL. YUI"s use of this technique is included under our BSD license with the author"s permission.
-->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Example: Adding A Context Menu To A TreeView (YUI Library)</title>
<!-- Standard reset and fonts -->
<link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/reset/reset.css">
<link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/fonts/fonts.css">
<!-- CSS for TreeView -->
<link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/treeview/assets/skins/sam/treeview.css">
<!-- CSS for Menu -->
<link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/menu/assets/skins/sam/menu.css">
<!-- Page-specific styles -->
<style type="text/css">
h1 {
font-weight: bold;
margin: 0 0 1em 0;
}
body {
padding: 1em;
}
p, ul {
margin: 1em 0;
}
p em,
#operainstructions li em {
font-weight: bold;
}
#operainstructions {
list-style-type: square;
margin-left: 2em;
}
</style>
<!-- Dependency source files -->
<script type="text/javascript" src="yui_2.7.0b-lib/yahoo-dom-event/yahoo-dom-event.js"></script>
<script type="text/javascript" src="yui_2.7.0b-lib/container/container_core.js"></script>
<script type="text/javascript" src="yui_2.7.0b-lib/treeview/treeview.js"></script>
<!-- Menu source file -->
<script type="text/javascript" src="yui_2.7.0b-lib/menu/menu.js"></script>
<!-- Page-specific script -->
<script type="text/javascript">
/*
Initialize the TreeView instance when the "mytreeview" <div>
is ready to be scripted.
*/
YAHOO.util.Event.onAvailable("mytreeview", function () {
/*
Map of YAHOO.widget.TextNode instances in the
TreeView instance.
*/
var oTextNodeMap = {};
// Creates a TextNode instance and appends it to the TreeView
function buildRandomTextBranch(p_oNode) {
var oTextNode,
i;
if (p_oNode.depth < 6) {
for (i = 0; i < Math.floor(Math.random() * 4); i++) {
oTextNode = new YAHOO.widget.TextNode(p_oNode.label + "-" + i, p_oNode, false);
oTextNodeMap[oTextNode.labelElId] = oTextNode;
buildRandomTextBranch(oTextNode);
}
}
}
// Create a TreeView instance
var oTreeView = new YAHOO.widget.TreeView("mytreeview");
var n, oTextNode;
for (n = 0; n < Math.floor((Math.random()*4) + 3); n++) {
oTextNode = new YAHOO.widget.TextNode("label-" + n, oTreeView.getRoot(), false);
/*
Add the TextNode instance to the map, using its
HTML id as the key.
*/
oTextNodeMap[oTextNode.labelElId] = oTextNode;
buildRandomTextBranch(oTextNode);
}
oTreeView.draw();
/*
The YAHOO.widget.TextNode instance whose "contextmenu"
DOM event triggered the display of the
ContextMenu instance.
*/
var oCurrentTextNode = null;
/*
Adds a new TextNode as a child of the TextNode instance
that was the target of the "contextmenu" event that
triggered the display of the ContextMenu instance.
*/
function addNode() {
var sLabel = window.prompt("Enter a label for the new node: ", ""),
oChildNode;
if (sLabel && sLabel.length > 0) {
oChildNode = new YAHOO.widget.TextNode(sLabel, oCurrentTextNode, false);
oCurrentTextNode.refresh();
oCurrentTextNode.expand();
oTextNodeMap[oChildNode.labelElId] = oChildNode;
}
}
/*
Edits the label of the TextNode that was the target of the
"contextmenu" event that triggered the display of the
ContextMenu instance.
*/
function editNodeLabel() {
var sLabel = window.prompt("Enter a new label for this node: ", oCurrentTextNode.getLabelEl().innerHTML);
if (sLabel && sLabel.length > 0) {
oCurrentTextNode.getLabelEl().innerHTML = sLabel;
}
}
/*
Deletes the TextNode that was the target of the "contextmenu"
event that triggered the display of the ContextMenu instance.
*/
function deleteNode() {
delete oTextNodeMap[oCurrentTextNode.labelElId];
oTreeView.removeNode(oCurrentTextNode);
oTreeView.draw();
}
/*
"contextmenu" event handler for the element(s) that
triggered the display of the ContextMenu instance - used
to set a reference to the TextNode instance that triggered
the display of the ContextMenu instance.
*/
function onTriggerContextMenu(p_oEvent) {
var oTarget = this.contextEventTarget,
Dom = YAHOO.util.Dom;
/*
Get the TextNode instance that that triggered the
display of the ContextMenu instance.
*/
var oTextNode = Dom.hasClass(oTarget, "ygtvlabel") ?
oTarget : Dom.getAncestorByClassName(oTarget, "ygtvlabel");
if (oTextNode) {
oCurrentTextNode = oTextNodeMap[oTarget.id];
}
else {
// Cancel the display of the ContextMenu instance.
this.cancel();
}
}
/*
Instantiate a ContextMenu: The first argument passed to the constructor
is the id for the Menu element to be created, the second is an
object literal of configuration properties.
*/
var oContextMenu = new YAHOO.widget.ContextMenu("mytreecontextmenu", {
trigger: "mytreeview",
lazyload: true,
itemdata: [
{ text: "Add Child Node", onclick: { fn: addNode } },
{ text: "Edit Node Label", onclick: { fn: editNodeLabel } },
{ text: "Delete Node", onclick: { fn: deleteNode } }
] });
/*
Subscribe to the "contextmenu" event for the element(s)
specified as the "trigger" for the ContextMenu instance.
*/
oContextMenu.subscribe("triggerContextMenu", onTriggerContextMenu);
});
</script>
</head>
<body class="yui-skin-sam">
<div id="mytreeview"></div>
</body>
</html><!-- presentbright.corp.yahoo.ru uncompressed/chunked Thu Feb 19 10:53:17 PST 2009 -->
<A href="http://www.wbex.ru/Code/JavaScriptDownload/yui_2.7.0b.zip">yui_2.7.0b.zip( 4,431 k)</a>
Build a TabView from JavaScript.
<!--
Software License Agreement (BSD License)
Copyright (c) 2009, Yahoo! Inc.
All rights reserved.
Redistribution and use of this software in source and binary forms, with or without modification, are permitted provided that the following conditions are met:
* Redistributions of source code must retain the above copyright notice, this list of conditions and the
following disclaimer.
* Redistributions in binary form must reproduce the above copyright notice, this list of conditions and the following disclaimer in the documentation and/or other materials provided with the distribution.
* Neither the name of Yahoo! Inc. nor the names of its contributors may be used to endorse or promote products derived from this software without specific prior written permission of Yahoo! Inc.
THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
Sources of Intellectual Property Included in the YUI Library
YUI is issued by Yahoo! under the BSD license above. Below is a list of certain publicly available software that is the source of intellectual property in YUI, along with the licensing terms that pertain to thosesources of IP. This list is for informational purposes only and is not intended to represent an exhaustive list of third party contributions to the YUI.
* Douglas Crockford"s JSON parsing and stringifying methods: In the JSON Utility, Douglas Crockford"s JSON parsing and stringifying methods are adapted from work published at JSON.org. The adapted work is in the public domain.
* Robert Penner"s animation-easing algorithms: In the Animation Utility, YUI makes use of Robert Penner"s algorithms for easing.
* Geoff Stearns"s SWFObject: In the Charts Control and the Uploader versions through 2.7.0, YUI makes use of Geoff Stearns"s SWFObject v1.5 for Flash Player detection and embedding. More information on SWFObject can be found here (http://blog.deconcept.ru/swfobject/). SWFObject is (c) 2007 Geoff Stearns and is released under the MIT License (http://www.opensource.org/licenses/mit-license.php).
* Diego Perini"s IEContentLoaded technique: The Event Utility employs a technique developed by Diego Perini and licensed under GPL. YUI"s use of this technique is included under our BSD license with the author"s permission.
-->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Build from Script</title>
<style type="text/css">
/*margin and padding on body element
can introduce errors in determining
element position and are not recommended;
we turn them off as a foundation for YUI
CSS treatments. */
body {
margin:0;
padding:0;
}
</style>
<link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/fonts/fonts-min.css" />
<link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/tabview/assets/skins/sam/tabview.css" />
<script type="text/javascript" src="yui_2.7.0b-lib/yahoo-dom-event/yahoo-dom-event.js"></script>
<script type="text/javascript" src="yui_2.7.0b-lib/element/element-min.js"></script>
<script type="text/javascript" src="yui_2.7.0b-lib/tabview/tabview-min.js"></script>
<!--there is no custom header content for this example-->
</head>
<body class=" yui-skin-sam">
<h1>Build from Script</h1>
<div class="exampleIntro">
<p>This demonstrates how to build a TabView from JavaScript.</p>
</div>
<!--BEGIN SOURCE CODE FOR EXAMPLE -->
<div id="container"></div>
<script type="text/javascript">
(function() {
var tabView = new YAHOO.widget.TabView();
tabView.addTab( new YAHOO.widget.Tab({
label: "lorem",
content: "<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat.</p>",
active: true
}));
tabView.addTab( new YAHOO.widget.Tab({
label: "ipsum",
content: "<ul><li><a href="#">Lorem ipsum dolor sit amet.</a></li><li><a href="#">Lorem ipsum dolor sit amet.</a></li><li><a href="#">Lorem ipsum dolor sit amet.</a></li><li><a href="#">Lorem ipsum dolor sit amet.</a></li></ul>"
}));
tabView.addTab( new YAHOO.widget.Tab({
label: "dolor",
content: "<form action="#"><fieldset><legend>Lorem Ipsum</legend><label for="foo"> <input id="foo" name="foo"></label><input type="submit" value="submit"></fieldset></form>"
}));
YAHOO.log("The example has finished loading; as you interact with it, you"ll see log messages appearing here.", "info", "example");
tabView.appendTo("container");
})();
</script>
<!--END SOURCE CODE FOR EXAMPLE -->
</body>
</html>
<!-- presentbright.corp.yahoo.ru uncompressed/chunked Thu Feb 19 10:53:19 PST 2009 -->
<A href="http://www.wbex.ru/Code/JavaScriptDownload/yui_2.7.0b.zip">yui_2.7.0b.zip( 4,431 k)</a>
Build a TabView from markup.
<!--
Software License Agreement (BSD License)
Copyright (c) 2009, Yahoo! Inc.
All rights reserved.
Redistribution and use of this software in source and binary forms, with or without modification, are permitted provided that the following conditions are met:
* Redistributions of source code must retain the above copyright notice, this list of conditions and the
following disclaimer.
* Redistributions in binary form must reproduce the above copyright notice, this list of conditions and the following disclaimer in the documentation and/or other materials provided with the distribution.
* Neither the name of Yahoo! Inc. nor the names of its contributors may be used to endorse or promote products derived from this software without specific prior written permission of Yahoo! Inc.
THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
Sources of Intellectual Property Included in the YUI Library
YUI is issued by Yahoo! under the BSD license above. Below is a list of certain publicly available software that is the source of intellectual property in YUI, along with the licensing terms that pertain to thosesources of IP. This list is for informational purposes only and is not intended to represent an exhaustive list of third party contributions to the YUI.
* Douglas Crockford"s JSON parsing and stringifying methods: In the JSON Utility, Douglas Crockford"s JSON parsing and stringifying methods are adapted from work published at JSON.org. The adapted work is in the public domain.
* Robert Penner"s animation-easing algorithms: In the Animation Utility, YUI makes use of Robert Penner"s algorithms for easing.
* Geoff Stearns"s SWFObject: In the Charts Control and the Uploader versions through 2.7.0, YUI makes use of Geoff Stearns"s SWFObject v1.5 for Flash Player detection and embedding. More information on SWFObject can be found here (http://blog.deconcept.ru/swfobject/). SWFObject is (c) 2007 Geoff Stearns and is released under the MIT License (http://www.opensource.org/licenses/mit-license.php).
* Diego Perini"s IEContentLoaded technique: The Event Utility employs a technique developed by Diego Perini and licensed under GPL. YUI"s use of this technique is included under our BSD license with the author"s permission.
-->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Build from Markup</title>
<style type="text/css">
/*margin and padding on body element
can introduce errors in determining
element position and are not recommended;
we turn them off as a foundation for YUI
CSS treatments. */
body {
margin:0;
padding:0;
}
</style>
<link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/fonts/fonts-min.css" />
<link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/tabview/assets/skins/sam/tabview.css" />
<script type="text/javascript" src="yui_2.7.0b-lib/yahoo-dom-event/yahoo-dom-event.js"></script>
<script type="text/javascript" src="yui_2.7.0b-lib/element/element-min.js"></script>
<script type="text/javascript" src="yui_2.7.0b-lib/tabview/tabview-min.js"></script>
<!--there is no custom header content for this example-->
</head>
<body class=" yui-skin-sam">
<h1>Build from Markup</h1>
<div class="exampleIntro">
<p>This demonstrates how to build a TabView from markup.</p>
</div>
<!--BEGIN SOURCE CODE FOR EXAMPLE -->
<div id="demo" class="yui-navset">
<ul class="yui-nav">
<li><a href="#tab1"><em>Tab One Label</em></a></li>
<li class="selected"><a href="#tab2"><em>Tab Two Label</em></a></li>
<li><a href="#tab3"><em>Tab Three Label</em></a></li>
</ul>
<div class="yui-content">
<div id="tab1"><p>Tab One Content</p></div>
<div id="tab2"><p>Tab Two Content</p></div>
<div id="tab3"><p>Tab Three Content</p></div>
</div>
</div>
<script>
(function() {
var tabView = new YAHOO.widget.TabView("demo");
YAHOO.log("The example has finished loading; as you interact with it, you"ll see log messages appearing here.", "info", "example");
})();
</script>
<!--END SOURCE CODE FOR EXAMPLE -->
</body>
</html>
<!-- presentbright.corp.yahoo.ru uncompressed/chunked Thu Feb 19 10:53:19 PST 2009 -->
<A href="http://www.wbex.ru/Code/JavaScriptDownload/yui_2.7.0b.zip">yui_2.7.0b.zip( 4,431 k)</a>
Copy of the second branch of the tree at the top
<!--
Software License Agreement (BSD License)
Copyright (c) 2009, Yahoo! Inc.
All rights reserved.
Redistribution and use of this software in source and binary forms, with or without modification, are permitted provided that the following conditions are met:
* Redistributions of source code must retain the above copyright notice, this list of conditions and the
following disclaimer.
* Redistributions in binary form must reproduce the above copyright notice, this list of conditions and the following disclaimer in the documentation and/or other materials provided with the distribution.
* Neither the name of Yahoo! Inc. nor the names of its contributors may be used to endorse or promote products derived from this software without specific prior written permission of Yahoo! Inc.
THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
Sources of Intellectual Property Included in the YUI Library
YUI is issued by Yahoo! under the BSD license above. Below is a list of certain publicly available software that is the source of intellectual property in YUI, along with the licensing terms that pertain to thosesources of IP. This list is for informational purposes only and is not intended to represent an exhaustive list of third party contributions to the YUI.
* Douglas Crockford"s JSON parsing and stringifying methods: In the JSON Utility, Douglas Crockford"s JSON parsing and stringifying methods are adapted from work published at JSON.org. The adapted work is in the public domain.
* Robert Penner"s animation-easing algorithms: In the Animation Utility, YUI makes use of Robert Penner"s algorithms for easing.
* Geoff Stearns"s SWFObject: In the Charts Control and the Uploader versions through 2.7.0, YUI makes use of Geoff Stearns"s SWFObject v1.5 for Flash Player detection and embedding. More information on SWFObject can be found here (http://blog.deconcept.ru/swfobject/). SWFObject is (c) 2007 Geoff Stearns and is released under the MIT License (http://www.opensource.org/licenses/mit-license.php).
* Diego Perini"s IEContentLoaded technique: The Event Utility employs a technique developed by Diego Perini and licensed under GPL. YUI"s use of this technique is included under our BSD license with the author"s permission.
-->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Three Ways to Define a TreeView: Markup (Progressive Enhancement), Existing TreeView Instance, and Object Literal </title>
<style type="text/css">
/*margin and padding on body element
can introduce errors in determining
element position and are not recommended;
we turn them off as a foundation for YUI
CSS treatments. */
body {
margin:0;
padding:0;
}
</style>
<link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/fonts/fonts-min.css" />
<link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/treeview/assets/skins/sam/treeview.css" />
<script type="text/javascript" src="yui_2.7.0b-lib/yahoo-dom-event/yahoo-dom-event.js"></script>
<script type="text/javascript" src="yui_2.7.0b-lib/treeview/treeview-min.js"></script>
<!--begin custom header content for this example-->
<style type="text/css">
.whitebg {
background-color:white;
}
</style>
<!--end custom header content for this example-->
</head>
<body class=" yui-skin-sam">
<h1>Three Ways to Define a TreeView: Markup (Progressive Enhancement), Existing TreeView Instance, and Object Literal </h1>
<div class="exampleIntro">
<p>In this simple example you can see how to build <a href="http://developer.yahoo.ru/yui/treeview/">TreeView Control</a> instance from several different sources of data:</p>
<ol>
<li>an HTML list on the page;</li>
<li>an existing TreeView instance"s definition;</li>
<li>a branch of an existing TreeView instance (e.g., from one of its nodes).</li>
</ol>
</div>
<!--BEGIN SOURCE CODE FOR EXAMPLE -->
<h3>Tree from markup</h3>
<div id="markup" class="whitebg">
<ul>
<li>List 0
<ul>
<li>List 0-0
<ul>
<li>item 0-0-0</li>
<li>item 0-0-1</li>
</ul>
</li>
</ul>
</li>
<li>item 0-1
<ul>
<li><a target="_new" href="HTTP://developer.yahoo.ru/yui" title="go to YUI Home Page">YUI</a>
<ul>
<li>item 0-1-0</li>
<li>item 0-1-1</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
<hr/>
<h3>Copy of the tree above taken from its own definition</h3>
<div id="treeDiv2" class="whitebg"></div>
<hr/>
<h3>Copy of the second branch of the tree at the top</h3>
<div id="treeDiv3" class="whitebg"></div>
<hr/>
<h3>Tree built from a static definition</h3>
<div id="treeDiv4" class="whitebg"></div>
<script type="text/javascript">
//global variable to allow console inspection of tree:
var tree1, tree2, tree3;
//anonymous function wraps the remainder of the logic:
(function() {
var treeInit = function() {
tree1 = new YAHOO.widget.TreeView("markup");
tree1.render();
tree2 = new YAHOO.widget.TreeView("treeDiv2",tree1.getTreeDefinition());
tree2.render();
var branch = tree1.getRoot().children[1];
tree3 = new YAHOO.widget.TreeView("treeDiv3", branch.getNodeDefinition());
tree3.render();
(new YAHOO.widget.TreeView("treeDiv4",[
"Label 0",
{type:"Text", label:"text label 1", title:"this is the tooltip for text label 1"},
{type:"Text", label:"branch 1", title:"there should be children here", expanded:true, children:[
"Label 1-0"
]},
{type:"Text",label:"YAHOO",title:"this should be an href", href:"http://www.yahoo.ru", target:"somewhere new"},
{type:"HTML",html:"<a href="developer.yahoo.ru/yui">YUI</a>"},
{type:"MenuNode",label:"branch 3",title:"this is a menu node", expanded:false, children:[
"Label 3-0",
"Label 3-1"
]}
])).render();
};
//Add an onDOMReady handler to build the tree when the document is ready
YAHOO.util.Event.onDOMReady(treeInit);
})();
</script>
<!--END SOURCE CODE FOR EXAMPLE -->
</body>
</html>
<!-- presentbright.corp.yahoo.ru uncompressed/chunked Thu Feb 19 10:53:20 PST 2009 -->
<A href="http://www.wbex.ru/Code/JavaScriptDownload/yui_2.7.0b.zip">yui_2.7.0b.zip( 4,431 k)</a>
Copy of the tree above taken from its own definition
<!--
Software License Agreement (BSD License)
Copyright (c) 2009, Yahoo! Inc.
All rights reserved.
Redistribution and use of this software in source and binary forms, with or without modification, are permitted provided that the following conditions are met:
* Redistributions of source code must retain the above copyright notice, this list of conditions and the
following disclaimer.
* Redistributions in binary form must reproduce the above copyright notice, this list of conditions and the following disclaimer in the documentation and/or other materials provided with the distribution.
* Neither the name of Yahoo! Inc. nor the names of its contributors may be used to endorse or promote products derived from this software without specific prior written permission of Yahoo! Inc.
THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
Sources of Intellectual Property Included in the YUI Library
YUI is issued by Yahoo! under the BSD license above. Below is a list of certain publicly available software that is the source of intellectual property in YUI, along with the licensing terms that pertain to thosesources of IP. This list is for informational purposes only and is not intended to represent an exhaustive list of third party contributions to the YUI.
* Douglas Crockford"s JSON parsing and stringifying methods: In the JSON Utility, Douglas Crockford"s JSON parsing and stringifying methods are adapted from work published at JSON.org. The adapted work is in the public domain.
* Robert Penner"s animation-easing algorithms: In the Animation Utility, YUI makes use of Robert Penner"s algorithms for easing.
* Geoff Stearns"s SWFObject: In the Charts Control and the Uploader versions through 2.7.0, YUI makes use of Geoff Stearns"s SWFObject v1.5 for Flash Player detection and embedding. More information on SWFObject can be found here (http://blog.deconcept.ru/swfobject/). SWFObject is (c) 2007 Geoff Stearns and is released under the MIT License (http://www.opensource.org/licenses/mit-license.php).
* Diego Perini"s IEContentLoaded technique: The Event Utility employs a technique developed by Diego Perini and licensed under GPL. YUI"s use of this technique is included under our BSD license with the author"s permission.
-->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Three Ways to Define a TreeView: Markup (Progressive Enhancement), Existing TreeView Instance, and Object Literal </title>
<style type="text/css">
/*margin and padding on body element
can introduce errors in determining
element position and are not recommended;
we turn them off as a foundation for YUI
CSS treatments. */
body {
margin:0;
padding:0;
}
</style>
<link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/fonts/fonts-min.css" />
<link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/treeview/assets/skins/sam/treeview.css" />
<script type="text/javascript" src="yui_2.7.0b-lib/yahoo-dom-event/yahoo-dom-event.js"></script>
<script type="text/javascript" src="yui_2.7.0b-lib/treeview/treeview-min.js"></script>
<!--begin custom header content for this example-->
<style type="text/css">
.whitebg {
background-color:white;
}
</style>
<!--end custom header content for this example-->
</head>
<body class=" yui-skin-sam">
<h1>Three Ways to Define a TreeView: Markup (Progressive Enhancement), Existing TreeView Instance, and Object Literal </h1>
<div class="exampleIntro">
<p>In this simple example you can see how to build <a href="http://developer.yahoo.ru/yui/treeview/">TreeView Control</a> instance from several different sources of data:</p>
<ol>
<li>an HTML list on the page;</li>
<li>an existing TreeView instance"s definition;</li>
<li>a branch of an existing TreeView instance (e.g., from one of its nodes).</li>
</ol>
</div>
<!--BEGIN SOURCE CODE FOR EXAMPLE -->
<h3>Tree from markup</h3>
<div id="markup" class="whitebg">
<ul>
<li>List 0
<ul>
<li>List 0-0
<ul>
<li>item 0-0-0</li>
<li>item 0-0-1</li>
</ul>
</li>
</ul>
</li>
<li>item 0-1
<ul>
<li><a target="_new" href="HTTP://developer.yahoo.ru/yui" title="go to YUI Home Page">YUI</a>
<ul>
<li>item 0-1-0</li>
<li>item 0-1-1</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
<hr/>
<h3>Copy of the tree above taken from its own definition</h3>
<div id="treeDiv2" class="whitebg"></div>
<hr/>
<h3>Copy of the second branch of the tree at the top</h3>
<div id="treeDiv3" class="whitebg"></div>
<hr/>
<h3>Tree built from a static definition</h3>
<div id="treeDiv4" class="whitebg"></div>
<script type="text/javascript">
//global variable to allow console inspection of tree:
var tree1, tree2, tree3;
//anonymous function wraps the remainder of the logic:
(function() {
var treeInit = function() {
tree1 = new YAHOO.widget.TreeView("markup");
tree1.render();
tree2 = new YAHOO.widget.TreeView("treeDiv2",tree1.getTreeDefinition());
tree2.render();
var branch = tree1.getRoot().children[1];
tree3 = new YAHOO.widget.TreeView("treeDiv3", branch.getNodeDefinition());
tree3.render();
(new YAHOO.widget.TreeView("treeDiv4",[
"Label 0",
{type:"Text", label:"text label 1", title:"this is the tooltip for text label 1"},
{type:"Text", label:"branch 1", title:"there should be children here", expanded:true, children:[
"Label 1-0"
]},
{type:"Text",label:"YAHOO",title:"this should be an href", href:"http://www.yahoo.ru", target:"somewhere new"},
{type:"HTML",html:"<a href="developer.yahoo.ru/yui">YUI</a>"},
{type:"MenuNode",label:"branch 3",title:"this is a menu node", expanded:false, children:[
"Label 3-0",
"Label 3-1"
]}
])).render();
};
//Add an onDOMReady handler to build the tree when the document is ready
YAHOO.util.Event.onDOMReady(treeInit);
})();
</script>
<!--END SOURCE CODE FOR EXAMPLE -->
</body>
</html>
<!-- presentbright.corp.yahoo.ru uncompressed/chunked Thu Feb 19 10:53:20 PST 2009 -->
<A href="http://www.wbex.ru/Code/JavaScriptDownload/yui_2.7.0b.zip">yui_2.7.0b.zip( 4,431 k)</a>
Create Tree from markup
<!--
Software License Agreement (BSD License)
Copyright (c) 2009, Yahoo! Inc.
All rights reserved.
Redistribution and use of this software in source and binary forms, with or without modification, are permitted provided that the following conditions are met:
* Redistributions of source code must retain the above copyright notice, this list of conditions and the
following disclaimer.
* Redistributions in binary form must reproduce the above copyright notice, this list of conditions and the following disclaimer in the documentation and/or other materials provided with the distribution.
* Neither the name of Yahoo! Inc. nor the names of its contributors may be used to endorse or promote products derived from this software without specific prior written permission of Yahoo! Inc.
THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
Sources of Intellectual Property Included in the YUI Library
YUI is issued by Yahoo! under the BSD license above. Below is a list of certain publicly available software that is the source of intellectual property in YUI, along with the licensing terms that pertain to thosesources of IP. This list is for informational purposes only and is not intended to represent an exhaustive list of third party contributions to the YUI.
* Douglas Crockford"s JSON parsing and stringifying methods: In the JSON Utility, Douglas Crockford"s JSON parsing and stringifying methods are adapted from work published at JSON.org. The adapted work is in the public domain.
* Robert Penner"s animation-easing algorithms: In the Animation Utility, YUI makes use of Robert Penner"s algorithms for easing.
* Geoff Stearns"s SWFObject: In the Charts Control and the Uploader versions through 2.7.0, YUI makes use of Geoff Stearns"s SWFObject v1.5 for Flash Player detection and embedding. More information on SWFObject can be found here (http://blog.deconcept.ru/swfobject/). SWFObject is (c) 2007 Geoff Stearns and is released under the MIT License (http://www.opensource.org/licenses/mit-license.php).
* Diego Perini"s IEContentLoaded technique: The Event Utility employs a technique developed by Diego Perini and licensed under GPL. YUI"s use of this technique is included under our BSD license with the author"s permission.
-->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Three Ways to Define a TreeView: Markup (Progressive Enhancement), Existing TreeView Instance, and Object Literal </title>
<style type="text/css">
/*margin and padding on body element
can introduce errors in determining
element position and are not recommended;
we turn them off as a foundation for YUI
CSS treatments. */
body {
margin:0;
padding:0;
}
</style>
<link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/fonts/fonts-min.css" />
<link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/treeview/assets/skins/sam/treeview.css" />
<script type="text/javascript" src="yui_2.7.0b-lib/yahoo-dom-event/yahoo-dom-event.js"></script>
<script type="text/javascript" src="yui_2.7.0b-lib/treeview/treeview-min.js"></script>
<!--begin custom header content for this example-->
<style type="text/css">
.whitebg {
background-color:white;
}
</style>
<!--end custom header content for this example-->
</head>
<body class=" yui-skin-sam">
<h1>Three Ways to Define a TreeView: Markup (Progressive Enhancement), Existing TreeView Instance, and Object Literal </h1>
<div class="exampleIntro">
<p>In this simple example you can see how to build <a href="http://developer.yahoo.ru/yui/treeview/">TreeView Control</a> instance from several different sources of data:</p>
<ol>
<li>an HTML list on the page;</li>
<li>an existing TreeView instance"s definition;</li>
<li>a branch of an existing TreeView instance (e.g., from one of its nodes).</li>
</ol>
</div>
<!--BEGIN SOURCE CODE FOR EXAMPLE -->
<h3>Tree from markup</h3>
<div id="markup" class="whitebg">
<ul>
<li>List 0
<ul>
<li>List 0-0
<ul>
<li>item 0-0-0</li>
<li>item 0-0-1</li>
</ul>
</li>
</ul>
</li>
<li>item 0-1
<ul>
<li><a target="_new" href="HTTP://developer.yahoo.ru/yui" title="go to YUI Home Page">YUI</a>
<ul>
<li>item 0-1-0</li>
<li>item 0-1-1</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
<hr/>
<h3>Copy of the tree above taken from its own definition</h3>
<div id="treeDiv2" class="whitebg"></div>
<hr/>
<h3>Copy of the second branch of the tree at the top</h3>
<div id="treeDiv3" class="whitebg"></div>
<hr/>
<h3>Tree built from a static definition</h3>
<div id="treeDiv4" class="whitebg"></div>
<script type="text/javascript">
//global variable to allow console inspection of tree:
var tree1, tree2, tree3;
//anonymous function wraps the remainder of the logic:
(function() {
var treeInit = function() {
tree1 = new YAHOO.widget.TreeView("markup");
tree1.render();
tree2 = new YAHOO.widget.TreeView("treeDiv2",tree1.getTreeDefinition());
tree2.render();
var branch = tree1.getRoot().children[1];
tree3 = new YAHOO.widget.TreeView("treeDiv3", branch.getNodeDefinition());
tree3.render();
(new YAHOO.widget.TreeView("treeDiv4",[
"Label 0",
{type:"Text", label:"text label 1", title:"this is the tooltip for text label 1"},
{type:"Text", label:"branch 1", title:"there should be children here", expanded:true, children:[
"Label 1-0"
]},
{type:"Text",label:"YAHOO",title:"this should be an href", href:"http://www.yahoo.ru", target:"somewhere new"},
{type:"HTML",html:"<a href="developer.yahoo.ru/yui">YUI</a>"},
{type:"MenuNode",label:"branch 3",title:"this is a menu node", expanded:false, children:[
"Label 3-0",
"Label 3-1"
]}
])).render();
};
//Add an onDOMReady handler to build the tree when the document is ready
YAHOO.util.Event.onDOMReady(treeInit);
})();
</script>
<!--END SOURCE CODE FOR EXAMPLE -->
</body>
</html>
<!-- presentbright.corp.yahoo.ru uncompressed/chunked Thu Feb 19 10:53:20 PST 2009 -->
<A href="http://www.wbex.ru/Code/JavaScriptDownload/yui_2.7.0b.zip">yui_2.7.0b.zip( 4,431 k)</a>
Default presentation for the TreeView Control.
<!--
Software License Agreement (BSD License)
Copyright (c) 2009, Yahoo! Inc.
All rights reserved.
Redistribution and use of this software in source and binary forms, with or without modification, are permitted provided that the following conditions are met:
* Redistributions of source code must retain the above copyright notice, this list of conditions and the
following disclaimer.
* Redistributions in binary form must reproduce the above copyright notice, this list of conditions and the following disclaimer in the documentation and/or other materials provided with the distribution.
* Neither the name of Yahoo! Inc. nor the names of its contributors may be used to endorse or promote products derived from this software without specific prior written permission of Yahoo! Inc.
THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
Sources of Intellectual Property Included in the YUI Library
YUI is issued by Yahoo! under the BSD license above. Below is a list of certain publicly available software that is the source of intellectual property in YUI, along with the licensing terms that pertain to thosesources of IP. This list is for informational purposes only and is not intended to represent an exhaustive list of third party contributions to the YUI.
* Douglas Crockford"s JSON parsing and stringifying methods: In the JSON Utility, Douglas Crockford"s JSON parsing and stringifying methods are adapted from work published at JSON.org. The adapted work is in the public domain.
* Robert Penner"s animation-easing algorithms: In the Animation Utility, YUI makes use of Robert Penner"s algorithms for easing.
* Geoff Stearns"s SWFObject: In the Charts Control and the Uploader versions through 2.7.0, YUI makes use of Geoff Stearns"s SWFObject v1.5 for Flash Player detection and embedding. More information on SWFObject can be found here (http://blog.deconcept.ru/swfobject/). SWFObject is (c) 2007 Geoff Stearns and is released under the MIT License (http://www.opensource.org/licenses/mit-license.php).
* Diego Perini"s IEContentLoaded technique: The Event Utility employs a technique developed by Diego Perini and licensed under GPL. YUI"s use of this technique is included under our BSD license with the author"s permission.
-->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Default TreeView</title>
<style type="text/css">
/*margin and padding on body element
can introduce errors in determining
element position and are not recommended;
we turn them off as a foundation for YUI
CSS treatments. */
body {
margin:0;
padding:0;
}
</style>
<link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/fonts/fonts-min.css" />
<link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/treeview/assets/skins/sam/treeview.css" />
<script type="text/javascript" src="yui_2.7.0b-lib/yahoo-dom-event/yahoo-dom-event.js"></script>
<script type="text/javascript" src="yui_2.7.0b-lib/treeview/treeview-min.js"></script>
<!--begin custom header content for this example-->
<style>
#treeDiv1 {background: #fff; padding:1em;}
</style>
<!--end custom header content for this example-->
</head>
<body class=" yui-skin-sam">
<h1>Default TreeView</h1>
<div class="exampleIntro">
<p>In this simple example you see the default presentation for the <a href="http://developer.yahoo.ru/yui/treeview/">TreeView Control</a>. Click on labels or on the expand/collapse icons for each node to interact with the TreeView Control.</p>
</div>
<!--BEGIN SOURCE CODE FOR EXAMPLE -->
<div id="treeDiv1"></div>
<script type="text/javascript">
//global variable to allow console inspection of tree:
var tree;
//anonymous function wraps the remainder of the logic:
(function() {
//function to initialize the tree:
function treeInit() {
buildRandomTextNodeTree();
}
//Function creates the tree and
//builds between 3 and 7 children of the root node:
function buildRandomTextNodeTree() {
//instantiate the tree:
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) {
YAHOO.log(node.index + " was expanded", "info", "example");
// return false; // return false to cancel the expand
});
tree.subscribe("collapse", function(node) {
YAHOO.log(node.index + " was collapsed", "info", "example");
});
// Trees with TextNodes will fire an event for when the label is clicked:
tree.subscribe("labelClick", function(node) {
YAHOO.log(node.index + " label was clicked", "info", "example");
});
//The tree is not created in the DOM until this method is called:
tree.draw();
}
//function builds 10 children for the node you pass in:
function buildLargeBranch(node) {
if (node.depth < 10) {
YAHOO.log("buildRandomTextBranch: " + node.index, "info", "example");
for ( var i = 0; i < 10; i++ ) {
new YAHOO.widget.TextNode(node.label + "-" + i, node, false);
}
}
}
//Add an onDOMReady handler to build the tree when the document is ready
YAHOO.util.Event.onDOMReady(treeInit);
})();
</script>
<!--END SOURCE CODE FOR EXAMPLE -->
</body>
</html>
<!-- presentbright.corp.yahoo.ru uncompressed/chunked Thu Feb 19 10:53:19 PST 2009 -->
<A href="http://www.wbex.ru/Code/JavaScriptDownload/yui_2.7.0b.zip">yui_2.7.0b.zip( 4,431 k)</a>
Dynamically Loading Node Data
<!--
Software License Agreement (BSD License)
Copyright (c) 2009, Yahoo! Inc.
All rights reserved.
Redistribution and use of this software in source and binary forms, with or without modification, are permitted provided that the following conditions are met:
* Redistributions of source code must retain the above copyright notice, this list of conditions and the
following disclaimer.
* Redistributions in binary form must reproduce the above copyright notice, this list of conditions and the following disclaimer in the documentation and/or other materials provided with the distribution.
* Neither the name of Yahoo! Inc. nor the names of its contributors may be used to endorse or promote products derived from this software without specific prior written permission of Yahoo! Inc.
THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
Sources of Intellectual Property Included in the YUI Library
YUI is issued by Yahoo! under the BSD license above. Below is a list of certain publicly available software that is the source of intellectual property in YUI, along with the licensing terms that pertain to thosesources of IP. This list is for informational purposes only and is not intended to represent an exhaustive list of third party contributions to the YUI.
* Douglas Crockford"s JSON parsing and stringifying methods: In the JSON Utility, Douglas Crockford"s JSON parsing and stringifying methods are adapted from work published at JSON.org. The adapted work is in the public domain.
* Robert Penner"s animation-easing algorithms: In the Animation Utility, YUI makes use of Robert Penner"s algorithms for easing.
* Geoff Stearns"s SWFObject: In the Charts Control and the Uploader versions through 2.7.0, YUI makes use of Geoff Stearns"s SWFObject v1.5 for Flash Player detection and embedding. More information on SWFObject can be found here (http://blog.deconcept.ru/swfobject/). SWFObject is (c) 2007 Geoff Stearns and is released under the MIT License (http://www.opensource.org/licenses/mit-license.php).
* Diego Perini"s IEContentLoaded technique: The Event Utility employs a technique developed by Diego Perini and licensed under GPL. YUI"s use of this technique is included under our BSD license with the author"s permission.
-->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Dynamically Loading Node Data</title>
<style type="text/css">
/*margin and padding on body element
can introduce errors in determining
element position and are not recommended;
we turn them off as a foundation for YUI
CSS treatments. */
body {
margin:0;
padding:0;
}
</style>
<link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/fonts/fonts-min.css" />
<link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/treeview/assets/skins/sam/treeview.css" />
<script type="text/javascript" src="yui_2.7.0b-lib/yahoo-dom-event/yahoo-dom-event.js"></script>
<script type="text/javascript" src="yui_2.7.0b-lib/connection/connection-min.js"></script>
<script type="text/javascript" src="yui_2.7.0b-lib/treeview/treeview-min.js"></script>
<!--begin custom header content for this example-->
<style>
#treeDiv1 {background: #fff; margin-top:1em; padding:1em; min-height:7em;}
</style>
<!--end custom header content for this example-->
</head>
<body class=" yui-skin-sam">
<h1>Dynamically Loading Node Data</h1>
<div class="exampleIntro">
<p>In many cases, you"ll want to avoid rendering your <a
href="http://developer.yahoo.ru/yui/treeview/">TreeView Control</a> with a
full dataset. Rather, you"ll want to load all visible nodes immediately and
then retrieve data only when needed for nodes that aren"t visible when the
control is first loaded. This example shows you how to do that.</p>
<p>In the TreeView instance below, we"ve loaded all "top-level" nodes into the
page as soon as the page loads; these nodes contain the names of many Indian
states. When a node is expanded, we use <a
href="http://developer.yahoo.ru/yui/connection/">Connection Manager</a> to
access <a
href="http://developer.yahoo.ru/search/web/V1/relatedSuggestion.html">a Yahoo!
Search web service that will return a list of "related suggestions."</a> So
when the page loads, we know nothing about our top-level nodes" children. And
while the resulting TreeView instance could grow quite large through user
interaction, we need only load a very light set of nodes to begin with.
</p>
<p>This example also shows the two label styles for childless nodes. The first
(default) style maintains the expand/collapse icon style even when the node has
no children; the second style shows childless nodes as leaf nodes with no
expand/collapse icon. Note: this is for dynamically loaded nodes after the
dynamic load process has produced zero children. You can also force the leaf
node presentation for any node by setting the isLeaf property to true (this
also disables dynamic loading).</p>
</div>
<!--BEGIN SOURCE CODE FOR EXAMPLE -->
<h3>Childless Node Style:</h3>
<dd><label for="mode0"><input type="radio" id="mode0" name="mode" value ="0" checked />
Expand/Collapse</label>
</dd>
<dd><label for="mode1"><input type="radio" id="mode1" name="mode" value ="1" /> Leaf Node</label></dd>
<div id="treeDiv1"></div>
<script type="text/javascript">
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 load node data based on what we get back when we
//use Connection Manager topass the text label of the
//expanding node to the Yahoo!
//Search "related suggestions" API. Here, we"re at the
//first part of the request -- we"ll make the request to the
//server. In our success handler, we"ll build our new children
//and then return fnLoadComplete back to the tree.
//Get the node"s label and urlencode it; this is the word/s
//on which we"ll search for related words:
var nodeLabel = encodeURI(node.label);
//prepare URL for XHR request:
var sUrl = "yui_2.7.0b-assets/treeview-assets/ysuggest_proxy.php?query=" + nodeLabel;
//prepare our callback object
var callback = {
//if our XHR call is successful, we want to make use
//of the returned data and create child nodes.
success: function(oResponse) {
YAHOO.log("XHR transaction was successful.", "info", "example");
//YAHOO.log(oResponse.responseText);
var oResults = eval("(" + oResponse.responseText + ")");
if((oResults.ResultSet.Result) && (oResults.ResultSet.Result.length)) {
//Result is an array if more than one result, string otherwise
if(YAHOO.lang.isArray(oResults.ResultSet.Result)) {
for (var i=0, j=oResults.ResultSet.Result.length; i<j; i++) {
var tempNode = new YAHOO.widget.TextNode(oResults.ResultSet.Result[i], node, false);
}
} else {
//there is only one result; comes as string:
var tempNode = new YAHOO.widget.TextNode(oResults.ResultSet.Result, node, false)
}
}
//When we"re done creating child nodes, we execute the node"s
//loadComplete callback method which comes in via the argument
//in the response object (we could also access it at node.loadComplete,
//if necessary):
oResponse.argument.fnLoadComplete();
},
//if our XHR call is not successful, we want to
//fire the TreeView callback and let the Tree
//proceed with its business.
failure: function(oResponse) {
YAHOO.log("Failed to process XHR transaction.", "info", "example");
oResponse.argument.fnLoadComplete();
},
//our handlers for the XHR response will need the same
//argument information we got to loadNodeData, so
//we"ll pass those along:
argument: {
"node": node,
"fnLoadComplete": fnLoadComplete
},
//timeout -- if more than 7 seconds go by, we"ll abort
//the transaction and assume there are no children:
timeout: 7000
};
//With our callback object ready, it"s now time to
//make our XHR call using Connection Manager"s
//asyncRequest method:
YAHOO.util.Connect.asyncRequest("GET", sUrl, callback);
}
function buildTree() {
//create a new tree:
tree = new YAHOO.widget.TreeView("treeDiv1");
//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; our top level nodes are
//all the states in India:
var aStates = ["Andhra Pradesh","Arunachal Pradesh","Assam","Bihar","Chhattisgarh","Goa","Gujarat","Haryana","Himachal Pradesh","Jammu and Kashmir","Jharkhand","Karnataka"/* we"re only using the first half of this list, to keep the tree smaller,"Kerala","Madhya Pradesh","Maharashtra","Manipur","Meghalaya","Mizoram","Nagaland","Orissa","Punjab","Rajasthan","Sikkim","Tamil Nadu","Tripura","Uttaranchal","Uttar","Pradesh","West Bengal"*/];
for (var i=0, j=aStates.length; i<j; i++) {
var tempNode = new YAHOO.widget.TextNode(aStates[i], root, false);
}
// Use the isLeaf property to force the leaf node presentation for a given node.
// This disables dynamic loading for the node.
var tempNode = new YAHOO.widget.TextNode("This is a leaf node", root, false);
tempNode.isLeaf = true;
//render tree with these toplevel 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();
}
}
} ();
//once the DOM has loaded, we can go ahead and set up our tree:
YAHOO.util.Event.onDOMReady(YAHOO.example.treeExample.init, YAHOO.example.treeExample,true)
</script>
<!--END SOURCE CODE FOR EXAMPLE -->
</body>
</html>
<!-- presentbright.corp.yahoo.ru uncompressed/chunked Thu Feb 19 10:53:19 PST 2009 -->
<A href="http://www.wbex.ru/Code/JavaScriptDownload/yui_2.7.0b.zip">yui_2.7.0b.zip( 4,431 k)</a>
Folder-Style TreeView Design: transform the look of your TreeView Control by changing CSS
<!--
Software License Agreement (BSD License)
Copyright (c) 2009, Yahoo! Inc.
All rights reserved.
Redistribution and use of this software in source and binary forms, with or without modification, are permitted provided that the following conditions are met:
* Redistributions of source code must retain the above copyright notice, this list of conditions and the
following disclaimer.
* Redistributions in binary form must reproduce the above copyright notice, this list of conditions and the following disclaimer in the documentation and/or other materials provided with the distribution.
* Neither the name of Yahoo! Inc. nor the names of its contributors may be used to endorse or promote products derived from this software without specific prior written permission of Yahoo! Inc.
THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
Sources of Intellectual Property Included in the YUI Library
YUI is issued by Yahoo! under the BSD license above. Below is a list of certain publicly available software that is the source of intellectual property in YUI, along with the licensing terms that pertain to thosesources of IP. This list is for informational purposes only and is not intended to represent an exhaustive list of third party contributions to the YUI.
* Douglas Crockford"s JSON parsing and stringifying methods: In the JSON Utility, Douglas Crockford"s JSON parsing and stringifying methods are adapted from work published at JSON.org. The adapted work is in the public domain.
* Robert Penner"s animation-easing algorithms: In the Animation Utility, YUI makes use of Robert Penner"s algorithms for easing.
* Geoff Stearns"s SWFObject: In the Charts Control and the Uploader versions through 2.7.0, YUI makes use of Geoff Stearns"s SWFObject v1.5 for Flash Player detection and embedding. More information on SWFObject can be found here (http://blog.deconcept.ru/swfobject/). SWFObject is (c) 2007 Geoff Stearns and is released under the MIT License (http://www.opensource.org/licenses/mit-license.php).
* Diego Perini"s IEContentLoaded technique: The Event Utility employs a technique developed by Diego Perini and licensed under GPL. YUI"s use of this technique is included under our BSD license with the author"s permission.
-->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Folder-Style TreeView Design</title>
<style type="text/css">
/*margin and padding on body element
can introduce errors in determining
element position and are not recommended;
we turn them off as a foundation for YUI
CSS treatments. */
body {
margin:0;
padding:0;
}
</style>
<link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/fonts/fonts-min.css" />
<link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/treeview/assets/skins/sam/treeview.css" />
<script type="text/javascript" src="yui_2.7.0b-lib/yahoo-dom-event/yahoo-dom-event.js"></script>
<script type="text/javascript" src="yui_2.7.0b-lib/treeview/treeview-min.js"></script>
<!--begin custom header content for this example-->
<!--bring in the folder-style CSS for the TreeView Control-->
<link rel="stylesheet" type="text/css" href="yui_2.7.0b-assets/treeview-assets/css/folders/tree.css">
<!-- Some custom style for the expand/contract section-->
<style>
#expandcontractdiv {border:1px dotted #dedede; background-color:#EBE4F2; margin:0 0 .5em 0; padding:0.4em;}
#treeDiv1 { background: #fff; padding:1em; margin-top:1em; }
</style>
<!--end custom header content for this example-->
</head>
<body class=" yui-skin-sam">
<h1>Folder-Style TreeView Design</h1>
<div class="exampleIntro">
<p>This example demonstrates how you can transform the look of your <a href="http://developer.yahoo.ru/yui/treeview/">TreeView Control</a> simply by changing the CSS rules on the page. Here, the TreeView instance has a "folder style" applied to it such that branch nodes appear as open or closed folders depending on their expand/collapse state.</p>
</div>
<!--BEGIN SOURCE CODE FOR EXAMPLE -->
<!-- markup for expand/contract links -->
<div id="expandcontractdiv">
<a id="expand" href="#">Expand all</a>
<a id="collapse" href="#">Collapse all</a>
</div>
<div id="treeDiv1"></div>
<script type="text/javascript">
//an anonymous function wraps our code to keep our variables
//in function scope rather than in the global namespace:
(function() {
var tree; //will hold our TreeView instance
function treeInit() {
YAHOO.log("Example"s treeInit function firing.", "info", "example");
//Hand off ot a method that randomly generates tree nodes:
buildRandomTextNodeTree();
//handler for expanding all nodes
YAHOO.util.Event.on("expand", "click", function(e) {
YAHOO.log("Expanding all TreeView nodes.", "info", "example");
tree.expandAll();
YAHOO.util.Event.preventDefault(e);
});
//handler for collapsing all nodes
YAHOO.util.Event.on("collapse", "click", function(e) {
YAHOO.log("Collapsing all TreeView nodes.", "info", "example");
tree.collapseAll();
YAHOO.util.Event.preventDefault(e);
});
}
//This method will build a TreeView instance and populate it with
//between 3 and 7 top-level nodes
function buildRandomTextNodeTree() {
//instantiate the tree:
tree = new YAHOO.widget.TreeView("treeDiv1");
//create top-level nodes
for (var i = 0; i < Math.floor((Math.random()*4) + 3); i++) {
var tmpNode = new YAHOO.widget.TextNode("label-" + i, tree.getRoot(), false);
//we"ll delegate to another function to build child nodes:
buildRandomTextBranch(tmpNode);
}
//once it"s all built out, we need to render
//our TreeView instance:
tree.draw();
}
//This function adds a random number <4 of child nodes to a given
//node, stopping at a specific node depth:
function buildRandomTextBranch(node) {
if (node.depth < 6) {
YAHOO.log("buildRandomTextBranch: " + node.index);
for ( var i = 0; i < Math.floor(Math.random() * 4) ; i++ ) {
var tmpNode = new YAHOO.widget.TextNode(node.label + "-" + i, node, false);
buildRandomTextBranch(tmpNode);
}
}
}
//When the DOM is done loading, we can initialize our TreeView
//instance:
YAHOO.util.Event.onDOMReady(treeInit);
})();//anonymous function wrapper closed; () notation executes function
</script>
<!--END SOURCE CODE FOR EXAMPLE -->
</body>
</html>
<!-- presentbright.corp.yahoo.ru uncompressed/chunked Thu Feb 19 10:53:19 PST 2009 -->
<A href="http://www.wbex.ru/Code/JavaScriptDownload/yui_2.7.0b.zip">yui_2.7.0b.zip( 4,431 k)</a>
Inline Editing of TreeView Node Labels
<!--
Software License Agreement (BSD License)
Copyright (c) 2009, Yahoo! Inc.
All rights reserved.
Redistribution and use of this software in source and binary forms, with or without modification, are permitted provided that the following conditions are met:
* Redistributions of source code must retain the above copyright notice, this list of conditions and the
following disclaimer.
* Redistributions in binary form must reproduce the above copyright notice, this list of conditions and the following disclaimer in the documentation and/or other materials provided with the distribution.
* Neither the name of Yahoo! Inc. nor the names of its contributors may be used to endorse or promote products derived from this software without specific prior written permission of Yahoo! Inc.
THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
Sources of Intellectual Property Included in the YUI Library
YUI is issued by Yahoo! under the BSD license above. Below is a list of certain publicly available software that is the source of intellectual property in YUI, along with the licensing terms that pertain to thosesources of IP. This list is for informational purposes only and is not intended to represent an exhaustive list of third party contributions to the YUI.
* Douglas Crockford"s JSON parsing and stringifying methods: In the JSON Utility, Douglas Crockford"s JSON parsing and stringifying methods are adapted from work published at JSON.org. The adapted work is in the public domain.
* Robert Penner"s animation-easing algorithms: In the Animation Utility, YUI makes use of Robert Penner"s algorithms for easing.
* Geoff Stearns"s SWFObject: In the Charts Control and the Uploader versions through 2.7.0, YUI makes use of Geoff Stearns"s SWFObject v1.5 for Flash Player detection and embedding. More information on SWFObject can be found here (http://blog.deconcept.ru/swfobject/). SWFObject is (c) 2007 Geoff Stearns and is released under the MIT License (http://www.opensource.org/licenses/mit-license.php).
* Diego Perini"s IEContentLoaded technique: The Event Utility employs a technique developed by Diego Perini and licensed under GPL. YUI"s use of this technique is included under our BSD license with the author"s permission.
-->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Inline Editing of TreeView Node Labels</title>
<style type="text/css">
/*margin and padding on body element
can introduce errors in determining
element position and are not recommended;
we turn them off as a foundation for YUI
CSS treatments. */
body {
margin:0;
padding:0;
}
</style>
<link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/fonts/fonts-min.css" />
<link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/calendar/assets/skins/sam/calendar.css" />
<link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/treeview/assets/skins/sam/treeview.css" />
<script type="text/javascript" src="yui_2.7.0b-lib/yahoo-dom-event/yahoo-dom-event.js"></script>
<script type="text/javascript" src="yui_2.7.0b-lib/calendar/calendar-min.js"></script>
<script type="text/javascript" src="yui_2.7.0b-lib/treeview/treeview-min.js"></script>
<!--begin custom header content for this example-->
<!--end custom header content for this example-->
</head>
<body class=" yui-skin-sam">
<h1>Inline Editing of TreeView Node Labels</h1>
<div class="exampleIntro">
<p>This example demonstrates label editing and keyboard navigation in the <a href="http://developer.yahoo.ru/yui/treeview/">YUI TreeView Control</a>. As you interact with the TreeView instance below, you"ll find that some nodes allow you to edit them — double-click on node labels to open the inline editor. This example also demonstrates how you can use arrow keys, +/- keys (expand/collapse), and the enter key to navigate and control the TreeView instance.</p>
</div>
<!--BEGIN SOURCE CODE FOR EXAMPLE -->
<div id="treeView" style="background-color:white"></div>
<div id="msg"> </div>
<script type="text/javascript">
//global variable to allow console inspection of tree:
var tree;
//anonymous function wraps the remainder of the logic:
(function() {
var treeInit = function() {
tree = new YAHOO.widget.TreeView("treeView", [
"Label 0",
{type:"Text", label:"Label 1", editable:true},
{type:"Text", label:"Branch 2", editable:true, expanded:true, children:[
{type:"Text", label:"Branch 2-0", editable:true, children: [
"Label 2-0-0",
"Label 2-0-1"
]},
{type:"Text", label:"Branch 2-1", editable:true, children: [
"Label 2-1-0",
"Label 2-1-1"
]},
]},
{type:"Text",label:"YAHOO", href:"http://www.yahoo.ru", target:"YAHOO\"s home page"},
{type:"DateNode",label:"31.3.2001",editable:true, calendarConfig: {
DATE_FIELD_DELIMITER:".",
MDY_DAY_POSITION:1,
MDY_MONTH_POSITION:2,
MDY_YEAR_POSITION:3
}},
{type:"text",label:"Branch 3", editable:true, expanded:false, children:[
"Label 3-0",
"Label 3-1"
]}
]);
tree.render();
tree.subscribe("dblClickEvent",tree.onEventEditNode);
tree.root.children[1].focus();
tree.subscribe("enterKeyPressed",function(node) {
YAHOO.util.Dom.get("msg").innerHTML = "Enter key pressed on node: " + node.label;
});
tree.subscribe("clickEvent",function(oArgs) {
YAHOO.util.Dom.get("msg").innerHTML = "Click on node: " + oArgs.node.label;
});
tree.subscribe("dblClickEvent",function(oArgs) {
YAHOO.util.Dom.get("msg").innerHTML = "Double click on node: " + oArgs.node.label;
});
};
//Add an onDOMReady handler to build the tree when the document is ready
YAHOO.util.Event.onDOMReady(treeInit);
})();
</script>
<!--END SOURCE CODE FOR EXAMPLE -->
</body>
</html>
<!-- presentbright.corp.yahoo.ru uncompressed/chunked Thu Feb 19 10:53:20 PST 2009 -->
<A href="http://www.wbex.ru/Code/JavaScriptDownload/yui_2.7.0b.zip">yui_2.7.0b.zip( 4,431 k)</a>
Menu-Style TreeView Design
<!--
Software License Agreement (BSD License)
Copyright (c) 2009, Yahoo! Inc.
All rights reserved.
Redistribution and use of this software in source and binary forms, with or without modification, are permitted provided that the following conditions are met:
* Redistributions of source code must retain the above copyright notice, this list of conditions and the
following disclaimer.
* Redistributions in binary form must reproduce the above copyright notice, this list of conditions and the following disclaimer in the documentation and/or other materials provided with the distribution.
* Neither the name of Yahoo! Inc. nor the names of its contributors may be used to endorse or promote products derived from this software without specific prior written permission of Yahoo! Inc.
THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
Sources of Intellectual Property Included in the YUI Library
YUI is issued by Yahoo! under the BSD license above. Below is a list of certain publicly available software that is the source of intellectual property in YUI, along with the licensing terms that pertain to thosesources of IP. This list is for informational purposes only and is not intended to represent an exhaustive list of third party contributions to the YUI.
* Douglas Crockford"s JSON parsing and stringifying methods: In the JSON Utility, Douglas Crockford"s JSON parsing and stringifying methods are adapted from work published at JSON.org. The adapted work is in the public domain.
* Robert Penner"s animation-easing algorithms: In the Animation Utility, YUI makes use of Robert Penner"s algorithms for easing.
* Geoff Stearns"s SWFObject: In the Charts Control and the Uploader versions through 2.7.0, YUI makes use of Geoff Stearns"s SWFObject v1.5 for Flash Player detection and embedding. More information on SWFObject can be found here (http://blog.deconcept.ru/swfobject/). SWFObject is (c) 2007 Geoff Stearns and is released under the MIT License (http://www.opensource.org/licenses/mit-license.php).
* Diego Perini"s IEContentLoaded technique: The Event Utility employs a technique developed by Diego Perini and licensed under GPL. YUI"s use of this technique is included under our BSD license with the author"s permission.
-->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Menu-Style TreeView Design</title>
<style type="text/css">
/*margin and padding on body element
can introduce errors in determining
element position and are not recommended;
we turn them off as a foundation for YUI
CSS treatments. */
body {
margin:0;
padding:0;
}
</style>
<link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/fonts/fonts-min.css" />
<link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/treeview/assets/skins/sam/treeview.css" />
<script type="text/javascript" src="yui_2.7.0b-lib/yahoo-dom-event/yahoo-dom-event.js"></script>
<script type="text/javascript" src="yui_2.7.0b-lib/treeview/treeview-min.js"></script>
<!--begin custom header content for this example-->
<!--bring in the folder-style CSS for the TreeView Control-->
<link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/treeview/assets/treeview-menu.css" />
<!-- Some custom style for the expand/contract section-->
<style>
#expandcontractdiv {border:1px dotted #dedede; background-color:#EBE4F2; margin:0 0 .5em 0; padding:0.4em;}
#treeDiv1 { background: #fff; padding:1em; margin-top:1em; }
</style>
<!--end custom header content for this example-->
</head>
<body class=" yui-skin-sam">
<h1>Menu-Style TreeView Design</h1>
<div class="exampleIntro">
<p>As with the Folder Style example, here we"re using CSS to control the styling of our <a href="http://developer.yahoo.ru/yui/treeview/">TreeView Control</a>"s node icons. The CSS and image assets for the Menu Style are available as part of the YUI download package.</p>
<p>This example also implements <code>MenuNode</code> instead of <code>TextNode</code> for node creation. Only one <code>MenuNode</code> can be open at a given depth at the same time. This creates an interaction in which nodes close up behind you as you open new ones, keeping the vertical size of the TreeView more compact during navigation.</p>
</div>
<!--BEGIN SOURCE CODE FOR EXAMPLE -->
<!-- markup for expand/contract links -->
<div id="expandcontractdiv">
<a id="collapse" href="#">Collapse all</a>
</div>
<div id="treeDiv1"></div>
<script type="text/javascript">
//an anonymous function wraps our code to keep our variables
//in function scope rather than in the global namespace:
(function() {
var tree; //will hold our TreeView instance
function treeInit() {
YAHOO.log("Example"s treeInit function firing.", "info", "example");
//Hand off ot a method that randomly generates tree nodes:
buildRandomTextNodeTree();
//handler for collapsing all nodes
YAHOO.util.Event.on("collapse", "click", function(e) {
YAHOO.log("Collapsing all TreeView nodes.", "info", "example");
tree.collapseAll();
YAHOO.util.Event.preventDefault(e);
});
}
//This method will build a TreeView instance and populate it with
//between 3 and 7 top-level nodes
function buildRandomTextNodeTree() {
//instantiate the tree:
tree = new YAHOO.widget.TreeView("treeDiv1");
//create top-level nodes
for (var i = 0; i < Math.floor((Math.random()*4) + 3); i++) {
var tmpNode = new YAHOO.widget.MenuNode("label-" + i, tree.getRoot(), false);
//we"ll delegate to another function to build child nodes:
buildRandomTextBranch(tmpNode);
}
//once it"s all built out, we need to render
//our TreeView instance:
tree.draw();
}
//This function adds a random number <4 of child nodes to a given
//node, stopping at a specific node depth:
function buildRandomTextBranch(node) {
if (node.depth < 6) {
YAHOO.log("buildRandomTextBranch: " + node.index);
for ( var i = 0; i < Math.floor(Math.random() * 4) ; i++ ) {
var tmpNode = new YAHOO.widget.MenuNode(node.label + "-" + i, node, false);
buildRandomTextBranch(tmpNode);
}
}
}
//When the DOM is done loading, we can initialize our TreeView
//instance:
YAHOO.util.Event.onDOMReady(treeInit);
})();//anonymous function wrapper closed; () notation executes function
</script>
<!--END SOURCE CODE FOR EXAMPLE -->
</body>
</html>
<!-- presentbright.corp.yahoo.ru uncompressed/chunked Thu Feb 19 10:53:20 PST 2009 -->
<A href="http://www.wbex.ru/Code/JavaScriptDownload/yui_2.7.0b.zip">yui_2.7.0b.zip( 4,431 k)</a>
Tree built from a static definition
<!--
Software License Agreement (BSD License)
Copyright (c) 2009, Yahoo! Inc.
All rights reserved.
Redistribution and use of this software in source and binary forms, with or without modification, are permitted provided that the following conditions are met:
* Redistributions of source code must retain the above copyright notice, this list of conditions and the
following disclaimer.
* Redistributions in binary form must reproduce the above copyright notice, this list of conditions and the following disclaimer in the documentation and/or other materials provided with the distribution.
* Neither the name of Yahoo! Inc. nor the names of its contributors may be used to endorse or promote products derived from this software without specific prior written permission of Yahoo! Inc.
THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
Sources of Intellectual Property Included in the YUI Library
YUI is issued by Yahoo! under the BSD license above. Below is a list of certain publicly available software that is the source of intellectual property in YUI, along with the licensing terms that pertain to thosesources of IP. This list is for informational purposes only and is not intended to represent an exhaustive list of third party contributions to the YUI.
* Douglas Crockford"s JSON parsing and stringifying methods: In the JSON Utility, Douglas Crockford"s JSON parsing and stringifying methods are adapted from work published at JSON.org. The adapted work is in the public domain.
* Robert Penner"s animation-easing algorithms: In the Animation Utility, YUI makes use of Robert Penner"s algorithms for easing.
* Geoff Stearns"s SWFObject: In the Charts Control and the Uploader versions through 2.7.0, YUI makes use of Geoff Stearns"s SWFObject v1.5 for Flash Player detection and embedding. More information on SWFObject can be found here (http://blog.deconcept.ru/swfobject/). SWFObject is (c) 2007 Geoff Stearns and is released under the MIT License (http://www.opensource.org/licenses/mit-license.php).
* Diego Perini"s IEContentLoaded technique: The Event Utility employs a technique developed by Diego Perini and licensed under GPL. YUI"s use of this technique is included under our BSD license with the author"s permission.
-->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Three Ways to Define a TreeView: Markup (Progressive Enhancement), Existing TreeView Instance, and Object Literal </title>
<style type="text/css">
/*margin and padding on body element
can introduce errors in determining
element position and are not recommended;
we turn them off as a foundation for YUI
CSS treatments. */
body {
margin:0;
padding:0;
}
</style>
<link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/fonts/fonts-min.css" />
<link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/treeview/assets/skins/sam/treeview.css" />
<script type="text/javascript" src="yui_2.7.0b-lib/yahoo-dom-event/yahoo-dom-event.js"></script>
<script type="text/javascript" src="yui_2.7.0b-lib/treeview/treeview-min.js"></script>
<!--begin custom header content for this example-->
<style type="text/css">
.whitebg {
background-color:white;
}
</style>
<!--end custom header content for this example-->
</head>
<body class=" yui-skin-sam">
<h1>Three Ways to Define a TreeView: Markup (Progressive Enhancement), Existing TreeView Instance, and Object Literal </h1>
<div class="exampleIntro">
<p>In this simple example you can see how to build <a href="http://developer.yahoo.ru/yui/treeview/">TreeView Control</a> instance from several different sources of data:</p>
<ol>
<li>an HTML list on the page;</li>
<li>an existing TreeView instance"s definition;</li>
<li>a branch of an existing TreeView instance (e.g., from one of its nodes).</li>
</ol>
</div>
<!--BEGIN SOURCE CODE FOR EXAMPLE -->
<h3>Tree from markup</h3>
<div id="markup" class="whitebg">
<ul>
<li>List 0
<ul>
<li>List 0-0
<ul>
<li>item 0-0-0</li>
<li>item 0-0-1</li>
</ul>
</li>
</ul>
</li>
<li>item 0-1
<ul>
<li><a target="_new" href="HTTP://developer.yahoo.ru/yui" title="go to YUI Home Page">YUI</a>
<ul>
<li>item 0-1-0</li>
<li>item 0-1-1</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
<hr/>
<h3>Copy of the tree above taken from its own definition</h3>
<div id="treeDiv2" class="whitebg"></div>
<hr/>
<h3>Copy of the second branch of the tree at the top</h3>
<div id="treeDiv3" class="whitebg"></div>
<hr/>
<h3>Tree built from a static definition</h3>
<div id="treeDiv4" class="whitebg"></div>
<script type="text/javascript">
//global variable to allow console inspection of tree:
var tree1, tree2, tree3;
//anonymous function wraps the remainder of the logic:
(function() {
var treeInit = function() {
tree1 = new YAHOO.widget.TreeView("markup");
tree1.render();
tree2 = new YAHOO.widget.TreeView("treeDiv2",tree1.getTreeDefinition());
tree2.render();
var branch = tree1.getRoot().children[1];
tree3 = new YAHOO.widget.TreeView("treeDiv3", branch.getNodeDefinition());
tree3.render();
(new YAHOO.widget.TreeView("treeDiv4",[
"Label 0",
{type:"Text", label:"text label 1", title:"this is the tooltip for text label 1"},
{type:"Text", label:"branch 1", title:"there should be children here", expanded:true, children:[
"Label 1-0"
]},
{type:"Text",label:"YAHOO",title:"this should be an href", href:"http://www.yahoo.ru", target:"somewhere new"},
{type:"HTML",html:"<a href="developer.yahoo.ru/yui">YUI</a>"},
{type:"MenuNode",label:"branch 3",title:"this is a menu node", expanded:false, children:[
"Label 3-0",
"Label 3-1"
]}
])).render();
};
//Add an onDOMReady handler to build the tree when the document is ready
YAHOO.util.Event.onDOMReady(treeInit);
})();
</script>
<!--END SOURCE CODE FOR EXAMPLE -->
</body>
</html>
<!-- presentbright.corp.yahoo.ru uncompressed/chunked Thu Feb 19 10:53:20 PST 2009 -->
<A href="http://www.wbex.ru/Code/JavaScriptDownload/yui_2.7.0b.zip">yui_2.7.0b.zip( 4,431 k)</a>
TreeView with Tooltips
<!--
Software License Agreement (BSD License)
Copyright (c) 2009, Yahoo! Inc.
All rights reserved.
Redistribution and use of this software in source and binary forms, with or without modification, are permitted provided that the following conditions are met:
* Redistributions of source code must retain the above copyright notice, this list of conditions and the
following disclaimer.
* Redistributions in binary form must reproduce the above copyright notice, this list of conditions and the following disclaimer in the documentation and/or other materials provided with the distribution.
* Neither the name of Yahoo! Inc. nor the names of its contributors may be used to endorse or promote products derived from this software without specific prior written permission of Yahoo! Inc.
THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
Sources of Intellectual Property Included in the YUI Library
YUI is issued by Yahoo! under the BSD license above. Below is a list of certain publicly available software that is the source of intellectual property in YUI, along with the licensing terms that pertain to thosesources of IP. This list is for informational purposes only and is not intended to represent an exhaustive list of third party contributions to the YUI.
* Douglas Crockford"s JSON parsing and stringifying methods: In the JSON Utility, Douglas Crockford"s JSON parsing and stringifying methods are adapted from work published at JSON.org. The adapted work is in the public domain.
* Robert Penner"s animation-easing algorithms: In the Animation Utility, YUI makes use of Robert Penner"s algorithms for easing.
* Geoff Stearns"s SWFObject: In the Charts Control and the Uploader versions through 2.7.0, YUI makes use of Geoff Stearns"s SWFObject v1.5 for Flash Player detection and embedding. More information on SWFObject can be found here (http://blog.deconcept.ru/swfobject/). SWFObject is (c) 2007 Geoff Stearns and is released under the MIT License (http://www.opensource.org/licenses/mit-license.php).
* Diego Perini"s IEContentLoaded technique: The Event Utility employs a technique developed by Diego Perini and licensed under GPL. YUI"s use of this technique is included under our BSD license with the author"s permission.
-->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>TreeView with Tooltips</title>
<style type="text/css">
/*margin and padding on body element
can introduce errors in determining
element position and are not recommended;
we turn them off as a foundation for YUI
CSS treatments. */
body {
margin:0;
padding:0;
}
</style>
<link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/fonts/fonts-min.css" />
<link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/treeview/assets/skins/sam/treeview.css" />
<link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/container/assets/skins/sam/container.css" />
<script type="text/javascript" src="yui_2.7.0b-lib/yahoo-dom-event/yahoo-dom-event.js"></script>
<script type="text/javascript" src="yui_2.7.0b-lib/treeview/treeview-min.js"></script>
<script type="text/javascript" src="yui_2.7.0b-lib/container/container-min.js"></script>
<!--begin custom header content for this example-->
<style>
#treeDiv1 {background: #fff; padding:1em;}
</style>
<!--end custom header content for this example-->
</head>
<body class=" yui-skin-sam">
<h1>TreeView with Tooltips</h1>
<div class="exampleIntro">
<p>
In this example you see the default presentation for the <a href="http://developer.yahoo.ru/yui/treeview/">TreeView Control</a>.
A single <a href="http://developer.yahoo.ru/yui/container/tooltip/index.html">YAHOO.widget.Tooltip</a> instance is used to provide tooltips for all nodes.
</p>
</div>
<!--BEGIN SOURCE CODE FOR EXAMPLE -->
<div id="treeDiv1"></div>
<script type="text/javascript">
//global variable to allow console inspection of tree:
var tree;
//anonymous function wraps the remainder of the logic:
(function() {
var tt, contextElements = [];
//function to initialize the tree:
function treeInit() {
buildRandomTextNodeTree();
// Instantiate the single tooltip passing in the list of all of
// the node label element ids
tt = new YAHOO.widget.Tooltip("tt", {
context: contextElements
});
}
//Function creates the tree and
//builds between 3 and 7 children of the root node:
function buildRandomTextNodeTree() {
//instantiate the tree:
tree = new YAHOO.widget.TreeView("treeDiv1");
for (var i = 0; i < Math.floor((Math.random()*4) + 3); i++) {
var o = {
label: "label-" + i,
// Tooltip will use the title attribute
title: "This is " + "label-" + i
};
var tmpNode = new YAHOO.widget.TextNode(o, tree.getRoot(), false);
// Generate the markup for this node when the tree is first
// rendered. This is necessary in order to make sure tooltips
// can be attached to hidden nodes.
tmpNode.renderHidden = true;
// save the element id for Tooltip
contextElements.push(tmpNode.labelElId);
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) {
YAHOO.log(node.index + " was expanded", "info", "example");
// return false; // return false to cancel the expand
});
tree.subscribe("collapse", function(node) {
YAHOO.log(node.index + " was collapsed", "info", "example");
});
// Trees with TextNodes will fire an event for when the label is clicked:
tree.subscribe("labelClick", function(node) {
YAHOO.log(node.index + " label was clicked", "info", "example");
});
//The tree is not created in the DOM until this method is called:
tree.draw();
}
//function builds 10 children for the node you pass in:
function buildLargeBranch(node) {
if (node.depth < 10) {
YAHOO.log("buildRandomTextBranch: " + node.index, "info", "example");
for ( var i = 0; i < 10; i++ ) {
var o = {
label: node.label + "-" + i,
// Tooltip will use the title attribute
title: "This is " + node.label + "-" + i
};
var tmpNode = new YAHOO.widget.TextNode(o, node, false);
// save the element id for Tooltip
contextElements.push(tmpNode.labelElId);
}
}
}
//Add an onDOMReady handler to build the tree when the document is ready
YAHOO.util.Event.onDOMReady(treeInit);
})();
</script>
<!--END SOURCE CODE FOR EXAMPLE -->
</body>
</html>
<!-- presentbright.corp.yahoo.ru uncompressed/chunked Thu Feb 19 10:53:20 PST 2009 -->
<A href="http://www.wbex.ru/Code/JavaScriptDownload/yui_2.7.0b.zip">yui_2.7.0b.zip( 4,431 k)</a>
Using TreeView with Custom Icons
<!--
Software License Agreement (BSD License)
Copyright (c) 2009, Yahoo! Inc.
All rights reserved.
Redistribution and use of this software in source and binary forms, with or without modification, are permitted provided that the following conditions are met:
* Redistributions of source code must retain the above copyright notice, this list of conditions and the
following disclaimer.
* Redistributions in binary form must reproduce the above copyright notice, this list of conditions and the following disclaimer in the documentation and/or other materials provided with the distribution.
* Neither the name of Yahoo! Inc. nor the names of its contributors may be used to endorse or promote products derived from this software without specific prior written permission of Yahoo! Inc.
THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
Sources of Intellectual Property Included in the YUI Library
YUI is issued by Yahoo! under the BSD license above. Below is a list of certain publicly available software that is the source of intellectual property in YUI, along with the licensing terms that pertain to thosesources of IP. This list is for informational purposes only and is not intended to represent an exhaustive list of third party contributions to the YUI.
* Douglas Crockford"s JSON parsing and stringifying methods: In the JSON Utility, Douglas Crockford"s JSON parsing and stringifying methods are adapted from work published at JSON.org. The adapted work is in the public domain.
* Robert Penner"s animation-easing algorithms: In the Animation Utility, YUI makes use of Robert Penner"s algorithms for easing.
* Geoff Stearns"s SWFObject: In the Charts Control and the Uploader versions through 2.7.0, YUI makes use of Geoff Stearns"s SWFObject v1.5 for Flash Player detection and embedding. More information on SWFObject can be found here (http://blog.deconcept.ru/swfobject/). SWFObject is (c) 2007 Geoff Stearns and is released under the MIT License (http://www.opensource.org/licenses/mit-license.php).
* Diego Perini"s IEContentLoaded technique: The Event Utility employs a technique developed by Diego Perini and licensed under GPL. YUI"s use of this technique is included under our BSD license with the author"s permission.
-->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Using TreeView with Custom Icons</title>
<style type="text/css">
/*margin and padding on body element
can introduce errors in determining
element position and are not recommended;
we turn them off as a foundation for YUI
CSS treatments. */
body {
margin:0;
padding:0;
}
</style>
<link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/fonts/fonts-min.css" />
<link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/treeview/assets/skins/sam/treeview.css" />
<script type="text/javascript" src="yui_2.7.0b-lib/yahoo-dom-event/yahoo-dom-event.js"></script>
<script type="text/javascript" src="yui_2.7.0b-lib/treeview/treeview-min.js"></script>
<!--begin custom header content for this example-->
<!--Bring in the folder-style TreeView CSS:-->
<link rel="stylesheet" type="text/css" href="yui_2.7.0b-assets/treeview-assets/css/folders/tree.css"></link>
<!--Additional custom style rules for this example:-->
<style type="text/css">
#treewrapper {background: #fff; position:relative;}
#treediv {position:relative; width:250px; background: #fff; padding:1em;}
.icon-ppt { display:block; height: 22px; padding-left: 20px; background: transparent url(yui_2.7.0b-assets/treeview-assets/img/icons.png) 0 0px no-repeat; }
.icon-dmg { display:block; height: 22px; padding-left: 20px; background: transparent url(yui_2.7.0b-assets/treeview-assets/img/icons.png) 0 -36px no-repeat; }
.icon-prv { display:block; height: 22px; padding-left: 20px; background: transparent url(yui_2.7.0b-assets/treeview-assets/img/icons.png) 0 -72px no-repeat; }
.icon-gen { display:block; height: 22px; padding-left: 20px; background: transparent url(yui_2.7.0b-assets/treeview-assets/img/icons.png) 0 -108px no-repeat; }
.icon-doc { display:block; height: 22px; padding-left: 20px; background: transparent url(yui_2.7.0b-assets/treeview-assets/img/icons.png) 0 -144px no-repeat; }
.icon-jar { display:block; height: 22px; padding-left: 20px; background: transparent url(yui_2.7.0b-assets/treeview-assets/img/icons.png) 0 -180px no-repeat; }
.icon-zip { display:block; height: 22px; padding-left: 20px; background: transparent url(yui_2.7.0b-assets/treeview-assets/img/icons.png) 0 -216px no-repeat; }
.htmlnodelabel { margin-left: 20px; }
</style>
<!--end custom header content for this example-->
</head>
<body class=" yui-skin-sam">
<h1>Using TreeView with Custom Icons</h1>
<div class="exampleIntro">
<p>This example demonstrates the use of custom icon styles on <a href="http://developer.yahoo.ru/yui/treeview/">TreeView Control</a> nodes through the use of a image sprite. Read the tutorial below the example for full details on how to achieve this effect.</p>
</div>
<!--BEGIN SOURCE CODE FOR EXAMPLE -->
<div id="treewrapper">
<div id="treediv"> </div>
</div>
<script>
//Wrap our initialization code in an anonymous function
//to keep out of the global namespace:
(function(){
var init = function() {
//create the TreeView instance:
var tree = new YAHOO.widget.TreeView("treediv");
//get a reusable reference to the root node:
var root = tree.getRoot();
//for Ahmed"s documents, we"ll use TextNodes.
//First, create a parent node for his documents:
var ahmedDocs = new YAHOO.widget.TextNode("Ahmed"s Documents", root, true);
//Create a child node for his Word document:
var ahmedMsWord = new YAHOO.widget.TextNode("Prospectus", ahmedDocs, false);
//Now, apply the "icon-doc" style to this node"s
//label:
ahmedMsWord.labelStyle = "icon-doc";
var ahmedPpt = new YAHOO.widget.TextNode("Presentation", ahmedDocs, false);
ahmedPpt.labelStyle = "icon-ppt";
var ahmedPdf = new YAHOO.widget.TextNode("Prospectus-PDF version", ahmedDocs, false);
ahmedPdf.labelStyle = "icon-prv";
//for Susheela"s documents, we"ll use HTMLNodes.
//First, create a parent node for her documents:
var sushDocs = new YAHOO.widget.TextNode("Susheela"s Documents", root, true);
//Create a child node for her zipped files:
var sushZip = new YAHOO.widget.HTMLNode("<span class=\"htmlnodelabel\">Zipped Files</span>", sushDocs, false, true);
//Now, apply the "icon-zip" style to this HTML node"s
//content:
sushZip.contentStyle = "icon-zip";
var sushDmg = new YAHOO.widget.HTMLNode("<span class=\"htmlnodelabel\">Files -- .dmg version</span>", sushDocs, false, true);
sushDmg.contentStyle = "icon-dmg";
var sushGen = new YAHOO.widget.HTMLNode("<span class=\"htmlnodelabel\">Script -- text version</span>", sushDocs, false, true);
sushGen.contentStyle = "icon-gen";
var sushJar = new YAHOO.widget.HTMLNode("<span class=\"htmlnodelabel\">JAR file</span>", sushDocs, false, true);
sushJar.contentStyle = "icon-jar";
tree.draw();
}
//Add an onDOMReady handler to build the tree when the document is ready
YAHOO.util.Event.onDOMReady(init);
})();
</script>
<!--END SOURCE CODE FOR EXAMPLE -->
</body>
</html>
<!-- presentbright.corp.yahoo.ru uncompressed/chunked Thu Feb 19 10:53:20 PST 2009 -->
<A href="http://www.wbex.ru/Code/JavaScriptDownload/yui_2.7.0b.zip">yui_2.7.0b.zip( 4,431 k)</a>
