update YUI to 2.8.0r4

This commit is contained in:
Graham Knop 2009-09-21 12:54:44 -05:00
parent 27f474ec64
commit 2d28e0c0ba
2007 changed files with 344487 additions and 210070 deletions

View file

@ -14,8 +14,18 @@
* @param checked {boolean} The initial checked/unchecked state
*/
YAHOO.widget.TaskNode = function(oData, oParent, expanded, checked) {
YAHOO.widget.TaskNode.superclass.constructor.call(this,oData,oParent,expanded);
this.setUpCheck(checked || oData.checked);
if (YAHOO.widget.LogWriter) {
this.logger = new YAHOO.widget.LogWriter(this.toString());
} else {
this.logger = YAHOO;
}
if (oData) {
this.init(oData, oParent, expanded);
this.setUpLabel(oData);
this.setUpCheck(checked);
}
};
@ -35,19 +45,10 @@ YAHOO.extend(YAHOO.widget.TaskNode, YAHOO.widget.TextNode, {
*/
checkState: 0,
/**
* The node type
* @property _type
* @private
* @type string
* @default "TextNode"
*/
_type: "TaskNode",
taskNodeParentChange: function() {
taskNodeParentChange: function() {
//this.updateParent();
},
setUpCheck: function(checked) {
// if this node is checked by default, run the check code to update
// the parent's display state
@ -75,10 +76,8 @@ YAHOO.extend(YAHOO.widget.TaskNode, YAHOO.widget.TextNode, {
this.tree.createEvent("checkClick", this.tree);
}
this.tree.subscribe('clickEvent',this.checkClick);
this.subscribe("parentChange", this.taskNodeParentChange);
},
/**
@ -106,25 +105,28 @@ YAHOO.extend(YAHOO.widget.TaskNode, YAHOO.widget.TextNode, {
return "ygtvcheck" + this.checkState;
},
/**
* Returns the link that will invoke this node's check toggle
* @return {string} returns the link required to adjust the checkbox state
*/
getCheckLink: function() {
return "YAHOO.widget.TreeView.getNode(\'" + this.tree.id + "\'," +
this.index + ").checkClick()";
},
/**
/**
* Invoked when the user clicks the check box
*/
checkClick: function(oArgs) {
var node = oArgs.node;
var target = YAHOO.util.Event.getTarget(oArgs.event);
if (YAHOO.util.Dom.hasClass(target,'ygtvspacer')) {
node.logger.log("previous checkstate: " + node.checkState);
if (node.checkState === 0) {
node.check();
} else {
node.uncheck();
}
checkClick: function() {
this.logger.log("previous checkstate: " + this.checkState);
if (this.checkState === 0) {
this.check();
} else {
this.uncheck();
}
node.onCheckClick(node);
this.fireEvent("checkClick", node);
return false;
}
this.onCheckClick(this);
this.tree.fireEvent("checkClick", this);
},
/**
@ -225,46 +227,83 @@ YAHOO.extend(YAHOO.widget.TaskNode, YAHOO.widget.TextNode, {
this.updateCheckHtml();
this.updateParent();
},
// Overrides YAHOO.widget.TextNode
/*
getContentHtml: function() {
// Overrides YAHOO.widget.TextNode
getNodeHtml: function() {
this.logger.log("Generating html");
var sb = [];
var getNode = 'YAHOO.widget.TreeView.getNode(\'' +
this.tree.id + '\',' + this.index + ')';
sb[sb.length] = '<table border="0" cellpadding="0" cellspacing="0">';
sb[sb.length] = '<tr>';
for (var i=0;i<this.depth;++i) {
//sb[sb.length] = '<td class="' + this.getDepthStyle(i) + '">&#160;</td>';
sb[sb.length] = '<td class="' + this.getDepthStyle(i) + '"><div class="ygtvspacer"></div></td>';
}
sb[sb.length] = '<td';
sb[sb.length] = ' id="' + this.getToggleElId() + '"';
sb[sb.length] = ' class="' + this.getStyle() + '"';
if (this.hasChildren(true)) {
sb[sb.length] = ' onmouseover="this.className=';
sb[sb.length] = 'YAHOO.widget.TreeView.getNode(\'';
sb[sb.length] = this.tree.id + '\',' + this.index + ').getHoverStyle()"';
sb[sb.length] = ' onmouseout="this.className=';
sb[sb.length] = 'YAHOO.widget.TreeView.getNode(\'';
sb[sb.length] = this.tree.id + '\',' + this.index + ').getStyle()"';
}
//sb[sb.length] = ' onclick="javascript:' + this.getToggleLink() + '">&#160;';
sb[sb.length] = ' onclick="javascript:' + this.getToggleLink() + '">';
//sb[sb.length] = '</td>';
sb[sb.length] = '<div class="ygtvspacer"></div></td>';
// check box
sb[sb.length] = '<td';
sb[sb.length] = ' id="' + this.getCheckElId() + '"';
sb[sb.length] = ' class="' + this.getCheckStyle() + '"';
sb[sb.length] = '>';
sb[sb.length] = ' onclick="javascript:' + this.getCheckLink() + '">';
//sb[sb.length] = '&#160;</td>';
sb[sb.length] = '<div class="ygtvspacer"></div></td>';
sb[sb.length] = '<span';
sb[sb.length] = '<td>';
sb[sb.length] = '<a';
sb[sb.length] = ' id="' + this.labelElId + '"';
if (this.title) {
sb[sb.length] = ' title="' + this.title + '"';
}
sb[sb.length] = ' class="' + this.labelStyle + '"';
sb[sb.length] = ' class="' + this.labelStyle + '"';
sb[sb.length] = ' href="' + this.href + '"';
sb[sb.length] = ' target="' + this.target + '"';
sb[sb.length] = ' onclick="return ' + getNode + '.onLabelClick(' + getNode +')"';
if (this.hasChildren(true)) {
sb[sb.length] = ' onmouseover="document.getElementById(\'';
sb[sb.length] = this.getToggleElId() + '\').className=';
sb[sb.length] = 'YAHOO.widget.TreeView.getNode(\'';
sb[sb.length] = this.tree.id + '\',' + this.index + ').getHoverStyle()"';
sb[sb.length] = ' onmouseout="document.getElementById(\'';
sb[sb.length] = this.getToggleElId() + '\').className=';
sb[sb.length] = 'YAHOO.widget.TreeView.getNode(\'';
sb[sb.length] = this.tree.id + '\',' + this.index + ').getStyle()"';
}
sb[sb.length] = (this.nowrap) ? ' nowrap="nowrap" ' : '';
sb[sb.length] = ' >';
sb[sb.length] = this.label;
sb[sb.length] = '</span>';
sb[sb.length] = '</a>';
sb[sb.length] = '</td>';
sb[sb.length] = '</tr>';
sb[sb.length] = '</table>';
return sb.join("");
},
toString: function() {
return "TaskNode (" + this.index + ") " + this.label;
}
*/
getContentHtml: function() {
var sb = [];
sb[sb.length] = '<td';
sb[sb.length] = ' id="' + this.getCheckElId() + '"';
sb[sb.length] = ' class="' + this.getCheckStyle() + '"';
sb[sb.length] = '>';
sb[sb.length] = '<div class="ygtvspacer"></div></td>';
sb[sb.length] = '<td><span';
sb[sb.length] = ' id="' + this.labelElId + '"';
if (this.title) {
sb[sb.length] = ' title="' + this.title + '"';
}
sb[sb.length] = ' class="' + this.labelStyle + '"';
sb[sb.length] = ' >';
sb[sb.length] = this.label;
sb[sb.length] = '</span></td>';
return sb.join("");
}
});

View file

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

File diff suppressed because one or more lines are too long

View file

@ -1,6 +1,8 @@
<!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>
@ -45,7 +47,7 @@ body {
</head>
<body class=" yui-skin-sam">
<body class="yui-skin-sam">
<h1>Using TreeView with Custom Icons</h1>

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View file

@ -1,6 +1,8 @@
<!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>
@ -30,7 +32,7 @@ body {
</head>
<body class=" yui-skin-sam">
<body class="yui-skin-sam">
<h1>Default TreeView</h1>

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View file

@ -1,6 +1,8 @@
<!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>
@ -31,7 +33,7 @@ body {
</head>
<body class=" yui-skin-sam">
<body class="yui-skin-sam">
<h1>Dynamically Loading Node Data</h1>

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View file

@ -1,6 +1,8 @@
<!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>
@ -37,7 +39,7 @@ body {
</head>
<body class=" yui-skin-sam">
<body class="yui-skin-sam">
<h1>Folder-Style TreeView Design</h1>

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View file

@ -1,6 +1,8 @@
<!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>
@ -36,7 +38,7 @@ body {
</head>
<body class=" yui-skin-sam">
<body class="yui-skin-sam">
<h1>Menu-Style TreeView Design</h1>

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View file

@ -1,6 +1,8 @@
<!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>
@ -30,78 +32,82 @@ body {
</head>
<body class=" yui-skin-sam">
<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.com/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 &mdash; 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>
<p>This example demonstrates label editing and keyboard navigation in the YUI TreeView Control.
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">&nbsp;</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.com', 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);
})();
<div id="treeView" style="background-color:white"></div>
<div id="msg">&nbsp;</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.com', 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 =============================== -->

File diff suppressed because one or more lines are too long

View file

@ -0,0 +1,131 @@
<!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 Node Selection and Checkbox Example</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="../../build/fonts/fonts-min.css" />
<link rel="stylesheet" type="text/css" href="../../build/treeview/assets/skins/sam/treeview.css" />
<script type="text/javascript" src="../../build/yahoo-dom-event/yahoo-dom-event.js"></script>
<script type="text/javascript" src="../../build/treeview/treeview-min.js"></script>
<!--begin custom header content for this example-->
<!--Additional custom style rules for this example:-->
<style type="text/css">
.ygtvcheck0 { background: url(../treeview/assets/img/check/check0.gif) 0 0 no-repeat; width:16px; height:20px; float:left; cursor:pointer; }
.ygtvcheck1 { background: url(../treeview/assets/img/check/check1.gif) 0 0 no-repeat; width:16px; height:20px; float:left; cursor:pointer; }
.ygtvcheck2 { background: url(../treeview/assets/img/check/check2.gif) 0 0 no-repeat; width:16px; height:20px; float:left; cursor:pointer; }
.ygtv-edit-TaskNode { width: 190px;}
.ygtv-edit-TaskNode .ygtvcancel, .ygtv-edit-TextNode .ygtvok { border:none;}
.ygtv-edit-TaskNode .ygtv-button-container { float: right;}
.ygtv-edit-TaskNode .ygtv-input input{ width: 140px;}
.whitebg {
background-color:white;
}
</style>
<!--end custom header content for this example-->
</head>
<body class="yui-skin-sam">
<h1>Treeview Node Selection and Checkbox Example</h1>
<div class="exampleIntro">
<p>In this simple example you can see how to do node selection in the
<a href="http://developer.yahoo.com/yui/treeview/">TreeView Control</a>.</p>
</div>
<!--BEGIN SOURCE CODE FOR EXAMPLE =============================== -->
<h3>Tree with highlight propagation and 'checkbox' skin</h3>
<div id="treeDiv1" class="whitebg ygtv-checkbox"></div>
<button id="logHilit">Log selected</button>
<hr/>
<h3>Tree with single node highlighting and simple skin</h3>
<div id="treeDiv2" class="whitebg ygtv-highlight"></div>
<script type="text/javascript">
//global variable to allow console inspection of tree:
var tree1, tree2;
//anonymous function wraps the remainder of the logic:
(function() {
var makeBranch = function (parent,label) {
label = label || '';
var n = Math.random() * (6 - (label.length || 0));
for (var i = 0;i < n;i++) {
var tmpNode = new YAHOO.widget.TextNode('label' + label + '-' + i, parent, Math.random() > .5);
makeBranch(tmpNode,label + '-' + i);
}
}
var treeInit = function() {
tree1 = new YAHOO.widget.TreeView("treeDiv1");
makeBranch(tree1.getRoot());
tree1.setNodesProperty('propagateHighlightUp',true);
tree1.setNodesProperty('propagateHighlightDown',true);
tree1.subscribe('clickEvent',tree1.onEventToggleHighlight);
tree1.render();
YAHOO.util.Event.on('logHilit','click',function() {
var hiLit = tree1.getNodesByProperty('highlightState',1);
if (YAHOO.lang.isNull(hiLit)) {
YAHOO.log("None selected");
} else {
var labels = [];
for (var i = 0; i < hiLit.length; i++) {
labels.push(hiLit[i].label);
}
YAHOO.log("Highlighted nodes:\n" + labels.join("\n"), "info", "example");
}
});
tree2 = new YAHOO.widget.TreeView("treeDiv2");
makeBranch(tree2.getRoot());
tree2.singleNodeHighlight = true;
tree2.subscribe('clickEvent',tree2.onEventToggleHighlight);
tree2.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>

File diff suppressed because one or more lines are too long

View file

@ -1,6 +1,8 @@
<!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>
@ -23,105 +25,113 @@ body {
<!--begin custom header content for this example-->
<style type="text/css">
.whitebg {
background-color:white;
}
<style type="text/css">
.whitebg {
background-color:white;
}
</style>
<!--end custom header content for this example-->
</head>
<body class=" yui-skin-sam">
<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.com/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>
<p>In this simple example you can see how to build
<a href="http://developer.yahoo.com/yui/treeview/">TreeView Control</a> from existing HTML markup
and from a previous tree definition or from a branch of it.</p>
</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.com/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.com', target:'somewhere new'},
{type:'HTML',html:'<a href="developer.yahoo.com/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);
})();
<link rel="stylesheet" type="text/css" href="../../build/assets/skins/sam/calendar.css" />
<h3>Tree from markup</h3>
<div id="markup" class="whitebg">
<ul>
<li class="expanded">List 0
<ul>
<li class="expanded">List 0-0
<ul>
<li>item 0-0-0</li>
<li><a target="_new" href="www.elsewhere.com" title="go elsewhere">elsewhere</a></li>
</ul>
</li>
</ul>
</li>
<li>List 1
<ul>
<li>List 1-0
<ul>
<li yuiConfig='{"type":"DateNode","editable":true}'>02/01/2009</li>
<li><span>item <strong>1-1-0</strong></span></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" src="../../build/json/json-min.js"></script>
<script type="text/javascript" src="../../build/calendar/calendar-min.js"></script>
<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();
tree1.subscribe('dblClickEvent',tree1.onEventEditNode);
tree2 = new YAHOO.widget.TreeView("treeDiv2",tree1.getTreeDefinition());
tree2.render();
tree2.subscribe('dblClickEvent',tree2.onEventEditNode);
var branch = tree1.getRoot().children[1];
tree3 = new YAHOO.widget.TreeView("treeDiv3", branch.getNodeDefinition());
tree3.render();
tree3.subscribe('dblClickEvent',tree3.onEventEditNode);
(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.com', target:'somewhere new'},
{type:'HTML',html:'<a href="developer.yahoo.com/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 =============================== -->

File diff suppressed because one or more lines are too long

View file

@ -1,6 +1,8 @@
<!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>
@ -32,13 +34,16 @@ body {
</head>
<body class=" yui-skin-sam">
<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.com/yui/treeview/">TreeView Control</a>. A single <a href="http://developer.yahoo.com/yui/container/tooltip/index.html">YAHOO.widget.Tooltip</a> instance is used to provide tooltips for all nodes.
<p>
In this example you see the default presentation for the <a href="http://developer.yahoo.com/yui/treeview/">TreeView Control</a>.
A single <a href="http://developer.yahoo.com/yui/container/tooltip/index.html">YAHOO.widget.Tooltip</a> instance is used to provide tooltips for all nodes.
</p>
</div>
@ -76,10 +81,17 @@ var tree;
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);

File diff suppressed because one or more lines are too long