removing old version of yui
This commit is contained in:
JT Smith
parent
d1d368dcd1
commit
4fd23d094f
766 changed files with 0 additions and 262230 deletions
|
|
@ -1,180 +0,0 @@
|
|||
<!doctype html public "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<title>Yahoo! UI Library - Tree Control</title>
|
||||
<link rel="stylesheet" type="text/css" href="css/screen.css">
|
||||
</head>
|
||||
<body onload="treeInit()">
|
||||
|
||||
<link rel="stylesheet" type="text/css" href="css/local/tree.css">
|
||||
|
||||
<div id="pageTitle">
|
||||
<h3>Tree Control</h3>
|
||||
</div>
|
||||
|
||||
<script type="text/javascript" src="../../build/yahoo/yahoo.js" ></script>
|
||||
|
||||
<!-- The following are required for the logger -->
|
||||
<script type="text/javascript" src="../../build/event/event.js"></script>
|
||||
<script type="text/javascript" src="../../build/dom/dom.js"></script>
|
||||
<script type="text/javascript" src="../../build/logger/logger.js"></script>
|
||||
<!-- End logger reqs -->
|
||||
|
||||
<script type="text/javascript" src="../../build/treeview/treeview-debug.js" ></script>
|
||||
|
||||
<style type="text/css">
|
||||
|
||||
/* logger default styles */
|
||||
/* font size is controlled here: default 77% */
|
||||
#yui-log {position:absolute;top:1em;right:1em;font-size:77%;text-align:left;}
|
||||
/* width is controlled here: default 31em */
|
||||
.yui-log {background-color:#AAA;border:1px solid black;font-family:monospace;z-index:9000;}
|
||||
.yui-log p {margin:1px;padding:.1em;}
|
||||
.yui-log button {font-family:monospace;}
|
||||
.yui-log .yui-log-hd {padding:.5em;background-color:#575757;color:#FFF;}
|
||||
/* height is controlled here: default 20em*/
|
||||
.yui-log .yui-log-bd {width:100%;height:20em;background-color:#FFF;border:1px solid gray;overflow:auto;}
|
||||
.yui-log .yui-log-ft {margin-top:.5em;margin-bottom:1em;}
|
||||
.yui-log .yui-log-ft .yui-log-categoryfilters {}
|
||||
.yui-log .yui-log-ft .yui-log-sourcefilters {width:100%;border-top:1px solid #575757;margin-top:.75em;padding-top:.75em;}
|
||||
.yui-log .yui-log-btns {position:relative;float:right;bottom:.25em;}
|
||||
.yui-log .yui-log-filtergrp {margin-right:.5em;}
|
||||
.yui-log .info {background-color:#A7CC25;} /* A7CC25 green */
|
||||
.yui-log .warn {background-color:#F58516;} /* F58516 orange */
|
||||
.yui-log .error {background-color:#E32F0B;} /* E32F0B red */
|
||||
.yui-log .time {background-color:#A6C9D7;} /* A6C9D7 blue */
|
||||
.yui-log .window {background-color:#F2E886;} /* F2E886 tan */
|
||||
|
||||
</style>
|
||||
|
||||
|
||||
<div id="container">
|
||||
<img class="ylogo" src="img/logo.gif" alt="" />
|
||||
<div id="containerTop">
|
||||
<div id="header">
|
||||
<h1>
|
||||
|
||||
</h1>
|
||||
<h4> </h4>
|
||||
</div>
|
||||
<div id="main">
|
||||
|
||||
<div id="rightbar">
|
||||
|
||||
<div id="rightBarPad">
|
||||
<h3>Examples</h3>
|
||||
|
||||
<div id="linkage">
|
||||
<ul>
|
||||
<li><a href="default.html?mode=dist">Default tree widget</a></li>
|
||||
<li><a href="dynamic.html?mode=dist">Dynamic load</a></li>
|
||||
|
||||
|
||||
<li><a href="folders.html?mode=dist">Folder view</a></li>
|
||||
<li><a href="menu.html?mode=dist">Menu</a></li>
|
||||
<li><a href="html.html?mode=dist">HTML node</a></li>
|
||||
<li><a href="multi.html?mode=dist">Multiple trees, different styles</a></li>
|
||||
<li><a href="check.html?mode=dist">Task list</a></li>
|
||||
<li><a href="anim.html?mode=dist">Fade animation</a></li>
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<script type="text/javascript">
|
||||
//<![CDATA[
|
||||
YAHOO.example.logApp = function() {
|
||||
var divId;
|
||||
return {
|
||||
init: function(p_divId, p_toggleElId, p_clearElId) {
|
||||
divId = p_divId
|
||||
},
|
||||
|
||||
onload: function() {
|
||||
if (YAHOO.widget.Logger) {
|
||||
new YAHOO.widget.LogReader( "logDiv", { height: "400px" } );
|
||||
}
|
||||
}
|
||||
};
|
||||
} ();
|
||||
|
||||
YAHOO.util.Event.on(window, "load", YAHOO.example.logApp.onload);
|
||||
|
||||
//]]>
|
||||
</script>
|
||||
|
||||
<div id="logDiv"></div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<script type="text/javascript" src="../../build/animation/animation.js"></script>
|
||||
|
||||
<div id="content">
|
||||
<form name="mainForm" action="javscript:;">
|
||||
<div class="newsItem">
|
||||
<h3>Animated TreeView Widget</h3>
|
||||
<p> </p>
|
||||
|
||||
<div id="expandcontractdiv">
|
||||
<a href="javascript:tree.expandAll()">Expand all</a>
|
||||
<a href="javascript:tree.collapseAll()">Collapse all</a>
|
||||
</div>
|
||||
<div id="treeDiv1"></div>
|
||||
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div id="footerContainer">
|
||||
<div id="footer">
|
||||
<p> </p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script type="text/javascript">
|
||||
|
||||
var tree;
|
||||
var nodes = new Array();
|
||||
var nodeIndex;
|
||||
|
||||
function treeInit() {
|
||||
buildRandomTextNodeTree();
|
||||
}
|
||||
|
||||
function buildRandomTextNodeTree() {
|
||||
tree = new YAHOO.widget.TreeView("treeDiv1");
|
||||
tree.setExpandAnim(YAHOO.widget.TVAnim.FADE_IN);
|
||||
tree.setCollapseAnim(YAHOO.widget.TVAnim.FADE_OUT);
|
||||
|
||||
for (var i = 0; i < Math.floor((Math.random()*4) + 3); i++) {
|
||||
var tmpNode = new YAHOO.widget.TextNode("label-" + i, tree.getRoot(), false);
|
||||
buildRandomTextBranch(tmpNode);
|
||||
}
|
||||
|
||||
tree.draw();
|
||||
}
|
||||
|
||||
var callback = null;
|
||||
|
||||
function buildRandomTextBranch(node) {
|
||||
if (node.depth < 6) {
|
||||
YAHOO.log("buildRandomTextBranch: " + node.index);
|
||||
for ( var i = 0; i < Math.floor(Math.random() * 6) ; i++ ) {
|
||||
var tmpNode = new YAHOO.widget.TextNode(node.label + "-" + i, node, false);
|
||||
buildRandomTextBranch(tmpNode);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
|
|
@ -1,236 +0,0 @@
|
|||
<!doctype html public "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<title>Yahoo! UI Library - Tree Control</title>
|
||||
<link rel="stylesheet" type="text/css" href="css/screen.css">
|
||||
</head>
|
||||
|
||||
<body onload="treeInit()">
|
||||
|
||||
<link rel="stylesheet" type="text/css" href="css/check/tree.css">
|
||||
|
||||
<div id="pageTitle">
|
||||
<h3>Tree Control</h3>
|
||||
</div>
|
||||
|
||||
<script type="text/javascript" src="../../build/yahoo/yahoo.js" ></script>
|
||||
|
||||
<!-- The following are required for the logger -->
|
||||
<script type="text/javascript" src="../../build/event/event.js"></script>
|
||||
<script type="text/javascript" src="../../build/dom/dom.js"></script>
|
||||
<script type="text/javascript" src="../../build/logger/logger.js"></script>
|
||||
<!-- End logger reqs -->
|
||||
|
||||
<script type="text/javascript" src="../../build/treeview/treeview-debug.js" ></script>
|
||||
|
||||
<style type="text/css">
|
||||
|
||||
/* logger default styles */
|
||||
/* font size is controlled here: default 77% */
|
||||
#yui-log {position:absolute;top:1em;right:1em;font-size:77%;text-align:left;}
|
||||
/* width is controlled here: default 31em */
|
||||
.yui-log {background-color:#AAA;border:1px solid black;font-family:monospace;z-index:9000;}
|
||||
.yui-log p {margin:1px;padding:.1em;}
|
||||
.yui-log button {font-family:monospace;}
|
||||
.yui-log .yui-log-hd {padding:.5em;background-color:#575757;color:#FFF;}
|
||||
/* height is controlled here: default 20em*/
|
||||
.yui-log .yui-log-bd {width:100%;height:20em;background-color:#FFF;border:1px solid gray;overflow:auto;}
|
||||
.yui-log .yui-log-ft {margin-top:.5em;margin-bottom:1em;}
|
||||
.yui-log .yui-log-ft .yui-log-categoryfilters {}
|
||||
.yui-log .yui-log-ft .yui-log-sourcefilters {width:100%;border-top:1px solid #575757;margin-top:.75em;padding-top:.75em;}
|
||||
.yui-log .yui-log-btns {position:relative;float:right;bottom:.25em;}
|
||||
.yui-log .yui-log-filtergrp {margin-right:.5em;}
|
||||
.yui-log .info {background-color:#A7CC25;} /* A7CC25 green */
|
||||
.yui-log .warn {background-color:#F58516;} /* F58516 orange */
|
||||
.yui-log .error {background-color:#E32F0B;} /* E32F0B red */
|
||||
.yui-log .time {background-color:#A6C9D7;} /* A6C9D7 blue */
|
||||
.yui-log .window {background-color:#F2E886;} /* F2E886 tan */
|
||||
|
||||
</style>
|
||||
|
||||
|
||||
<div id="container">
|
||||
<img class="ylogo" src="img/logo.gif" alt="" />
|
||||
<div id="containerTop">
|
||||
<div id="header">
|
||||
<h1>
|
||||
|
||||
</h1>
|
||||
<h4> </h4>
|
||||
</div>
|
||||
<div id="main">
|
||||
|
||||
<div id="rightbar">
|
||||
|
||||
<div id="rightBarPad">
|
||||
<h3>Examples</h3>
|
||||
|
||||
<div id="linkage">
|
||||
<ul>
|
||||
<li><a href="default.html?mode=dist">Default tree widget</a></li>
|
||||
<li><a href="dynamic.html?mode=dist">Dynamic load</a></li>
|
||||
|
||||
|
||||
<li><a href="folders.html?mode=dist">Folder view</a></li>
|
||||
<li><a href="menu.html?mode=dist">Menu</a></li>
|
||||
<li><a href="html.html?mode=dist">HTML node</a></li>
|
||||
<li><a href="multi.html?mode=dist">Multiple trees, different styles</a></li>
|
||||
<li><a href="check.html?mode=dist">Task list</a></li>
|
||||
<li><a href="anim.html?mode=dist">Fade animation</a></li>
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<script type="text/javascript">
|
||||
//<![CDATA[
|
||||
YAHOO.example.logApp = function() {
|
||||
var divId;
|
||||
return {
|
||||
init: function(p_divId, p_toggleElId, p_clearElId) {
|
||||
divId = p_divId
|
||||
},
|
||||
|
||||
onload: function() {
|
||||
if (YAHOO.widget.Logger) {
|
||||
new YAHOO.widget.LogReader( "logDiv", { height: "400px" } );
|
||||
}
|
||||
}
|
||||
};
|
||||
} ();
|
||||
|
||||
YAHOO.util.Event.on(window, "load", YAHOO.example.logApp.onload);
|
||||
|
||||
//]]>
|
||||
</script>
|
||||
|
||||
<div id="logDiv"></div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<script type="text/javascript" src="js/TaskNode.js"></script>
|
||||
|
||||
<div id="content">
|
||||
<form name="mainForm" action="javscript:;">
|
||||
<div class="newsItem">
|
||||
<h3>Task List</h3>
|
||||
<p>
|
||||
The check boxes have three states:
|
||||
unchecked, partially checked (some sub-tasks are finished), checked (all sub-tasks complete)
|
||||
</p>
|
||||
|
||||
<div id="expandcontractdiv">
|
||||
<a href="javascript:tree.expandAll()">Expand all</a>
|
||||
<a href="javascript:tree.collapseAll()">Collapse all</a>
|
||||
<a href="javascript:checkAll()">Check all</a>
|
||||
<a href="javascript:uncheckAll()">Uncheck all</a>
|
||||
</div>
|
||||
<div id="treeDiv1"></div>
|
||||
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<div id="footerContainer">
|
||||
<div id="footer">
|
||||
<p> </p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!--
|
||||
<input type="button" id="showButton" />
|
||||
-->
|
||||
|
||||
<script type="text/javascript">
|
||||
|
||||
var tree;
|
||||
var nodes = new Array();
|
||||
var nodeIndex;
|
||||
|
||||
function treeInit() {
|
||||
buildRandomTextNodeTree();
|
||||
}
|
||||
|
||||
function buildRandomTextNodeTree() {
|
||||
tree = new YAHOO.widget.TreeView("treeDiv1");
|
||||
|
||||
for (var i = 0; i < Math.floor((Math.random()*4) + 3); i++) {
|
||||
var tmpNode = new YAHOO.widget.TaskNode("task-" + i, tree.getRoot(), false);
|
||||
tmpNode.onCheckClick = onCheckClick;
|
||||
buildRandomTextBranch(tmpNode);
|
||||
}
|
||||
|
||||
tree.draw();
|
||||
// tree.checkClickEvent.subscribe(onCheckClick);
|
||||
}
|
||||
|
||||
var callback = null;
|
||||
|
||||
function buildRandomTextBranch(node) {
|
||||
if (node.depth < 5) {
|
||||
YAHOO.log("buildRandomTextBranch: " + node.index);
|
||||
for ( var i = 0; i < Math.floor(Math.random() * 4) ; i++ ) {
|
||||
var tmpNode = new YAHOO.widget.TaskNode(node.label + "-" + i, node, false);
|
||||
tmpNode.onCheckClick = onCheckClick;
|
||||
buildRandomTextBranch(tmpNode);
|
||||
}
|
||||
} else {
|
||||
// tmpNode = new YAHOO.widget.TaskNode(node.label + "-" + i, node, false, true);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// function onCheckClick(eventType, args, tree) {
|
||||
//var node = args[0];
|
||||
function onCheckClick(eventType, args, tree) {
|
||||
var node = this;
|
||||
YAHOO.log(node.label + " check was clicked, new state: " +
|
||||
node.checkState);
|
||||
}
|
||||
|
||||
function showTreeState() {
|
||||
var out = [];
|
||||
for (var i in tree._nodes) {
|
||||
var n = tree._nodes[i];
|
||||
if (n && "undefined" != typeof n.checkState) {
|
||||
out.push(n.data + ": " + n.checkState);
|
||||
}
|
||||
}
|
||||
|
||||
alert(out.join("\n"));
|
||||
}
|
||||
|
||||
function checkAll() {
|
||||
var topNodes = tree.getRoot().children;
|
||||
for(var i = 0; i <= topNodes.length; ++i) {
|
||||
topNodes[i].check();
|
||||
}
|
||||
}
|
||||
|
||||
function uncheckAll() {
|
||||
var topNodes = tree.getRoot().children;
|
||||
for(var i = 0; i <= topNodes.length; ++i) {
|
||||
topNodes[i].uncheck();
|
||||
}
|
||||
}
|
||||
|
||||
function showJSON() {
|
||||
alert(JSON.stringify(tree._nodes));
|
||||
}
|
||||
|
||||
//YAHOO.util.Event.on("showButton", "click", showTreeState);
|
||||
// YAHOO.util.Event.on("showButton", "click", showJSON);
|
||||
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
|
|
@ -1 +0,0 @@
|
|||
/* Copyright (c) 2006 Yahoo! Inc. All rights reserved. */
/* first or middle sibling, no children */
.ygtvtn {background: url(../../img/default/tn.gif) 0 0 no-repeat; width:16px; height:22px; }
/* first or middle sibling, collapsable */
.ygtvtm {background: url(../../img/default/tm.gif) 0 0 no-repeat; width:16px; height:22px; cursor:pointer }
/* first or middle sibling, collapsable, hover */
.ygtvtmh {background: url(../../img/default/tmh.gif) 0 0 no-repeat; width:16px; height:22px; cursor:pointer }
/* first or middle sibling, expandable */
.ygtvtp {background: url(../../img/default/tp.gif) 0 0 no-repeat; width:16px; height:22px; cursor:pointer }
/* first or middle sibling, expandable, hover */
.ygtvtph {background: url(../../img/default/tph.gif) 0 0 no-repeat; width:16px; height:22px; cursor:pointer }
/* last sibling, no children */
.ygtvln {background: url(../../img/default/ln.gif) 0 0 no-repeat; width:16px; height:22px; }
/* Last sibling, collapsable */
.ygtvlm {background: url(../../img/default/lm.gif) 0 0 no-repeat; width:16px; height:22px; cursor:pointer }
/* Last sibling, collapsable, hover */
.ygtvlmh {background: url(../../img/default/lmh.gif) 0 0 no-repeat; width:16px; height:22px; cursor:pointer }
/* Last sibling, expandable */
.ygtvlp { background: url(../../img/default/lp.gif) 0 0 no-repeat; width:16px; height:22px; cursor:pointer }
/* Last sibling, expandable, hover */
.ygtvlph { background: url(../../img/default/lph.gif) 0 0 no-repeat; width:16px; height:22px; cursor:pointer }
/* Loading icon */
.ygtvloading { background: url(../../img/default/loading.gif) 0 0 no-repeat; width:16px; height:22px; }
/* the style for the empty cells that are used for rendering the depth
* of the node */
.ygtvdepthcell { background: url(../../img/default/vline.gif) 0 0 no-repeat; width:16px; height:22px; }
.ygtvblankdepthcell { width:16px; height:22px; }
/* the style of the div around each node */
.ygtvitem { }
/* the style of the div around each node's collection of children */
.ygtvchildren { }
* html .ygtvchildren { height:1%; }
/* the style of the text label in ygTextNode */
.ygtvlabel, .ygtvlabel:link, .ygtvlabel:visited, .ygtvlabel:hover {
margin-left:2px;
text-decoration: none;
}
.ygtvcheck0 { background: url(../../img/check/check0.gif) 0 0 no-repeat; width:16px; height:22px; cursor:pointer }
.ygtvcheck1 { background: url(../../img/check/check1.gif) 0 0 no-repeat; width:16px; height:22px; cursor:pointer }
.ygtvcheck2 { background: url(../../img/check/check2.gif) 0 0 no-repeat; width:16px; height:22px; cursor:pointer }
|
||||
|
|
@ -1 +0,0 @@
|
|||
/************* CSS for dp.SyntaxHighlighter ***************************/
/* Main style for the table */
.dp-highlighter {
width: 95%;
overflow: auto;
line-height: 100% !important;
margin: 0px 0px 10px 0px;
}
.dp-highlighter table {
width: 100%;
margin: 0px 0px 2px 0px;
border-collapse: collapse;
border-bottom: 2px solid #eee;
background-color:#fff;
}
.dp-highlighter tbody.hide { display: none; }
.dp-highlighter tbody.show { display: table-row-group; _display: block; }
.dp-highlighter td
{
font-family: Courier New;
font-size: 12px;
}
/* Styles for the tools */
.dp-highlighter .tools-corner {
background-color: #eee;
font-size: 9px;
}
.dp-highlighter .tools {
background-color: #eee;
padding: 3px 8px 3px 10px;
border-bottom: 1px solid gray;
font: 11px Verdana, Geneva, Arial, Helvetica, sans-serif;
color: silver;
}
.dp-highlighter .tools-corner {
background-color: #eee;
}
.dp-highlighter .tools a {
font-size: 9px;
color: #aaaaaa;
text-decoration: none;
}
.dp-highlighter .tools a:hover {
color: red;
text-decoration: underline;
}
/* Gutter with line number */
.dp-highlighter .gutter {
padding-right: 5px;
padding-left: 10px;
width: 5px;
background-color: #eee;
border-right: 1px solid #cccccc;
color: gray;
text-align: right;
vertical-align: top;
}
/* Single line style */
.dp-highlighter .line1, .line2 {
padding-left: 10px;
/*
border-bottom: 1px solid #F7F7F7;
*/
white-space:nowrap;
}
.dp-highlighter .line2 {
/*
background-color: #F7F7F7;
*/
}
.dp-xml {}
.dp-xml .cdata { color: #ff1493; }
.dp-xml .comments { color: green; }
.dp-xml .tag { color: blue; }
.dp-xml .tag-name { color: black; font-weight: bold; }
.dp-xml .attribute { color: red; }
.dp-xml .attribute-value { color: blue; }
.dp-c {}
.dp-c .comment { color: green; }
.dp-c .string { color: blue; }
.dp-c .preprocessor { color: gray; }
.dp-c .keyword { color: blue; }
.dp-c .vars { color: #d00; }
|
||||
|
|
@ -1,98 +0,0 @@
|
|||
/* Copyright (c) 2006 Yahoo! Inc. All rights reserved. */
|
||||
|
||||
/* first or middle sibling, no children */
|
||||
.ygtvtn {
|
||||
width:16px; height:22px;
|
||||
background: url(../../../../../../../i/us/nt/widg/tree/dflt/tn.gif) 0 0 no-repeat;
|
||||
}
|
||||
|
||||
/* first or middle sibling, collapsable */
|
||||
.ygtvtm {
|
||||
width:16px; height:22px;
|
||||
cursor:pointer ;
|
||||
background: url(../../../../../../../i/us/nt/widg/tree/dflt/tm.gif) 0 0 no-repeat;
|
||||
}
|
||||
|
||||
/* first or middle sibling, collapsable, hover */
|
||||
.ygtvtmh {
|
||||
width:16px; height:22px;
|
||||
cursor:pointer ;
|
||||
background: url(../../../../../../../i/us/nt/widg/tree/dflt/tmh.gif) 0 0 no-repeat;
|
||||
}
|
||||
|
||||
/* first or middle sibling, expandable */
|
||||
.ygtvtp {
|
||||
width:16px; height:22px;
|
||||
cursor:pointer ;
|
||||
background: url(../../../../../../../i/us/nt/widg/tree/dflt/tp.gif) 0 0 no-repeat;
|
||||
}
|
||||
|
||||
/* first or middle sibling, expandable, hover */
|
||||
.ygtvtph {
|
||||
width:16px; height:22px;
|
||||
cursor:pointer ;
|
||||
background: url(../../../../../../../i/us/nt/widg/tree/dflt/tph.gif) 0 0 no-repeat;
|
||||
}
|
||||
|
||||
/* last sibling, no children */
|
||||
.ygtvln {
|
||||
width:16px; height:22px;
|
||||
background: url(../../../../../../../i/us/nt/widg/tree/dflt/ln.gif) 0 0 no-repeat;
|
||||
}
|
||||
|
||||
/* Last sibling, collapsable */
|
||||
.ygtvlm {
|
||||
width:16px; height:22px;
|
||||
cursor:pointer ;
|
||||
background: url(../../../../../../../i/us/nt/widg/tree/dflt/lm.gif) 0 0 no-repeat;
|
||||
}
|
||||
|
||||
/* Last sibling, collapsable, hover */
|
||||
.ygtvlmh {
|
||||
width:16px; height:22px;
|
||||
cursor:pointer ;
|
||||
background: url(../../../../../../../i/us/nt/widg/tree/dflt/lmh.gif) 0 0 no-repeat;
|
||||
}
|
||||
|
||||
/* Last sibling, expandable */
|
||||
.ygtvlp {
|
||||
width:16px; height:22px;
|
||||
cursor:pointer ;
|
||||
background: url(../../../../../../../i/us/nt/widg/tree/dflt/lp.gif) 0 0 no-repeat;
|
||||
}
|
||||
|
||||
/* Last sibling, expandable, hover */
|
||||
.ygtvlph {
|
||||
width:16px; height:22px; cursor:pointer ;
|
||||
background: url(../../../../../../../i/us/nt/widg/tree/dflt/lph.gif) 0 0 no-repeat;
|
||||
}
|
||||
|
||||
/* Loading icon */
|
||||
.ygtvloading {
|
||||
width:16px; height:22px;
|
||||
background: url(../../../../../../../i/us/nt/widg/tree/dflt/loading.gif) 0 0 no-repeat;
|
||||
}
|
||||
|
||||
/* the style for the empty cells that are used for rendering the depth
|
||||
* of the node */
|
||||
.ygtvdepthcell {
|
||||
width:16px; height:22px;
|
||||
background: url(../../../../../../../i/us/nt/widg/tree/dflt/vline.gif) 0 0 no-repeat;
|
||||
}
|
||||
|
||||
.ygtvblankdepthcell { width:16px; height:22px; }
|
||||
|
||||
/* the style of the div around each node */
|
||||
.ygtvitem { }
|
||||
|
||||
/* the style of the div around each node's collection of children */
|
||||
.ygtvchildren { }
|
||||
* html .ygtvchildren { height:2%; }
|
||||
|
||||
/* the style of the text label in ygTextNode */
|
||||
.ygtvlabel, .ygtvlabel:link, .ygtvlabel:visited, .ygtvlabel:hover {
|
||||
margin-left:2px;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.ygtvspacer { height: 10px; width: 10px; margin: 2px; }
|
||||
|
|
@ -1,98 +0,0 @@
|
|||
/* Copyright (c) 2006 Yahoo! Inc. All rights reserved. */
|
||||
|
||||
/* first or middle sibling, no children */
|
||||
.ygtvtn {
|
||||
width:16px; height:22px;
|
||||
background: url(../../img/default/tn.gif) 0 0 no-repeat;
|
||||
}
|
||||
|
||||
/* first or middle sibling, collapsable */
|
||||
.ygtvtm {
|
||||
width:16px; height:22px;
|
||||
cursor:pointer ;
|
||||
background: url(../../img/default/tm.gif) 0 0 no-repeat;
|
||||
}
|
||||
|
||||
/* first or middle sibling, collapsable, hover */
|
||||
.ygtvtmh {
|
||||
width:16px; height:22px;
|
||||
cursor:pointer ;
|
||||
background: url(../../img/default/tmh.gif) 0 0 no-repeat;
|
||||
}
|
||||
|
||||
/* first or middle sibling, expandable */
|
||||
.ygtvtp {
|
||||
width:16px; height:22px;
|
||||
cursor:pointer ;
|
||||
background: url(../../img/default/tp.gif) 0 0 no-repeat;
|
||||
}
|
||||
|
||||
/* first or middle sibling, expandable, hover */
|
||||
.ygtvtph {
|
||||
width:16px; height:22px;
|
||||
cursor:pointer ;
|
||||
background: url(../../img/default/tph.gif) 0 0 no-repeat;
|
||||
}
|
||||
|
||||
/* last sibling, no children */
|
||||
.ygtvln {
|
||||
width:16px; height:22px;
|
||||
background: url(../../img/default/ln.gif) 0 0 no-repeat;
|
||||
}
|
||||
|
||||
/* Last sibling, collapsable */
|
||||
.ygtvlm {
|
||||
width:16px; height:22px;
|
||||
cursor:pointer ;
|
||||
background: url(../../img/default/lm.gif) 0 0 no-repeat;
|
||||
}
|
||||
|
||||
/* Last sibling, collapsable, hover */
|
||||
.ygtvlmh {
|
||||
width:16px; height:22px;
|
||||
cursor:pointer ;
|
||||
background: url(../../img/default/lmh.gif) 0 0 no-repeat;
|
||||
}
|
||||
|
||||
/* Last sibling, expandable */
|
||||
.ygtvlp {
|
||||
width:16px; height:22px;
|
||||
cursor:pointer ;
|
||||
background: url(../../img/default/lp.gif) 0 0 no-repeat;
|
||||
}
|
||||
|
||||
/* Last sibling, expandable, hover */
|
||||
.ygtvlph {
|
||||
width:16px; height:22px; cursor:pointer ;
|
||||
background: url(../../img/default/lph.gif) 0 0 no-repeat;
|
||||
}
|
||||
|
||||
/* Loading icon */
|
||||
.ygtvloading {
|
||||
width:16px; height:22px;
|
||||
background: url(../../img/default/loading.gif) 0 0 no-repeat;
|
||||
}
|
||||
|
||||
/* the style for the empty cells that are used for rendering the depth
|
||||
* of the node */
|
||||
.ygtvdepthcell {
|
||||
width:16px; height:22px;
|
||||
background: url(../../img/default/vline.gif) 0 0 no-repeat;
|
||||
}
|
||||
|
||||
.ygtvblankdepthcell { width:16px; height:22px; }
|
||||
|
||||
/* the style of the div around each node */
|
||||
.ygtvitem { }
|
||||
|
||||
/* the style of the div around each node's collection of children */
|
||||
.ygtvchildren { }
|
||||
* html .ygtvchildren { height:2%; }
|
||||
|
||||
/* the style of the text label in ygTextNode */
|
||||
.ygtvlabel, .ygtvlabel:link, .ygtvlabel:visited, .ygtvlabel:hover {
|
||||
margin-left:2px;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.ygtvspacer { height: 10px; width: 10px; margin: 2px; }
|
||||
|
|
@ -1,55 +0,0 @@
|
|||
/* Copyright (c) 2006 Yahoo! Inc. All rights reserved. */
|
||||
|
||||
/* first or middle sibling, no children */
|
||||
.ygtvtn { background: url(../../img/folders/tn.gif) 0 0 no-repeat; width:17px; height:22px; }
|
||||
|
||||
/* first or middle sibling, collapsable */
|
||||
.ygtvtm { background: url(../../img/folders/tm.gif) 0 0 no-repeat; width:34px; height:22px; cursor:pointer }
|
||||
|
||||
/* first or middle sibling, collapsable, hover */
|
||||
.ygtvtmh { background: url(../../img/folders/tmh.gif) 0 0 no-repeat; width:34px; height:22px; cursor:pointer }
|
||||
|
||||
/* first or middle sibling, expandable */
|
||||
.ygtvtp { background: url(../../img/folders/tp.gif) 0 0 no-repeat; width:34px; height:22px; cursor:pointer }
|
||||
|
||||
/* first or middle sibling, expandable, hover */
|
||||
.ygtvtph { background: url(../../img/folders/tph.gif) 0 0 no-repeat; width:34px; height:22px; cursor:pointer }
|
||||
|
||||
/* last sibling, no children */
|
||||
.ygtvln { background: url(../../img/folders/ln.gif) 0 0 no-repeat; width:17px; height:22px; }
|
||||
|
||||
/* Last sibling, collapsable */
|
||||
.ygtvlm { background: url(../../img/folders/lm.gif) 0 0 no-repeat; width:34px; height:22px; cursor:pointer }
|
||||
|
||||
/* Last sibling, collapsable, hover */
|
||||
.ygtvlmh { background: url(../../img/folders/lmh.gif) 0 0 no-repeat; width:34px; height:22px; cursor:pointer }
|
||||
|
||||
/* Last sibling, expandable */
|
||||
.ygtvlp { background: url(../../img/folders/lp.gif) 0 0 no-repeat; width:34px; height:22px; cursor:pointer }
|
||||
|
||||
/* Last sibling, expandable, hover */
|
||||
.ygtvlph { background: url(../../img/folders/lph.gif) 0 0 no-repeat; width:34px; height:22px; cursor:pointer }
|
||||
|
||||
/* Loading icon */
|
||||
.ygtvloading { background: url(../../img/folders/loading.gif) 0 0 no-repeat; width:16px; height:22px; }
|
||||
|
||||
/* the style for the empty cells that are used for rendering the depth
|
||||
* of the node */
|
||||
.ygtvdepthcell { background: url(../../img/folders/vline.gif) 0 0 no-repeat; width:17px; height:22px; }
|
||||
|
||||
.ygtvblankdepthcell { width:17px; height:22px; }
|
||||
|
||||
/* the style of the div around each node */
|
||||
.ygtvitem { }
|
||||
|
||||
/* the style of the div around each node's collection of children */
|
||||
.ygtvchildren { }
|
||||
* html .ygtvchildren { height:1%; }
|
||||
|
||||
/* the style of the text label in ygTextNode */
|
||||
.ygtvlabel, .ygtvlabel:link, .ygtvlabel:visited, .ygtvlabel:hover {
|
||||
margin-left:2px;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -1,99 +0,0 @@
|
|||
/* Copyright (c) 2006 Yahoo! Inc. All rights reserved. */
|
||||
|
||||
/* first or middle sibling, no children */
|
||||
.ygtvtn {
|
||||
width:16px; height:22px;
|
||||
background: url(../../img/default/tn.gif) 0 0 no-repeat;
|
||||
}
|
||||
|
||||
/* first or middle sibling, collapsable */
|
||||
.ygtvtm {
|
||||
width:16px; height:22px;
|
||||
cursor:pointer ;
|
||||
background: url(../../img/default/tm.gif) 0 0 no-repeat;
|
||||
}
|
||||
|
||||
/* first or middle sibling, collapsable, hover */
|
||||
.ygtvtmh {
|
||||
width:16px; height:22px;
|
||||
cursor:pointer ;
|
||||
background: url(../../img/default/tmh.gif) 0 0 no-repeat;
|
||||
}
|
||||
|
||||
/* first or middle sibling, expandable */
|
||||
.ygtvtp {
|
||||
width:16px; height:22px;
|
||||
cursor:pointer ;
|
||||
background: url(../../img/default/tp.gif) 0 0 no-repeat;
|
||||
}
|
||||
|
||||
/* first or middle sibling, expandable, hover */
|
||||
.ygtvtph {
|
||||
width:16px; height:22px;
|
||||
cursor:pointer ;
|
||||
background: url(../../img/default/tph.gif) 0 0 no-repeat;
|
||||
}
|
||||
|
||||
/* last sibling, no children */
|
||||
.ygtvln {
|
||||
width:16px; height:22px;
|
||||
background: url(../../img/default/ln.gif) 0 0 no-repeat;
|
||||
}
|
||||
|
||||
/* Last sibling, collapsable */
|
||||
.ygtvlm {
|
||||
width:16px; height:22px;
|
||||
cursor:pointer ;
|
||||
background: url(../../img/default/lm.gif) 0 0 no-repeat;
|
||||
}
|
||||
|
||||
/* Last sibling, collapsable, hover */
|
||||
.ygtvlmh {
|
||||
width:16px; height:22px;
|
||||
cursor:pointer ;
|
||||
background: url(../../img/default/lmh.gif) 0 0 no-repeat;
|
||||
}
|
||||
|
||||
/* Last sibling, expandable */
|
||||
.ygtvlp {
|
||||
width:16px; height:22px;
|
||||
cursor:pointer ;
|
||||
background: url(../../img/default/lp.gif) 0 0 no-repeat;
|
||||
}
|
||||
|
||||
/* Last sibling, expandable, hover */
|
||||
.ygtvlph {
|
||||
width:16px; height:22px; cursor:pointer ;
|
||||
background: url(../../img/default/lph.gif) 0 0 no-repeat;
|
||||
}
|
||||
|
||||
/* Loading icon */
|
||||
.ygtvloading {
|
||||
width:16px; height:22px;
|
||||
background: url(../../img/default/loading.gif) 0 0 no-repeat;
|
||||
}
|
||||
|
||||
/* the style for the empty cells that are used for rendering the depth
|
||||
* of the node */
|
||||
.ygtvdepthcell {
|
||||
width:16px; height:22px;
|
||||
background: url(../../img/default/vline.gif) 0 0 no-repeat;
|
||||
}
|
||||
|
||||
.ygtvblankdepthcell { width:16px; height:22px; }
|
||||
|
||||
/* the style of the div around each node */
|
||||
.ygtvitem { }
|
||||
|
||||
/* the style of the div around each node's collection of children */
|
||||
.ygtvchildren { }
|
||||
* html .ygtvchildren { height:2%; }
|
||||
|
||||
/* the style of the text label in ygTextNode */
|
||||
.ygtvlabel, .ygtvlabel:link, .ygtvlabel:visited, .ygtvlabel:hover {
|
||||
margin-left:2px;
|
||||
text-decoration: none;
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
.ygtvspacer { height: 10px; width: 10px; margin: 2px; }
|
||||
|
|
@ -1,58 +0,0 @@
|
|||
/* Copyright (c) 2006 Yahoo! Inc. All rights reserved. */
|
||||
|
||||
/* first or middle sibling, no children */
|
||||
.ygtvtn { width:1em; height:20px; }
|
||||
|
||||
/* first or middle sibling, collapsable */
|
||||
.ygtvtm { background: url(../../img/menu/collapse.gif) 0 6px no-repeat; width:1em; height:22px; cursor:pointer }
|
||||
|
||||
/* first or middle sibling, collapsable, hover */
|
||||
.ygtvtmh { background: url(../../img/menu/collapseh.gif) 0 6px no-repeat; width:1em; height:22px; cursor:pointer }
|
||||
|
||||
/* first or middle sibling, expandable */
|
||||
.ygtvtp { background: url(../../img/menu/expand.gif) 0 6px no-repeat; width:1em; height:22px; cursor:pointer }
|
||||
|
||||
/* first or middle sibling, expandable, hover */
|
||||
.ygtvtph { background: url(../../img/menu/expandh.gif) 0 6px no-repeat; width:1em; height:22px; cursor:pointer }
|
||||
|
||||
/* last sibling, no children */
|
||||
.ygtvln { width:1em; height:20px; }
|
||||
|
||||
/* Last sibling, collapsable */
|
||||
.ygtvlm { background: url(../../img/menu/collapse.gif) 0 6px no-repeat; width:1em; height:22px; cursor:pointer }
|
||||
|
||||
/* Last sibling, collapsable, hover */
|
||||
.ygtvlmh { background: url(../../img/menu/collapseh.gif) 0 6px no-repeat; width:1em; height:22px; cursor:pointer }
|
||||
|
||||
/* Last sibling, expandable */
|
||||
.ygtvlp { background: url(../../img/menu/expand.gif) 0 6px no-repeat; width:1em; height:22px; cursor:pointer }
|
||||
|
||||
/* Last sibling, expandable, hover */
|
||||
.ygtvlph { background: url(../../img/menu/expandh.gif) 0 6px no-repeat; width:1em; height:22px; cursor:pointer }
|
||||
|
||||
/* Loading icon */
|
||||
.ygtvloading { background: url(../../img/menu/loading.gif) 0 6px no-repeat; width:1em; height:22px; }
|
||||
|
||||
/* the style for the empty cells that are used for rendering the depth
|
||||
* of the node */
|
||||
.ygtvdepthcell { width:1em; height:20px; }
|
||||
|
||||
.ygtvblankdepthcell { width:1em; height:20px; }
|
||||
|
||||
/* the style of the div around each node */
|
||||
.ygtvitem { border: 0px solid grey; }
|
||||
|
||||
/* the style of the div around each node's collection of children */
|
||||
.ygtvchildren { }
|
||||
* html .ygtvchildren { height:1%; }
|
||||
|
||||
/* the style of the text label in ygTextNode */
|
||||
.ygtvlabel, .ygtvlabel:link, .ygtvlabel:visited, .ygtvlabel:hover {
|
||||
/*
|
||||
margin-left:2px;
|
||||
text-decoration: none;
|
||||
*/
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -1 +0,0 @@
|
|||
html, body { padding: 0px 0px 10px 0px; border: 0; margin: 0; }
body { font: normal 11px verdana, sans-serif; color: #333; line-height: 19px; margin: 0; }
#container { clear: both; text-align: left; padding: 0 0; margin: 0 0; }
#containerTop { height:48px; }
#pad { padding: 0px 20px 0px 20px; }
a { text-decoration: underline; color: #46546C; }
a:hover { text-decoration: underline; color: #4d77c3; }
h1, h2, h3, h4, h5, h6 { font-family: palatino, georgia, "Times New Roman", serif; }
h2 { font-size:16px; font-weight: bold; margin: 0 0 11px 0; }
.border_2px { border: 1px solid #D8D8D8; padding: 2px; background: #fff; }
.border_5px { border: 1px solid #D8D8D8; padding: 5px; background: #fff; margin: 0 0 4px 0; }
img { padding: 0; margin: 0; border: 0; }
form { padding: 0; margin: 0; }
.input { width: 85px; font-size: 9px; }
.submit { font-size: 9px; }
#pageTitle { position:absolute;top:10px;left:90px; }
#pageTitle H3 { font-size:14pt; color:#666666 }
#header h1 { float:left; margin-top: 19px; margin-left: 50px; }
#header h1 a { display: block; height: 19px; text-decoration: none; }
#header { height: 60px; border: 0px solid #CFFB00; margin-bottom:0px; }
#header h4 { position: relative; float: right; font-size:11px;
letter-spacing: 1px; top: 10px; right: 30px;
line-height: 15px; padding: 0 0 0 13px; margin: 0px; }
#content { float: left; width: 500px; min-height:400px; padding:10px 0px; border: 0px solid #C13B00;
margin-left: 50px; top:0px; }
#content h1 { font-size:18px; margin:0px; }
.newsItem { padding-bottom:25px; margin-bottom:25px; overflow: hidden; }
.newsItem h3 { font-size:18px; margin:0px; }
.newsItem h3 a { text-decoration:none; color:#6A7981; }
.newsItem h3 a:hover { text-decoration:underline; color:#000; }
.newsItemFooter, .newsItemFooter a { font-size:9px; color:#999; font-weight:normal; }
.newsItemFooter a:hover { color:#222; }
#footer { padding: 0px 0px 20px 0px; clear: both; color: #999; border-top:0px #CCC solid; margin:0px 26px 0px 30px }
#footer a { color: #999; }
#footer a:hover { color: #222; }
#footerContainer { clear: both; }
#rightbar {
float: right;
padding: 5px 5px 5px 5px;
width: 304px; /* for IE5-Win */
width: 300px;
border: 1px solid #333333;
position:relative;
right:48px;
top:0px;
background-color:#eeeeee;
}
#rightbar h2, #rightbar h3 {
font-size:12px;
text-align:center;
color:#FFF;
border-bottom:#848B8F solid 1px;
border-right:#949B9F solid 1px;
border-top:#eee solid 1px;
padding:1px;
margin:0px 0px 0px 0px;
background-color:#383e45;
width:100%;
}
#rightbar h2 a, #rightbar h3 a {
font-size:12px;
color:#FFF;
text-decoration:none;
display:block;
}
#rightBarPad {
margin:0px;
}
#sidenav {
margin: 0px 0;
border-bottom: 1px solid #ddd;
}
#sidenav ul {
margin: 0;
padding: 0;
border: 0;
}
#sidenav ul li {
list-style: none;
list-style-image: none !important;
margin: 0;
padding:0;
}
#sidenav ul li a {
text-decoration: none;
padding: 5px 0px 5px 0px;
color: #4C5250;
display: block;
width: 187px;
font-size: 11px !important;
font-weight: bold;
border-top: 1px solid #ddd;
border-bottom: 1px solid #aaa;
border-left: 1px solid #C7CBD0;
text-shadow: -2px -2px 0px #FFF;
}
#sidenav ul li a:hover {
/* background: url(../img/navHover2.png) top no-repeat; */
border-top: 1px solid #A1AAAF;
border-bottom: 1px solid #CCC;
border-right: 0px solid #C3C7CA;
border-left: 1px solid #C3C7CA;
text-shadow: 4px 4px 0px #C3C7CA;
}
.ylogo { position:absolute;top:5px;left:5px }
|
||||
|
|
@ -1,200 +0,0 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
|
||||
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
|
||||
<head>
|
||||
|
||||
<title>Yahoo! UI Library - Tree Control</title>
|
||||
<link rel="stylesheet" type="text/css" href="http://us.js2.yimg.com/us.js.yimg.com/lib/common/css/fonts_2.0.0-b3.css" />
|
||||
<link rel="stylesheet" type="text/css" href="http://us.js2.yimg.com/us.js.yimg.com/lib/common/css/grids_2.0.0-b3.css" />
|
||||
|
||||
<link rel="stylesheet" type="text/css" href="css/screen.css" />
|
||||
<link rel="stylesheet" type="text/css" href="css/local/tree.css" />
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<div id="pageTitle">
|
||||
<h3>Tree Control</h3>
|
||||
</div>
|
||||
|
||||
<script type="text/javascript" src="../../build/yahoo/yahoo.js" ></script>
|
||||
|
||||
<!-- The following are required for the logger -->
|
||||
<script type="text/javascript" src="../../build/event/event.js"></script>
|
||||
<script type="text/javascript" src="../../build/dom/dom.js"></script>
|
||||
<script type="text/javascript" src="../../build/logger/logger.js"></script>
|
||||
<!-- End logger reqs -->
|
||||
|
||||
<script type="text/javascript" src="../../build/treeview/treeview-debug.js" ></script>
|
||||
|
||||
<style type="text/css">
|
||||
|
||||
/* logger default styles */
|
||||
/* font size is controlled here: default 77% */
|
||||
#yui-log {position:absolute;top:1em;right:1em;font-size:77%;text-align:left;}
|
||||
/* width is controlled here: default 31em */
|
||||
.yui-log {background-color:#AAA;border:1px solid black;font-family:monospace;z-index:9000;}
|
||||
.yui-log p {margin:1px;padding:.1em;}
|
||||
.yui-log button {font-family:monospace;}
|
||||
.yui-log .yui-log-hd {padding:.5em;background-color:#575757;color:#FFF;}
|
||||
/* height is controlled here: default 20em*/
|
||||
.yui-log .yui-log-bd {width:100%;height:20em;background-color:#FFF;border:1px solid gray;overflow:auto;}
|
||||
.yui-log .yui-log-ft {margin-top:.5em;margin-bottom:1em;}
|
||||
.yui-log .yui-log-ft .yui-log-categoryfilters {}
|
||||
.yui-log .yui-log-ft .yui-log-sourcefilters {width:100%;border-top:1px solid #575757;margin-top:.75em;padding-top:.75em;}
|
||||
.yui-log .yui-log-btns {position:relative;float:right;bottom:.25em;}
|
||||
.yui-log .yui-log-filtergrp {margin-right:.5em;}
|
||||
.yui-log .info {background-color:#A7CC25;} /* A7CC25 green */
|
||||
.yui-log .warn {background-color:#F58516;} /* F58516 orange */
|
||||
.yui-log .error {background-color:#E32F0B;} /* E32F0B red */
|
||||
.yui-log .time {background-color:#A6C9D7;} /* A6C9D7 blue */
|
||||
.yui-log .window {background-color:#F2E886;} /* F2E886 tan */
|
||||
|
||||
</style>
|
||||
|
||||
|
||||
<div id="container">
|
||||
<img class="ylogo" src="img/logo.gif" alt="" />
|
||||
<div id="containerTop">
|
||||
<div id="header">
|
||||
<h1>
|
||||
|
||||
</h1>
|
||||
<h4> </h4>
|
||||
</div>
|
||||
<div id="main">
|
||||
|
||||
<div id="rightbar">
|
||||
|
||||
<div id="rightBarPad">
|
||||
<h3>Examples</h3>
|
||||
|
||||
<div id="linkage">
|
||||
<ul>
|
||||
<li><a href="default.html?mode=dist">Default tree widget</a></li>
|
||||
<li><a href="dynamic.html?mode=dist">Dynamic load</a></li>
|
||||
|
||||
|
||||
<li><a href="folders.html?mode=dist">Folder view</a></li>
|
||||
<li><a href="menu.html?mode=dist">Menu</a></li>
|
||||
<li><a href="html.html?mode=dist">HTML node</a></li>
|
||||
<li><a href="multi.html?mode=dist">Multiple trees, different styles</a></li>
|
||||
<li><a href="check.html?mode=dist">Task list</a></li>
|
||||
<li><a href="anim.html?mode=dist">Fade animation</a></li>
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<script type="text/javascript">
|
||||
//<![CDATA[
|
||||
YAHOO.example.logApp = function() {
|
||||
var divId;
|
||||
return {
|
||||
init: function(p_divId, p_toggleElId, p_clearElId) {
|
||||
divId = p_divId
|
||||
},
|
||||
|
||||
onload: function() {
|
||||
if (YAHOO.widget.Logger) {
|
||||
new YAHOO.widget.LogReader( "logDiv", { height: "400px" } );
|
||||
}
|
||||
}
|
||||
};
|
||||
} ();
|
||||
|
||||
YAHOO.util.Event.on(window, "load", YAHOO.example.logApp.onload);
|
||||
|
||||
//]]>
|
||||
</script>
|
||||
|
||||
<div id="logDiv"></div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<div id="content">
|
||||
<form id="mainForm" action="javscript:;">
|
||||
<div class="newsItem">
|
||||
<h3>Default TreeView Widget</h3>
|
||||
<p>
|
||||
|
||||
</p>
|
||||
|
||||
<div id="expandcontractdiv">
|
||||
<a href="javascript:tree.expandAll()">Expand all</a>
|
||||
<a href="javascript:tree.collapseAll()">Collapse all</a>
|
||||
</div>
|
||||
<div id="treeDiv1"></div>
|
||||
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<div id="footerContainer">
|
||||
<div id="footer">
|
||||
<p> </p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<script type="text/javascript">
|
||||
//<![CDATA[
|
||||
var tree, nodeIndex;
|
||||
var nodes = [];
|
||||
|
||||
function treeInit() {
|
||||
buildRandomTextNodeTree();
|
||||
}
|
||||
|
||||
function buildRandomTextNodeTree() {
|
||||
tree = new YAHOO.widget.TreeView("treeDiv1");
|
||||
|
||||
for (var i = 0; i < Math.floor((Math.random()*4) + 3); i++) {
|
||||
var tmpNode = new YAHOO.widget.TextNode("label-" + i, tree.getRoot(), false);
|
||||
// tmpNode.collapse();
|
||||
// tmpNode.expand();
|
||||
// buildRandomTextBranch(tmpNode);
|
||||
buildLargeBranch(tmpNode);
|
||||
}
|
||||
|
||||
tree.draw();
|
||||
}
|
||||
|
||||
var callback = null;
|
||||
|
||||
function buildLargeBranch(node) {
|
||||
if (node.depth < 10) {
|
||||
YAHOO.log("buildRandomTextBranch: " + node.index);
|
||||
for ( var i = 0; i < 10; i++ ) {
|
||||
new YAHOO.widget.TextNode(node.label + "-" + i, node, false);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function buildRandomTextBranch(node) {
|
||||
if (node.depth < 10) {
|
||||
YAHOO.log("buildRandomTextBranch: " + node.index);
|
||||
for ( var i = 0; i < Math.floor(Math.random() * 4) ; i++ ) {
|
||||
var tmpNode = new YAHOO.widget.TextNode(node.label + "-" + i, node, false);
|
||||
buildRandomTextBranch(tmpNode);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
YAHOO.util.Event.addListener(window, "load", treeInit);
|
||||
|
||||
//]]>
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
|
|
@ -1,274 +0,0 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml"><head>
|
||||
|
||||
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"><!--Yahoo! User Interface Library: http://twiki.corp.yahoo.com/view/Devel/PresentationPlatform--><!--Begin YUI CSS infrastructure, including Standard Reset, Standard Fonts, and CSS Page Grids -->
|
||||
|
||||
<link rel="stylesheet" type="text/css" href="../../build/fonts/fonts.css">
|
||||
<link rel="stylesheet" type="text/css" href="../../build/grids/grids.css"><!--end YUI CSS infrastructure--><!--begin YUIL Utilities -->
|
||||
|
||||
<script src="../../build/yahoo/yahoo.js"></script>
|
||||
<script src="../../build/event/event.js"></script>
|
||||
<script src="../../build/treeview/treeview.js"></script>
|
||||
|
||||
<link rel="stylesheet" type="text/css" href="css/code.css">
|
||||
<link rel="stylesheet" type="text/css" href="css/local/tree.css">
|
||||
|
||||
<script>
|
||||
|
||||
/*create namespace for examples:*/
|
||||
YAHOO.namespace("example");
|
||||
|
||||
/* Using Crockford's "Module Pattern": */
|
||||
YAHOO.example.treeExample = function() {
|
||||
|
||||
var tree, currentIconMode;
|
||||
|
||||
function changeIconMode() {
|
||||
var newVal = parseInt(this.value);
|
||||
if (newVal != currentIconMode) {
|
||||
currentIconMode = newVal;
|
||||
}
|
||||
|
||||
buildTree();
|
||||
}
|
||||
|
||||
function loadNodeData(node, fnLoadComplete) {
|
||||
//We'll randomize our loader with stock data; in many implementations,
|
||||
//this step would be replaced with an XMLHttpRequest call to the server
|
||||
//for more data.
|
||||
|
||||
//Array of India's States
|
||||
var aStates = ["Andhra Pradesh","Arunachal Pradesh","Assam","Bihar","Chhattisgarh","Goa","Gujarat","Haryana","Himachal Pradesh","Jammu and Kashmir","Jharkhand","Karnataka","Kerala","Madhya Pradesh","Maharashtra","Manipur","Meghalaya","Mizoram","Nagaland","Orissa","Punjab","Rajasthan","Sikkim","Tamil Nadu","Tripura","Uttaranchal","Uttar","Pradesh","West Bengal"];
|
||||
|
||||
//Random number determines whether a node has children
|
||||
var index = Math.round(Math.random()*100);
|
||||
|
||||
//if our random number is in range, we'll pretend that this node
|
||||
//has children; here, we'll indicate that 70% of nodes have
|
||||
//children.
|
||||
if (index>30) {
|
||||
//We'll use a random number to determine the number of
|
||||
//children for each node:
|
||||
var childCount = (Math.round(Math.random()*5) + 1);
|
||||
|
||||
//This is important: The primary job of the data loader function
|
||||
//is to determine whether the node has children and then to
|
||||
//actually create the child nodes if they are needed; here, we'll
|
||||
//loop through to create each child node:
|
||||
for (var i=0; i<childCount; i++) {
|
||||
thisState = aStates[Math.round(Math.random()*27)];
|
||||
var newNode = new YAHOO.widget.TextNode(thisState, node, false);
|
||||
}
|
||||
}
|
||||
|
||||
//When we're done creating child nodes, we execute the node's
|
||||
//loadComplete callback method which comes in as our loader's
|
||||
//second argument (we could also access it at node.loadComplete,
|
||||
//if necessary):
|
||||
fnLoadComplete();
|
||||
}
|
||||
|
||||
function buildTree() {
|
||||
//create a new tree:
|
||||
tree = new YAHOO.widget.TreeView("treeContainer");
|
||||
|
||||
//turn dynamic loading on for entire tree:
|
||||
tree.setDynamicLoad(loadNodeData, currentIconMode);
|
||||
|
||||
//get root node for tree:
|
||||
var root = tree.getRoot();
|
||||
|
||||
//add child nodes for tree:
|
||||
var tmpNode1 = new YAHOO.widget.TextNode("First Node", root, false);
|
||||
var tmpNode2 = new YAHOO.widget.TextNode("Second Node", root, false);
|
||||
var tmpNode3 = new YAHOO.widget.TextNode("Third Node", root, false);
|
||||
var tmpNode4 = new YAHOO.widget.TextNode("Fourth Node", root, false);
|
||||
var tmpNode5 = new YAHOO.widget.TextNode("Fifth Node", root, false);
|
||||
|
||||
//render tree with these five nodes; all descendants of these nodes
|
||||
//will be generated as needed by the dynamic loader.
|
||||
tree.draw();
|
||||
}
|
||||
|
||||
|
||||
return {
|
||||
init: function() {
|
||||
YAHOO.util.Event.on(["mode0", "mode1"], "click", changeIconMode);
|
||||
var el = document.getElementById("mode1");
|
||||
if (el && el.checked) {
|
||||
currentIconMode = parseInt(el.value);
|
||||
} else {
|
||||
currentIconMode = 0;
|
||||
}
|
||||
|
||||
buildTree();
|
||||
}
|
||||
|
||||
}
|
||||
} ();
|
||||
|
||||
YAHOO.util.Event.addListener(window, "load", YAHOO.example.treeExample.init, YAHOO.example.treeExample,true)
|
||||
</script>
|
||||
<title>Dynamic TreeView Example</title>
|
||||
</head>
|
||||
<body id="yahoo">
|
||||
|
||||
|
||||
<!-- id: optional property or feature signature -->
|
||||
<div id="doc" class="yui-t5"><!-- possible values: t1, t2, t3, t4, t5, t6, t7 -->
|
||||
<div id="hd">
|
||||
<h1>TreeView Example</h1>
|
||||
</div>
|
||||
<div id="bd">
|
||||
|
||||
<!-- start: primary column from outer template -->
|
||||
<div id="yui-main">
|
||||
<div class="yui-b">
|
||||
<p>In
|
||||
this example, the TreeView control's dyamic loading functionality is
|
||||
explored. Dynamic loading of child nodes allows you to optmize
|
||||
performance by only loading data for and creating the nodes that will
|
||||
be visible when the tree is rendered. Nodes that are not expanded when
|
||||
the Tree's draw method is invoked are left childless in the initial
|
||||
state. When such a node is expanded (either by user action or by
|
||||
script), a dynamic loader function is called. That function has three
|
||||
important roles:</p>
|
||||
<ol>
|
||||
<li><strong>Check for child nodes:</strong>
|
||||
The dynamic loader function will check for child nodes by evaluating
|
||||
in-page data (for example, data held in a JavaScript array or object)
|
||||
or by retrieving data about the expanding node from the server via
|
||||
XMLHttpRequest. In the example on this page, an in-page random list
|
||||
generator is used to generate the Tree structure. </li>
|
||||
<li><strong>Add child nodes, if present:</strong>
|
||||
If it determines that child node's are present for the expanding node,
|
||||
the dynamic loader must add those child nodes to the Tree instance.
|
||||
Because these nodes are only added when needed, the overall complexity
|
||||
of the Tree's complexity (in JavaScript and in the DOM) is reduced and
|
||||
its initial render time is much faster.</li>
|
||||
<li><strong>Invoke the expanding node's callback method:</strong>
|
||||
Once the dynamic loader method determines whether the expanding node
|
||||
has children (and adds any children that may be present), it must
|
||||
notify the expanding node's object that dynamic loading is complete. It
|
||||
does this via a callback method which is passed into the dynamic loader
|
||||
as an argument.</li>
|
||||
</ol>
|
||||
|
||||
<h3>Creating a Dynamic Loader Method</h3>
|
||||
<p>In
|
||||
this example, our dynamic loader method will accomplish its first task
|
||||
(checking for child nodes) by using a random number generator; we'll
|
||||
specify that roughly 70% of our nodes have children. When there are
|
||||
children present, there will be children will between one and six
|
||||
children (also randomly enumerated) whose labels are drawn from an
|
||||
array of Indian states.</p>
|
||||
|
||||
<p>Our method, which we'll call <code>loadNodeData</code>, will be
|
||||
passed two arguments by the Tree instance when called: The first is a
|
||||
reference to the expanding node's node object; the second is the
|
||||
callback method that we need to call when we're done adding children to
|
||||
the expanding node. The method as it appears on this page (only the
|
||||
array of state names has been truncated) follows, with comments
|
||||
glossing each step:</p>
|
||||
|
||||
<pre><textarea name="code" class="JScript" cols="60" rows="1">loadNodeData: function(node, fnLoadComplete) {
|
||||
|
||||
//Array of India's States
|
||||
var aStates = ["Andhra Pradesh",
|
||||
"Arunachal Pradesh","Assam",
|
||||
...
|
||||
];
|
||||
|
||||
//Random number determines whether a node has children
|
||||
var index = Math.round(Math.random()*100);
|
||||
|
||||
//if our random number is in range, we'll pretend that this node
|
||||
//has children; here, we'll indicate that 70% of nodes have
|
||||
//children.
|
||||
if (index>30) {
|
||||
//We'll use a random number to determine the number of
|
||||
//children for each node:
|
||||
var childCount = (Math.round(Math.random()*5) + 1);
|
||||
|
||||
//This is important: The primary job of the data loader function
|
||||
//is to determine whether the node has children and then to
|
||||
//actually create the child nodes if they are needed; here, we'll
|
||||
//loop through to create each child node:
|
||||
for (var i=0; i<childCount; i++) {
|
||||
thisState = aStates[Math.round(Math.random()*27)];
|
||||
var newNode = new YAHOO.widget.TextNode(thisState, node, false);
|
||||
}
|
||||
}
|
||||
|
||||
//When we're done creating child nodes, we execute the node's
|
||||
//loadComplete callback method which comes in as our loader's
|
||||
//second argument (we could also access it at node.loadComplete,
|
||||
//if necessary):
|
||||
fnLoadComplete();
|
||||
}</textarea></pre>
|
||||
|
||||
<h3>Setting Up the Tree Instance and Configuring It for Dynamic Loading</h3>
|
||||
<p>Creating
|
||||
the initial state of a Tree object that will be configured for dynamic
|
||||
loading is no different than for non-dynamic Tree instances — use the
|
||||
Tree constructor to create your new instance:</p>
|
||||
|
||||
<pre><textarea name="code" class="JScript" cols="60" rows="1">//create a new tree:
|
||||
tree = new YAHOO.widget.TreeView("treeContainer");</textarea></pre>
|
||||
|
||||
<p>In the example on this page, the entire tree is configured for
|
||||
dynamic loading. That will result in all nodes having their children
|
||||
populated by the dynamic loader method when they are expanded for the
|
||||
first time. (You can also choose to specify individual nodes and their
|
||||
descendants as being dynamically loaded.) To the Tree instance for
|
||||
dynamic loading, merely pass the instance's <code>setDynamicLoad</code> method a reference to your dynamic loader method:</p>
|
||||
|
||||
<pre><textarea name="code" class="JScript" cols="60" rows="1">//turn dynamic loading on for entire tree:
|
||||
tree.setDynamicLoad(this.loadNodeData);
|
||||
</textarea></pre>
|
||||
|
||||
<p>Having created a Tree instance and configured it for dynamic
|
||||
loading, we can now add the tree's top-level nodes and then render the
|
||||
Tree via its <code>draw</code> method:</p>
|
||||
|
||||
<pre><textarea name="code" class="JScript" cols="60" rows="1">//add child nodes for tree:
|
||||
var tmpNode1 = new YAHOO.widget.TextNode("First Node", root, false);
|
||||
var tmpNode2 = new YAHOO.widget.TextNode("Second Node", root, false);
|
||||
var tmpNode3 = new YAHOO.widget.TextNode("Third Node", root, false);
|
||||
var tmpNode4 = new YAHOO.widget.TextNode("Fourth Node", root, false);
|
||||
var tmpNode5 = new YAHOO.widget.TextNode("Fifth Node", root, false);
|
||||
|
||||
//render tree with these five nodes; all descendants of these nodes
|
||||
//will be generated as needed by the dynamic loader.
|
||||
tree.draw();
|
||||
</textarea></pre>
|
||||
|
||||
<p>With that, our tree renders on the page, showing its five top-level
|
||||
nodes. As the user interacts with the tree, child nodes will be added
|
||||
and displayed based on the output of the <code>loadNodeData</code> method.</p>
|
||||
<h3>Childless Node Style</h3><p>There are two built-in visual treatments for
|
||||
childless nodes. Before a dynamically loaded node is expanded, its icon
|
||||
indicates that it can be expanded — this reflects the possibility that
|
||||
the dynamic loader will find and populate children for that node if it is
|
||||
expanded. However, once the Tree determines that a node has no children, it
|
||||
can reflect the childless state either through the "expanded" icon (<img
|
||||
src="">) or by omitting the icon entirely. In this example, we've
|
||||
added a control that enables you to experiment with each setting to explore its
|
||||
visual impact</p><p>The default visual treatment for a childless node is the
|
||||
"expanded" icon. To change this setting, pass a second argument to your
|
||||
<code>setDynamicLoad</code> method — pass a value of <code>1</code> to
|
||||
use the iconless visual treatment.</p> </div> </div> <!-- end: primary column
|
||||
from outer template -->
|
||||
|
||||
<!-- start: secondary column from outer template --> <div
|
||||
class="yui-b"> <h3>Dynamically Loaded TreeView:</h3> <div
|
||||
id="treeContainer"></div> <h3>Childless Node Style:</h3> <dd> <label>
|
||||
<input type="radio" id="mode0" name="mode" value ="0" checked />
|
||||
Expand/Collapse </label> </dd> <dd> <label> <input type="radio"
|
||||
id="mode1" name="mode" value ="1" /> Leaf Node </label> </dd> </div>
|
||||
<!-- end: secondary column from outer template -->
|
||||
|
||||
</div> <div id="ft"> </div> </div> <script
|
||||
src="js/dpSyntaxHighlighter.js"></script> <script language="javascript">
|
||||
dp.SyntaxHighlighter.HighlightAll('code'); </script> </body></html>
|
||||
|
|
@ -1,183 +0,0 @@
|
|||
<!doctype html public "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<title>Yahoo! UI Library - Tree Control</title>
|
||||
<link rel="stylesheet" type="text/css" href="css/screen.css">
|
||||
</head>
|
||||
|
||||
<body onload="treeInit()">
|
||||
|
||||
<link rel="stylesheet" type="text/css" href="css/folders/tree.css">
|
||||
|
||||
<div id="pageTitle">
|
||||
<h3>Tree Control</h3>
|
||||
</div>
|
||||
|
||||
<script type="text/javascript" src="../../build/yahoo/yahoo.js" ></script>
|
||||
|
||||
<!-- The following are required for the logger -->
|
||||
<script type="text/javascript" src="../../build/event/event.js"></script>
|
||||
<script type="text/javascript" src="../../build/dom/dom.js"></script>
|
||||
<script type="text/javascript" src="../../build/logger/logger.js"></script>
|
||||
<!-- End logger reqs -->
|
||||
|
||||
<script type="text/javascript" src="../../build/treeview/treeview-debug.js" ></script>
|
||||
|
||||
<style type="text/css">
|
||||
|
||||
/* logger default styles */
|
||||
/* font size is controlled here: default 77% */
|
||||
#yui-log {position:absolute;top:1em;right:1em;font-size:77%;text-align:left;}
|
||||
/* width is controlled here: default 31em */
|
||||
.yui-log {background-color:#AAA;border:1px solid black;font-family:monospace;z-index:9000;}
|
||||
.yui-log p {margin:1px;padding:.1em;}
|
||||
.yui-log button {font-family:monospace;}
|
||||
.yui-log .yui-log-hd {padding:.5em;background-color:#575757;color:#FFF;}
|
||||
/* height is controlled here: default 20em*/
|
||||
.yui-log .yui-log-bd {width:100%;height:20em;background-color:#FFF;border:1px solid gray;overflow:auto;}
|
||||
.yui-log .yui-log-ft {margin-top:.5em;margin-bottom:1em;}
|
||||
.yui-log .yui-log-ft .yui-log-categoryfilters {}
|
||||
.yui-log .yui-log-ft .yui-log-sourcefilters {width:100%;border-top:1px solid #575757;margin-top:.75em;padding-top:.75em;}
|
||||
.yui-log .yui-log-btns {position:relative;float:right;bottom:.25em;}
|
||||
.yui-log .yui-log-filtergrp {margin-right:.5em;}
|
||||
.yui-log .info {background-color:#A7CC25;} /* A7CC25 green */
|
||||
.yui-log .warn {background-color:#F58516;} /* F58516 orange */
|
||||
.yui-log .error {background-color:#E32F0B;} /* E32F0B red */
|
||||
.yui-log .time {background-color:#A6C9D7;} /* A6C9D7 blue */
|
||||
.yui-log .window {background-color:#F2E886;} /* F2E886 tan */
|
||||
|
||||
</style>
|
||||
|
||||
|
||||
<div id="container">
|
||||
<img class="ylogo" src="img/logo.gif" alt="" />
|
||||
<div id="containerTop">
|
||||
<div id="header">
|
||||
<h1>
|
||||
|
||||
</h1>
|
||||
<h4> </h4>
|
||||
</div>
|
||||
<div id="main">
|
||||
|
||||
<div id="rightbar">
|
||||
|
||||
<div id="rightBarPad">
|
||||
<h3>Examples</h3>
|
||||
|
||||
<div id="linkage">
|
||||
<ul>
|
||||
<li><a href="default.html?mode=dist">Default tree widget</a></li>
|
||||
<li><a href="dynamic.html?mode=dist">Dynamic load</a></li>
|
||||
|
||||
|
||||
<li><a href="folders.html?mode=dist">Folder view</a></li>
|
||||
<li><a href="menu.html?mode=dist">Menu</a></li>
|
||||
<li><a href="html.html?mode=dist">HTML node</a></li>
|
||||
<li><a href="multi.html?mode=dist">Multiple trees, different styles</a></li>
|
||||
<li><a href="check.html?mode=dist">Task list</a></li>
|
||||
<li><a href="anim.html?mode=dist">Fade animation</a></li>
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<script type="text/javascript">
|
||||
//<![CDATA[
|
||||
YAHOO.example.logApp = function() {
|
||||
var divId;
|
||||
return {
|
||||
init: function(p_divId, p_toggleElId, p_clearElId) {
|
||||
divId = p_divId
|
||||
},
|
||||
|
||||
onload: function() {
|
||||
if (YAHOO.widget.Logger) {
|
||||
new YAHOO.widget.LogReader( "logDiv", { height: "400px" } );
|
||||
}
|
||||
}
|
||||
};
|
||||
} ();
|
||||
|
||||
YAHOO.util.Event.on(window, "load", YAHOO.example.logApp.onload);
|
||||
|
||||
//]]>
|
||||
</script>
|
||||
|
||||
<div id="logDiv"></div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<div id="content">
|
||||
<form name="mainForm" action="javscript:;">
|
||||
<div class="newsItem">
|
||||
<h3>Folders</h3>
|
||||
<p>
|
||||
|
||||
</p>
|
||||
|
||||
<div id="expandcontractdiv">
|
||||
<a href="javascript:tree.expandAll()">Expand all</a>
|
||||
<a href="javascript:tree.collapseAll()">Collapse all</a>
|
||||
</div>
|
||||
<div id="treeDiv1"></div>
|
||||
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<div id="footerContainer">
|
||||
<div id="footer">
|
||||
<p> </p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
<script type="text/javascript">
|
||||
|
||||
var tree;
|
||||
var nodes = new Array();
|
||||
var nodeIndex;
|
||||
|
||||
function treeInit() {
|
||||
buildRandomTextNodeTree();
|
||||
}
|
||||
|
||||
function buildRandomTextNodeTree() {
|
||||
tree = new YAHOO.widget.TreeView("treeDiv1");
|
||||
|
||||
for (var i = 0; i < Math.floor((Math.random()*4) + 3); i++) {
|
||||
var tmpNode = new YAHOO.widget.TextNode("label-" + i, tree.getRoot(), false);
|
||||
buildRandomTextBranch(tmpNode);
|
||||
}
|
||||
|
||||
tree.draw();
|
||||
}
|
||||
|
||||
var callback = null;
|
||||
|
||||
function buildRandomTextBranch(node) {
|
||||
if (node.depth < 6) {
|
||||
YAHOO.log("buildRandomTextBranch: " + node.index);
|
||||
for ( var i = 0; i < Math.floor(Math.random() * 4) ; i++ ) {
|
||||
var tmpNode = new YAHOO.widget.TextNode(node.label + "-" + i, node, false);
|
||||
buildRandomTextBranch(tmpNode);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
|
|
@ -1,214 +0,0 @@
|
|||
<!doctype html public "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<title>Yahoo! UI Library - Tree Control</title>
|
||||
<link rel="stylesheet" type="text/css" href="css/screen.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<link rel="stylesheet" type="text/css" href="css/local/tree.css">
|
||||
|
||||
<div id="pageTitle">
|
||||
<h3>Tree Control</h3>
|
||||
</div>
|
||||
|
||||
<script type="text/javascript" src="../../build/yahoo/yahoo.js" ></script>
|
||||
|
||||
<!-- The following are required for the logger -->
|
||||
<script type="text/javascript" src="../../build/event/event.js"></script>
|
||||
<script type="text/javascript" src="../../build/dom/dom.js"></script>
|
||||
<script type="text/javascript" src="../../build/logger/logger.js"></script>
|
||||
<!-- End logger reqs -->
|
||||
|
||||
<script type="text/javascript" src="../../build/treeview/treeview-debug.js" ></script>
|
||||
|
||||
<style type="text/css">
|
||||
|
||||
/* logger default styles */
|
||||
/* font size is controlled here: default 77% */
|
||||
#yui-log {position:absolute;top:1em;right:1em;font-size:77%;text-align:left;}
|
||||
/* width is controlled here: default 31em */
|
||||
.yui-log {background-color:#AAA;border:1px solid black;font-family:monospace;z-index:9000;}
|
||||
.yui-log p {margin:1px;padding:.1em;}
|
||||
.yui-log button {font-family:monospace;}
|
||||
.yui-log .yui-log-hd {padding:.5em;background-color:#575757;color:#FFF;}
|
||||
/* height is controlled here: default 20em*/
|
||||
.yui-log .yui-log-bd {width:100%;height:20em;background-color:#FFF;border:1px solid gray;overflow:auto;}
|
||||
.yui-log .yui-log-ft {margin-top:.5em;margin-bottom:1em;}
|
||||
.yui-log .yui-log-ft .yui-log-categoryfilters {}
|
||||
.yui-log .yui-log-ft .yui-log-sourcefilters {width:100%;border-top:1px solid #575757;margin-top:.75em;padding-top:.75em;}
|
||||
.yui-log .yui-log-btns {position:relative;float:right;bottom:.25em;}
|
||||
.yui-log .yui-log-filtergrp {margin-right:.5em;}
|
||||
.yui-log .info {background-color:#A7CC25;} /* A7CC25 green */
|
||||
.yui-log .warn {background-color:#F58516;} /* F58516 orange */
|
||||
.yui-log .error {background-color:#E32F0B;} /* E32F0B red */
|
||||
.yui-log .time {background-color:#A6C9D7;} /* A6C9D7 blue */
|
||||
.yui-log .window {background-color:#F2E886;} /* F2E886 tan */
|
||||
|
||||
</style>
|
||||
|
||||
|
||||
<div id="container">
|
||||
<img class="ylogo" src="img/logo.gif" alt="" />
|
||||
<div id="containerTop">
|
||||
<div id="header">
|
||||
<h1>
|
||||
|
||||
</h1>
|
||||
<h4> </h4>
|
||||
</div>
|
||||
<div id="main">
|
||||
|
||||
<div id="rightbar">
|
||||
|
||||
<div id="rightBarPad">
|
||||
<h3>Examples</h3>
|
||||
|
||||
<div id="linkage">
|
||||
<ul>
|
||||
<li><a href="default.html?mode=dist">Default tree widget</a></li>
|
||||
<li><a href="dynamic.html?mode=dist">Dynamic load</a></li>
|
||||
|
||||
|
||||
<li><a href="folders.html?mode=dist">Folder view</a></li>
|
||||
<li><a href="menu.html?mode=dist">Menu</a></li>
|
||||
<li><a href="html.html?mode=dist">HTML node</a></li>
|
||||
<li><a href="multi.html?mode=dist">Multiple trees, different styles</a></li>
|
||||
<li><a href="check.html?mode=dist">Task list</a></li>
|
||||
<li><a href="anim.html?mode=dist">Fade animation</a></li>
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<script type="text/javascript">
|
||||
//<![CDATA[
|
||||
YAHOO.example.logApp = function() {
|
||||
var divId;
|
||||
return {
|
||||
init: function(p_divId, p_toggleElId, p_clearElId) {
|
||||
divId = p_divId
|
||||
},
|
||||
|
||||
onload: function() {
|
||||
if (YAHOO.widget.Logger) {
|
||||
new YAHOO.widget.LogReader( "logDiv", { height: "400px" } );
|
||||
}
|
||||
}
|
||||
};
|
||||
} ();
|
||||
|
||||
YAHOO.util.Event.on(window, "load", YAHOO.example.logApp.onload);
|
||||
|
||||
//]]>
|
||||
</script>
|
||||
|
||||
<div id="logDiv"></div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<div id="content">
|
||||
<form name="mainForm" action="javscript:;">
|
||||
<div class="newsItem">
|
||||
<h3>HTML Node</h3>
|
||||
<p>
|
||||
|
||||
</p>
|
||||
|
||||
<div id="expandcontractdiv">
|
||||
<a href="javascript:tree.expandAll()">Expand all</a>
|
||||
<a href="javascript:tree.collapseAll()">Collapse all</a>
|
||||
</div>
|
||||
<div id="treeDiv1"></div>
|
||||
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<div id="footerContainer">
|
||||
<div id="footer">
|
||||
<p> </p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<script type="text/javascript">
|
||||
|
||||
var tree;
|
||||
|
||||
function treeInit() {
|
||||
buildRandomTextNodeTree();
|
||||
}
|
||||
|
||||
function buildRandomTextNodeTree() {
|
||||
tree = new YAHOO.widget.TreeView("treeDiv1");
|
||||
|
||||
for (var i = 0; i < Math.floor((Math.random()*4) + 3); i++) {
|
||||
var tmpNode = new YAHOO.widget.TextNode("label-" + i, tree.getRoot(), false);
|
||||
buildRandomTextBranch(tmpNode);
|
||||
// var tmpNode2 = new YAHOO.widget.HTMLNode("label-" + i, tree.getRoot(), false, true);
|
||||
buildRandomTextBranch(tmpNode);
|
||||
// buildRandomTextBranch(tmpNode2);
|
||||
}
|
||||
|
||||
tree.draw();
|
||||
}
|
||||
|
||||
var callback = null;
|
||||
|
||||
function buildRandomTextBranch(node) {
|
||||
if (node.depth < 3) {
|
||||
YAHOO.log("buildRandomTextBranch: " + node.index);
|
||||
for ( var i = 0; i < Math.floor(Math.random() * 4) + 1 ; i++ ) {
|
||||
tmpNode = new YAHOO.widget.TextNode(node.label + "-" + i, node, false);
|
||||
// tmpNode2 = new YAHOO.widget.HTMLNode(node.html + "-" + i, node, false, true);
|
||||
// if (node.depth == 2) {
|
||||
buildRandomHTMLBranch(tmpNode);
|
||||
// buildRandomHTMLBranch(tmpNode2);
|
||||
// } else {
|
||||
// buildRandomTextBranch(tmpNode);
|
||||
// }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
var counter = 0;
|
||||
function buildRandomHTMLBranch(node) {
|
||||
YAHOO.log("buildRandomHTMLBranch: " + node.index);
|
||||
|
||||
var id = "htmlnode_" + counter++;
|
||||
|
||||
var html = '<div id="' + id + '"' +
|
||||
' onmouseover="enableDragDrop(this, \'' + id + '\')"' +
|
||||
' style="border:1px solid #aaaaaa; ' +
|
||||
' position:relative; ' +
|
||||
' height:100px; width:200px; ' +
|
||||
' margin-bottom:10px; ' +
|
||||
' background-color: #c5dbfc">' +
|
||||
'Info ' + id + '</div>';
|
||||
|
||||
// new YAHOO.widget.HTMLNode(html, node, false, true);
|
||||
new YAHOO.widget.HTMLNode(html, node, false, false);
|
||||
}
|
||||
|
||||
function enableDragDrop(el, id) {
|
||||
new YAHOO.util.DD(id);
|
||||
el.onmouseover = null;
|
||||
}
|
||||
|
||||
YAHOO.util.Event.addListener(window, "load", treeInit);
|
||||
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 172 B |
Binary file not shown.
|
Before Width: | Height: | Size: 608 B |
Binary file not shown.
|
Before Width: | Height: | Size: 609 B |
Binary file not shown.
|
Before Width: | Height: | Size: 622 B |
Binary file not shown.
|
Before Width: | Height: | Size: 94 B |
Binary file not shown.
|
Before Width: | Height: | Size: 106 B |
Binary file not shown.
|
Before Width: | Height: | Size: 142 B |
Binary file not shown.
|
Before Width: | Height: | Size: 2.6 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 130 B |
Binary file not shown.
|
Before Width: | Height: | Size: 111 B |
Binary file not shown.
|
Before Width: | Height: | Size: 545 B |
Binary file not shown.
|
Before Width: | Height: | Size: 563 B |
Binary file not shown.
|
Before Width: | Height: | Size: 504 B |
Binary file not shown.
|
Before Width: | Height: | Size: 539 B |
Binary file not shown.
|
Before Width: | Height: | Size: 568 B |
Binary file not shown.
|
Before Width: | Height: | Size: 503 B |
Binary file not shown.
|
Before Width: | Height: | Size: 94 B |
Binary file not shown.
|
Before Width: | Height: | Size: 106 B |
Binary file not shown.
|
Before Width: | Height: | Size: 142 B |
Binary file not shown.
|
Before Width: | Height: | Size: 2.6 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 130 B |
Binary file not shown.
|
Before Width: | Height: | Size: 111 B |
Binary file not shown.
|
Before Width: | Height: | Size: 545 B |
Binary file not shown.
|
Before Width: | Height: | Size: 563 B |
Binary file not shown.
|
Before Width: | Height: | Size: 504 B |
Binary file not shown.
|
Before Width: | Height: | Size: 539 B |
Binary file not shown.
|
Before Width: | Height: | Size: 568 B |
Binary file not shown.
|
Before Width: | Height: | Size: 503 B |
Binary file not shown.
|
Before Width: | Height: | Size: 666 B |
Binary file not shown.
|
Before Width: | Height: | Size: 677 B |
Binary file not shown.
|
Before Width: | Height: | Size: 142 B |
Binary file not shown.
|
Before Width: | Height: | Size: 2.6 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 641 B |
Binary file not shown.
|
Before Width: | Height: | Size: 651 B |
Binary file not shown.
|
Before Width: | Height: | Size: 1.3 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.3 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 504 B |
Binary file not shown.
|
Before Width: | Height: | Size: 1.2 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.2 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 503 B |
Binary file not shown.
|
Before Width: | Height: | Size: 197 B |
Binary file not shown.
|
Before Width: | Height: | Size: 203 B |
Binary file not shown.
|
Before Width: | Height: | Size: 705 B |
Binary file not shown.
|
Before Width: | Height: | Size: 56 B |
Binary file not shown.
|
Before Width: | Height: | Size: 67 B |
Binary file not shown.
|
Before Width: | Height: | Size: 64 B |
Binary file not shown.
|
Before Width: | Height: | Size: 114 B |
Binary file not shown.
|
Before Width: | Height: | Size: 57 B |
Binary file not shown.
|
Before Width: | Height: | Size: 66 B |
Binary file not shown.
|
Before Width: | Height: | Size: 65 B |
Binary file not shown.
|
Before Width: | Height: | Size: 2.6 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 875 B |
Binary file not shown.
|
Before Width: | Height: | Size: 1.3 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 385 B |
Binary file not shown.
|
Before Width: | Height: | Size: 2 KiB |
|
|
@ -1,44 +0,0 @@
|
|||
|
||||
|
||||
<!doctype html public "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<title>Yahoo! UI Library - Tree Control</title>
|
||||
<link rel="stylesheet" type="text/css" media="screen" href="css/screen.css">
|
||||
</head>
|
||||
<body style="height:100%">
|
||||
<img src="img/logo.gif" style="position:absolute;top:5px;left:5px" />
|
||||
|
||||
<div id="pageTitle">
|
||||
<h3>Tree Control</h3>
|
||||
</div>
|
||||
<div id="content">
|
||||
<form name="dragDropForm" action="javscript:;">
|
||||
<div class="newsItem">
|
||||
<p> </p>
|
||||
<p> </p>
|
||||
<p> </p>
|
||||
<p><a href="default.html?mode=dist">Default TreeView widget</a></p>
|
||||
<p><a href="dynamic.html?mode=dist">Dynamic load</a></p>
|
||||
<p><a href="folders.html?mode=dist">Folder style</a></p>
|
||||
<p><a href="menu.html?mode=dist">Menu style</a></p>
|
||||
<p><a href="html.html?mode=dist">HTML node</a></p>
|
||||
<p><a href="multi.html?mode=dist">Mutiple trees, different styles</a></p>
|
||||
<p><a href="check.html?mode=dist">Task list</a></p>
|
||||
<p><a href="anim.html?mode=dist">Fade animation</a></p>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div id="footerContainer">
|
||||
<div id="footer">
|
||||
<p> </p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,23 +0,0 @@
|
|||
/* Copyright (c) 2006 Yahoo! Inc. All rights reserved. */
|
||||
|
||||
YAHOO.example.CheckOnClickNode = function(oData, oParent, expanded, checked) {
|
||||
if (oParent) {
|
||||
this.init(oData, oParent, expanded);
|
||||
this.setUpLabel(oData);
|
||||
this.checked = checked;
|
||||
}
|
||||
};
|
||||
|
||||
YAHOO.example.CheckOnClickNode.prototype = new YAHOO.widget.TaskNode();
|
||||
|
||||
YAHOO.example.CheckOnClickNode.prototype.getCheckLink = function() {
|
||||
return "var n=YAHOO.widget.TreeView.getNode(\'" + this.tree.id + "\'," +
|
||||
this.index + "); " +
|
||||
"var r = n.checkClick(); " +
|
||||
"YAHOO.example.customCheckClickFunction(n);" +
|
||||
"return r;";
|
||||
};
|
||||
|
||||
YAHOO.example.customCheckClickFunction = function(node) {
|
||||
alert(node.checked + "(" + node.checkState + ")");
|
||||
};
|
||||
253
www/extras/yui/examples/treeview/js/TaskNode.js
vendored
253
www/extras/yui/examples/treeview/js/TaskNode.js
vendored
|
|
@ -1,253 +0,0 @@
|
|||
/**
|
||||
* The check box marks a task complete. It is a simulated form field
|
||||
* with three states ...
|
||||
* 0=unchecked, 1=some children checked, 2=all children checked
|
||||
* When a task is clicked, the state of the nodes and parent and children
|
||||
* are updated, and this behavior cascades.
|
||||
*
|
||||
* @extends YAHOO.widget.TextNode
|
||||
* @constructor
|
||||
* @param oData {object} A string or object containing the data that will
|
||||
* be used to render this node.
|
||||
* @param oParent {Node} This node's parent node
|
||||
* @param expanded {boolean} The initial expanded/collapsed state
|
||||
* @param checked {boolean} The initial checked/unchecked state
|
||||
*/
|
||||
YAHOO.widget.TaskNode = function(oData, oParent, expanded, checked) {
|
||||
|
||||
if (oData) {
|
||||
this.init(oData, oParent, expanded);
|
||||
this.setUpLabel(oData);
|
||||
if (checked && checked === true) {
|
||||
this.check();
|
||||
}
|
||||
|
||||
/*
|
||||
if (!this.tree.checkClickEvent) {
|
||||
this.tree.checkClickEvent =
|
||||
new YAHOO.util.CustomEvent("checkclick", this.tree);
|
||||
}
|
||||
*/
|
||||
}
|
||||
|
||||
this.logger = new YAHOO.widget.LogWriter(this.toString());
|
||||
};
|
||||
|
||||
YAHOO.widget.TaskNode.prototype = new YAHOO.widget.TextNode();
|
||||
|
||||
/**
|
||||
* True if checkstate is 1 (some children checked) or 2 (all children checked),
|
||||
* false if 0.
|
||||
* @type boolean
|
||||
*/
|
||||
YAHOO.widget.TaskNode.prototype.checked = false;
|
||||
|
||||
/**
|
||||
* checkState
|
||||
* 0=unchecked, 1=some children checked, 2=all children checked
|
||||
* @type int
|
||||
*/
|
||||
YAHOO.widget.TaskNode.prototype.checkState = 0;
|
||||
|
||||
/**
|
||||
* The id of the check element
|
||||
* @type string
|
||||
*/
|
||||
YAHOO.widget.TaskNode.prototype.getCheckElId = function() {
|
||||
return "ygtvcheck" + this.index;
|
||||
};
|
||||
|
||||
/**
|
||||
* Returns the check box element
|
||||
* @return the check html element (img)
|
||||
*/
|
||||
YAHOO.widget.TaskNode.prototype.getCheckEl = function() {
|
||||
return document.getElementById(this.getCheckElId());
|
||||
};
|
||||
|
||||
/**
|
||||
* The style of the check element, derived from its current state
|
||||
* @return {string} the css style for the current check state
|
||||
*/
|
||||
YAHOO.widget.TaskNode.prototype.getCheckStyle = function() {
|
||||
return "ygtvcheck" + this.checkState;
|
||||
};
|
||||
|
||||
/**
|
||||
* Returns the link that will invoke this node's check toggle
|
||||
* @return {string} returns the link required to adjust the checkbox state
|
||||
*/
|
||||
YAHOO.widget.TaskNode.prototype.getCheckLink = function() {
|
||||
return "YAHOO.widget.TreeView.getNode(\'" + this.tree.id + "\'," +
|
||||
this.index + ").checkClick()";
|
||||
};
|
||||
|
||||
/**
|
||||
* Invoked when the user clicks the check box
|
||||
*/
|
||||
YAHOO.widget.TaskNode.prototype.checkClick = function() {
|
||||
this.logger.log("previous checkstate: " + this.checkState);
|
||||
if (this.checkState === 0) {
|
||||
this.check();
|
||||
} else {
|
||||
this.uncheck();
|
||||
}
|
||||
|
||||
// this.tree.checkClickEvent.fire(this);
|
||||
|
||||
this.onCheckClick();
|
||||
};
|
||||
|
||||
/**
|
||||
* Override to get the check click event
|
||||
*/
|
||||
YAHOO.widget.TaskNode.prototype.onCheckClick = function() {
|
||||
this.logger.log("check was clicked");
|
||||
}
|
||||
|
||||
/**
|
||||
* Refresh the state of this node's parent, and cascade up.
|
||||
*/
|
||||
YAHOO.widget.TaskNode.prototype.updateParent = function() {
|
||||
var p = this.parent;
|
||||
|
||||
if (!p || !p.updateParent) {
|
||||
this.logger.log("Abort udpate parent: " + this.index);
|
||||
return;
|
||||
}
|
||||
|
||||
var somethingChecked = false;
|
||||
var somethingNotChecked = false;
|
||||
|
||||
for (var i=0;i< p.children.length;++i) {
|
||||
if (p.children[i].checked) {
|
||||
somethingChecked = true;
|
||||
// checkState will be 1 if the child node has unchecked children
|
||||
if (p.children[i].checkState == 1) {
|
||||
somethingNotChecked = true;
|
||||
}
|
||||
} else {
|
||||
somethingNotChecked = true;
|
||||
}
|
||||
}
|
||||
|
||||
if (somethingChecked) {
|
||||
p.setCheckState( (somethingNotChecked) ? 1 : 2 );
|
||||
} else {
|
||||
p.setCheckState(0);
|
||||
}
|
||||
|
||||
p.updateCheckHtml();
|
||||
p.updateParent();
|
||||
};
|
||||
|
||||
/**
|
||||
* If the node has been rendered, update the html to reflect the current
|
||||
* state of the node.
|
||||
*/
|
||||
YAHOO.widget.TaskNode.prototype.updateCheckHtml = function() {
|
||||
if (this.parent && this.parent.childrenRendered) {
|
||||
this.getCheckEl().className = this.getCheckStyle();
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* Updates the state. The checked property is true if the state is 1 or 2
|
||||
*
|
||||
* @param the new check state
|
||||
*/
|
||||
YAHOO.widget.TaskNode.prototype.setCheckState = function(state) {
|
||||
this.checkState = state;
|
||||
this.checked = (state > 0);
|
||||
};
|
||||
|
||||
/**
|
||||
* Check this node
|
||||
*/
|
||||
YAHOO.widget.TaskNode.prototype.check = function() {
|
||||
this.logger.log("check");
|
||||
this.setCheckState(2);
|
||||
for (var i=0; i<this.children.length; ++i) {
|
||||
this.children[i].check();
|
||||
}
|
||||
this.updateCheckHtml();
|
||||
this.updateParent();
|
||||
};
|
||||
|
||||
/**
|
||||
* Uncheck this node
|
||||
*/
|
||||
YAHOO.widget.TaskNode.prototype.uncheck = function() {
|
||||
this.setCheckState(0);
|
||||
for (var i=0; i<this.children.length; ++i) {
|
||||
this.children[i].uncheck();
|
||||
}
|
||||
this.updateCheckHtml();
|
||||
this.updateParent();
|
||||
};
|
||||
|
||||
// Overrides YAHOO.widget.TextNode
|
||||
YAHOO.widget.TaskNode.prototype.getNodeHtml = function() {
|
||||
this.logger.log("Generating html");
|
||||
var sb = new Array();
|
||||
|
||||
sb[sb.length] = '<table border="0" cellpadding="0" cellspacing="0">';
|
||||
sb[sb.length] = '<tr>';
|
||||
|
||||
for (i=0;i<this.depth;++i) {
|
||||
sb[sb.length] = '<td class="' + this.getDepthStyle(i) + '"> </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() + '"> ';
|
||||
sb[sb.length] = '</td>';
|
||||
|
||||
// check box
|
||||
sb[sb.length] = '<td';
|
||||
sb[sb.length] = ' id="' + this.getCheckElId() + '"';
|
||||
sb[sb.length] = ' class="' + this.getCheckStyle() + '"';
|
||||
sb[sb.length] = ' onclick="javascript:' + this.getCheckLink() + '">';
|
||||
sb[sb.length] = ' </td>';
|
||||
|
||||
|
||||
sb[sb.length] = '<td>';
|
||||
sb[sb.length] = '<a';
|
||||
sb[sb.length] = ' id="' + this.labelElId + '"';
|
||||
sb[sb.length] = ' class="' + this.labelStyle + '"';
|
||||
sb[sb.length] = ' href="' + this.href + '"';
|
||||
sb[sb.length] = ' target="' + this.target + '"';
|
||||
if (this.hasChildren(true)) {
|
||||
sb[sb.length] = ' onmouseover="document.getElementById(\'';
|
||||
sb[sb.length] = this.getToggleElId() + '\').className=';
|
||||
sb[sb.length] = 'YAHOO.widget.TreeView.getNode(\'';
|
||||
sb[sb.length] = this.tree.id + '\',' + this.index + ').getHoverStyle()"';
|
||||
sb[sb.length] = ' onmouseout="document.getElementById(\'';
|
||||
sb[sb.length] = this.getToggleElId() + '\').className=';
|
||||
sb[sb.length] = 'YAHOO.widget.TreeView.getNode(\'';
|
||||
sb[sb.length] = this.tree.id + '\',' + this.index + ').getStyle()"';
|
||||
}
|
||||
sb[sb.length] = ' >';
|
||||
sb[sb.length] = this.label;
|
||||
sb[sb.length] = '</a>';
|
||||
sb[sb.length] = '</td>';
|
||||
sb[sb.length] = '</tr>';
|
||||
sb[sb.length] = '</table>';
|
||||
|
||||
return sb.join("");
|
||||
|
||||
};
|
||||
|
||||
YAHOO.widget.TaskNode.prototype.toString = function() {
|
||||
return "TaskNode (" + this.index + ") " + this.label;
|
||||
};
|
||||
|
||||
|
|
@ -1,736 +0,0 @@
|
|||
/**
|
||||
* Code Syntax Highlighter.
|
||||
* Version 1.2.0
|
||||
* Copyright (C) 2004 Alex Gorbatchev.
|
||||
* http://www.dreamprojections.com/syntaxhighlighter/
|
||||
*
|
||||
* This library is free software; you can redistribute it and/or modify it under the terms of the GNU Lesser General
|
||||
* Public License as published by the Free Software Foundation; either version 2.1 of the License, or (at your option)
|
||||
* any later version.
|
||||
*
|
||||
* This library is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied
|
||||
* warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU Lesser General Public License for more
|
||||
* details.
|
||||
*
|
||||
* You should have received a copy of the GNU Lesser General Public License along with this library; if not, write to
|
||||
* the Free Software Foundation, Inc., 59 Temple Place, Suite 330, Boston, MA 02111-1307 USA
|
||||
*/
|
||||
|
||||
//
|
||||
// create namespaces
|
||||
//
|
||||
var dp = {
|
||||
sh : // dp.sh
|
||||
{
|
||||
Utils : {}, // dp.sh.Utils
|
||||
Brushes : {}, // dp.sh.Brushes
|
||||
Strings : {}
|
||||
},
|
||||
Version : '1.2.0'
|
||||
};
|
||||
|
||||
dp.sh.Strings = {
|
||||
AboutDialog : '<html><head><title>About...</title></head><body class="dp-about"><table cellspacing="0"><tr><td class="copy"><div class="para title">dp.SyntaxHighlighter</div><div class="para">Version: {V}</div><div class="para"><a href="http://www.dreamprojections.com/sh/?ref=about" target="_blank">http://www.dreamprojections.com/SyntaxHighlighter</a></div>©2004-2005 Alex Gorbatchev. All right reserved.</td></tr><tr><td class="footer"><input type="button" class="close" value="OK" onClick="window.close()"/></td></tr></table></body></html>',
|
||||
|
||||
// tools
|
||||
ExpandCode : '+ expand code',
|
||||
ViewPlain : 'view plain',
|
||||
Print : '',
|
||||
CopyToClipboard : '',
|
||||
About : '',
|
||||
|
||||
CopiedToClipboard : 'The code is in your clipboard now.'
|
||||
};
|
||||
|
||||
dp.SyntaxHighlighter = dp.sh;
|
||||
|
||||
//
|
||||
// Dialog and toolbar functions
|
||||
//
|
||||
|
||||
dp.sh.Utils.Expand = function(sender)
|
||||
{
|
||||
var table = sender;
|
||||
var span = sender;
|
||||
|
||||
// find the span in which the text label and pipe contained so we can hide it
|
||||
while(span != null && span.tagName != 'SPAN')
|
||||
span = span.parentNode;
|
||||
|
||||
// find the table
|
||||
while(table != null && table.tagName != 'TABLE')
|
||||
table = table.parentNode;
|
||||
|
||||
// remove the 'expand code' button
|
||||
span.parentNode.removeChild(span);
|
||||
|
||||
table.tBodies[0].className = 'show';
|
||||
table.parentNode.style.height = '100%'; // containing div isn't getting updated properly when the TBODY is shown
|
||||
}
|
||||
|
||||
// opens a new windows and puts the original unformatted source code inside.
|
||||
dp.sh.Utils.ViewSource = function(sender)
|
||||
{
|
||||
var code = sender.parentNode.originalCode;
|
||||
var wnd = window.open('', '_blank', 'width=750, height=400, location=0, resizable=1, menubar=0, scrollbars=1');
|
||||
|
||||
code = code.replace(/</g, '<');
|
||||
|
||||
wnd.document.write('<pre>' + code + '</pre>');
|
||||
wnd.document.close();
|
||||
}
|
||||
|
||||
// copies the original source code in to the clipboard (IE only)
|
||||
dp.sh.Utils.ToClipboard = function(sender)
|
||||
{
|
||||
var code = sender.parentNode.originalCode;
|
||||
|
||||
// This works only for IE. There's a way to make it work with Mozilla as well,
|
||||
// but it requires security settings changed on the client, which isn't by
|
||||
// default, so 99% of users won't have it working anyways.
|
||||
if(window.clipboardData)
|
||||
{
|
||||
window.clipboardData.setData('text', code);
|
||||
|
||||
alert(dp.sh.Strings.CopiedToClipboard);
|
||||
}
|
||||
}
|
||||
|
||||
// creates an invisible iframe, puts the original source code inside and prints it
|
||||
dp.sh.Utils.PrintSource = function(sender)
|
||||
{
|
||||
var td = sender.parentNode;
|
||||
var code = td.processedCode;
|
||||
var iframe = document.createElement('IFRAME');
|
||||
var doc = null;
|
||||
var wnd =
|
||||
|
||||
// this hides the iframe
|
||||
iframe.style.cssText = 'position:absolute; width:0px; height:0px; left:-5px; top:-5px;';
|
||||
|
||||
td.appendChild(iframe);
|
||||
|
||||
doc = iframe.contentWindow.document;
|
||||
code = code.replace(/</g, '<');
|
||||
|
||||
doc.open();
|
||||
doc.write('<pre>' + code + '</pre>');
|
||||
doc.close();
|
||||
|
||||
iframe.contentWindow.focus();
|
||||
iframe.contentWindow.print();
|
||||
|
||||
td.removeChild(iframe);
|
||||
}
|
||||
|
||||
dp.sh.Utils.About = function()
|
||||
{
|
||||
var wnd = window.open('', '_blank', 'dialog,width=320,height=150,scrollbars=0');
|
||||
var doc = wnd.document;
|
||||
|
||||
var styles = document.getElementsByTagName('style');
|
||||
var links = document.getElementsByTagName('link');
|
||||
|
||||
doc.write(dp.sh.Strings.AboutDialog.replace('{V}', dp.sh.Version));
|
||||
|
||||
// copy over ALL the styles from the parent page
|
||||
for(var i = 0; i < styles.length; i++)
|
||||
doc.write('<style>' + styles[i].innerHTML + '</style>');
|
||||
|
||||
for(var i = 0; i < links.length; i++)
|
||||
if(links[i].rel.toLowerCase() == 'stylesheet')
|
||||
doc.write('<link type="text/css" rel="stylesheet" href="' + links[i].href + '"></link>');
|
||||
|
||||
doc.close();
|
||||
wnd.focus();
|
||||
}
|
||||
|
||||
//
|
||||
// Match object
|
||||
//
|
||||
dp.sh.Match = function(value, index, css)
|
||||
{
|
||||
this.value = value;
|
||||
this.index = index;
|
||||
this.length = value.length;
|
||||
this.css = css;
|
||||
}
|
||||
|
||||
//
|
||||
// Highlighter object
|
||||
//
|
||||
dp.sh.Highlighter = function()
|
||||
{
|
||||
this.addGutter = true;
|
||||
this.addControls = true;
|
||||
this.collapse = false;
|
||||
this.tabsToSpaces = true;
|
||||
}
|
||||
|
||||
// static callback for the match sorting
|
||||
dp.sh.Highlighter.SortCallback = function(m1, m2)
|
||||
{
|
||||
// sort matches by index first
|
||||
if(m1.index < m2.index)
|
||||
return -1;
|
||||
else if(m1.index > m2.index)
|
||||
return 1;
|
||||
else
|
||||
{
|
||||
// if index is the same, sort by length
|
||||
if(m1.length < m2.length)
|
||||
return -1;
|
||||
else if(m1.length > m2.length)
|
||||
return 1;
|
||||
}
|
||||
return 0;
|
||||
}
|
||||
|
||||
// gets a list of all matches for a given regular expression
|
||||
dp.sh.Highlighter.prototype.GetMatches = function(regex, css)
|
||||
{
|
||||
var index = 0;
|
||||
var match = null;
|
||||
|
||||
while((match = regex.exec(this.code)) != null)
|
||||
{
|
||||
this.matches[this.matches.length] = new dp.sh.Match(match[0], match.index, css);
|
||||
}
|
||||
}
|
||||
|
||||
dp.sh.Highlighter.prototype.AddBit = function(str, css)
|
||||
{
|
||||
var span = document.createElement('span');
|
||||
|
||||
str = str.replace(/&/g, '&');
|
||||
str = str.replace(/ /g, ' ');
|
||||
str = str.replace(/</g, '<');
|
||||
str = str.replace(/\n/gm, ' <br>');
|
||||
|
||||
// when adding a piece of code, check to see if it has line breaks in it
|
||||
// and if it does, wrap individual line breaks with span tags
|
||||
if(css != null)
|
||||
{
|
||||
var regex = new RegExp('<br>', 'gi');
|
||||
|
||||
if(regex.test(str))
|
||||
{
|
||||
var lines = str.split(' <br>');
|
||||
|
||||
str = '';
|
||||
|
||||
for(var i = 0; i < lines.length; i++)
|
||||
{
|
||||
span = document.createElement('SPAN');
|
||||
span.className = css;
|
||||
span.innerHTML = lines[i];
|
||||
|
||||
this.div.appendChild(span);
|
||||
|
||||
// don't add a <BR> for the last line
|
||||
if(i + 1 < lines.length)
|
||||
this.div.appendChild(document.createElement('BR'));
|
||||
}
|
||||
}
|
||||
else
|
||||
{
|
||||
span.className = css;
|
||||
span.innerHTML = str;
|
||||
this.div.appendChild(span);
|
||||
}
|
||||
}
|
||||
else
|
||||
{
|
||||
span.innerHTML = str;
|
||||
this.div.appendChild(span);
|
||||
}
|
||||
}
|
||||
|
||||
// checks if one match is inside any other match
|
||||
dp.sh.Highlighter.prototype.IsInside = function(match)
|
||||
{
|
||||
if(match == null || match.length == 0)
|
||||
return;
|
||||
|
||||
for(var i = 0; i < this.matches.length; i++)
|
||||
{
|
||||
var c = this.matches[i];
|
||||
|
||||
if(c == null)
|
||||
continue;
|
||||
|
||||
if((match.index > c.index) && (match.index <= c.index + c.length))
|
||||
return true;
|
||||
}
|
||||
|
||||
return false;
|
||||
}
|
||||
|
||||
dp.sh.Highlighter.prototype.ProcessRegexList = function()
|
||||
{
|
||||
for(var i = 0; i < this.regexList.length; i++)
|
||||
this.GetMatches(this.regexList[i].regex, this.regexList[i].css);
|
||||
}
|
||||
|
||||
dp.sh.Highlighter.prototype.ProcessSmartTabs = function(code)
|
||||
{
|
||||
var lines = code.split('\n');
|
||||
var result = '';
|
||||
var tabSize = 4;
|
||||
var tab = '\t';
|
||||
|
||||
// This function inserts specified amount of spaces in the string
|
||||
// where a tab is while removing that given tab.
|
||||
function InsertSpaces(line, pos, count)
|
||||
{
|
||||
var left = line.substr(0, pos);
|
||||
var right = line.substr(pos + 1, line.length); // pos + 1 will get rid of the tab
|
||||
var spaces = '';
|
||||
|
||||
for(var i = 0; i < count; i++)
|
||||
spaces += ' ';
|
||||
|
||||
return left + spaces + right;
|
||||
}
|
||||
|
||||
// This function process one line for 'smart tabs'
|
||||
function ProcessLine(line, tabSize)
|
||||
{
|
||||
if(line.indexOf(tab) == -1)
|
||||
return line;
|
||||
|
||||
var pos = 0;
|
||||
|
||||
while((pos = line.indexOf(tab)) != -1)
|
||||
{
|
||||
// This is pretty much all there is to the 'smart tabs' logic.
|
||||
// Based on the position within the line and size of a tab,
|
||||
// calculate the amount of spaces we need to insert.
|
||||
var spaces = tabSize - pos % tabSize;
|
||||
|
||||
line = InsertSpaces(line, pos, spaces);
|
||||
}
|
||||
|
||||
return line;
|
||||
}
|
||||
|
||||
// Go through all the lines and do the 'smart tabs' magic.
|
||||
for(var i = 0; i < lines.length; i++)
|
||||
result += ProcessLine(lines[i], tabSize) + '\n';
|
||||
|
||||
return result;
|
||||
}
|
||||
|
||||
dp.sh.Highlighter.prototype.SwitchToTable = function()
|
||||
{
|
||||
// Safari fix: for some reason lowercase <br> isn't getting picked up, even though 'i' is set
|
||||
var lines = this.div.innerHTML.split(/<BR>/gi);
|
||||
var row = null;
|
||||
var cell = null;
|
||||
var tBody = null;
|
||||
var html = '';
|
||||
var pipe = ' | ';
|
||||
|
||||
// creates an anchor to a utility
|
||||
function UtilHref(util, text)
|
||||
{
|
||||
return '<a href="#" onclick="dp.sh.Utils.' + util + '(this); return false;">' + text + '</a>';
|
||||
}
|
||||
|
||||
tBody = document.createElement('TBODY'); // can be created and all others go to tBodies collection.
|
||||
|
||||
this.table.appendChild(tBody);
|
||||
|
||||
if(this.addGutter == true)
|
||||
{
|
||||
row = tBody.insertRow(-1);
|
||||
cell = row.insertCell(-1);
|
||||
cell.className = 'tools-corner';
|
||||
}
|
||||
|
||||
if(this.addControls == true)
|
||||
{
|
||||
var tHead = document.createElement('THEAD'); // controls will be placed in here
|
||||
this.table.appendChild(tHead);
|
||||
|
||||
row = tHead.insertRow(-1);
|
||||
|
||||
// add corner if there's a gutter
|
||||
if(this.addGutter == true)
|
||||
{
|
||||
cell = row.insertCell(-1);
|
||||
cell.className = 'tools-corner';
|
||||
}
|
||||
|
||||
cell = row.insertCell(-1);
|
||||
|
||||
// preserve some variables for the controls
|
||||
cell.originalCode = this.originalCode;
|
||||
cell.processedCode = this.code;
|
||||
cell.className = 'tools';
|
||||
|
||||
if(this.collapse == true)
|
||||
{
|
||||
tBody.className = 'hide';
|
||||
cell.innerHTML += '<span><b>' + UtilHref('Expand', dp.sh.Strings.ExpandCode) + '</b>' + pipe + '</span>';
|
||||
}
|
||||
|
||||
cell.innerHTML += UtilHref('ViewSource', dp.sh.Strings.ViewPlain) ;
|
||||
|
||||
// IE has this clipboard object which is easy enough to use
|
||||
if(window.clipboardData)
|
||||
cell.innerHTML += pipe + UtilHref('ToClipboard', dp.sh.Strings.CopyToClipboard);
|
||||
}
|
||||
|
||||
for(var i = 0; i < lines.length - 1; i++)
|
||||
{
|
||||
row = tBody.insertRow(-1);
|
||||
|
||||
if(this.addGutter == true)
|
||||
{
|
||||
cell = row.insertCell(-1);
|
||||
cell.className = 'gutter';
|
||||
cell.innerHTML = i + 1;
|
||||
}
|
||||
|
||||
cell = row.insertCell(-1);
|
||||
cell.className = 'line' + (i % 2 + 1); // uses .line1 and .line2 css styles for alternating lines
|
||||
cell.innerHTML = lines[i];
|
||||
}
|
||||
|
||||
this.div.innerHTML = '';
|
||||
}
|
||||
|
||||
dp.sh.Highlighter.prototype.Highlight = function(code)
|
||||
{
|
||||
function Trim(str)
|
||||
{
|
||||
return str.replace(/^\s*(.*?)[\s\n]*$/g, '$1');
|
||||
}
|
||||
|
||||
function Chop(str)
|
||||
{
|
||||
return str.replace(/\n*$/, '').replace(/^\n*/, '');
|
||||
}
|
||||
|
||||
function Unindent(str)
|
||||
{
|
||||
var lines = str.split('\n');
|
||||
var indents = new Array();
|
||||
var regex = new RegExp('^\\s*', 'g');
|
||||
var min = 1000;
|
||||
|
||||
// go through every line and check for common number of indents
|
||||
for(var i = 0; i < lines.length && min > 0; i++)
|
||||
{
|
||||
if(Trim(lines[i]).length == 0)
|
||||
continue;
|
||||
|
||||
var matches = regex.exec(lines[i]);
|
||||
|
||||
if(matches != null && matches.length > 0)
|
||||
min = Math.min(matches[0].length, min);
|
||||
}
|
||||
|
||||
// trim minimum common number of white space from the begining of every line
|
||||
if(min > 0)
|
||||
for(var i = 0; i < lines.length; i++)
|
||||
lines[i] = lines[i].substr(min);
|
||||
|
||||
return lines.join('\n');
|
||||
}
|
||||
|
||||
// This function returns a portions of the string from pos1 to pos2 inclusive
|
||||
function Copy(string, pos1, pos2)
|
||||
{
|
||||
return string.substr(pos1, pos2 - pos1);
|
||||
}
|
||||
|
||||
var pos = 0;
|
||||
|
||||
this.originalCode = code;
|
||||
this.code = Chop(Unindent(code));
|
||||
this.div = document.createElement('DIV');
|
||||
this.table = document.createElement('TABLE');
|
||||
this.matches = new Array();
|
||||
|
||||
if(this.CssClass != null)
|
||||
this.table.className = this.CssClass;
|
||||
|
||||
// replace tabs with spaces
|
||||
if(this.tabsToSpaces == true)
|
||||
this.code = this.ProcessSmartTabs(this.code);
|
||||
|
||||
this.table.border = 0;
|
||||
this.table.cellSpacing = 0;
|
||||
this.table.cellPadding = 0;
|
||||
|
||||
this.ProcessRegexList();
|
||||
|
||||
// if no matches found, add entire code as plain text
|
||||
if(this.matches.length == 0)
|
||||
{
|
||||
this.AddBit(this.code, null);
|
||||
this.SwitchToTable();
|
||||
return;
|
||||
}
|
||||
|
||||
// sort the matches
|
||||
this.matches = this.matches.sort(dp.sh.Highlighter.SortCallback);
|
||||
|
||||
// The following loop checks to see if any of the matches are inside
|
||||
// of other matches. This process would get rid of highligting strings
|
||||
// inside comments, keywords inside strings and so on.
|
||||
for(var i = 0; i < this.matches.length; i++)
|
||||
if(this.IsInside(this.matches[i]))
|
||||
this.matches[i] = null;
|
||||
|
||||
// Finally, go through the final list of matches and pull the all
|
||||
// together adding everything in between that isn't a match.
|
||||
for(var i = 0; i < this.matches.length; i++)
|
||||
{
|
||||
var match = this.matches[i];
|
||||
|
||||
if(match == null || match.length == 0)
|
||||
continue;
|
||||
|
||||
this.AddBit(Copy(this.code, pos, match.index), null);
|
||||
this.AddBit(match.value, match.css);
|
||||
|
||||
pos = match.index + match.length;
|
||||
}
|
||||
|
||||
this.AddBit(this.code.substr(pos), null);
|
||||
|
||||
this.SwitchToTable();
|
||||
}
|
||||
|
||||
dp.sh.Highlighter.prototype.GetKeywords = function(str)
|
||||
{
|
||||
return '\\b' + str.replace(/ /g, '\\b|\\b') + '\\b';
|
||||
}
|
||||
|
||||
// highlightes all elements identified by name and gets source code from specified property
|
||||
dp.sh.HighlightAll = function(name, showGutter /* optional */, showControls /* optional */, collapseAll /* optional */)
|
||||
{
|
||||
function FindValue()
|
||||
{
|
||||
var a = arguments;
|
||||
|
||||
for(var i = 0; i < a.length; i++)
|
||||
{
|
||||
if(a[i] == null)
|
||||
continue;
|
||||
|
||||
if(typeof(a[i]) == 'string' && a[i] != '')
|
||||
return a[i] + '';
|
||||
|
||||
if(typeof(a[i]) == 'object' && a[i].value != '')
|
||||
return a[i].value + '';
|
||||
}
|
||||
|
||||
return null;
|
||||
}
|
||||
|
||||
function IsOptionSet(value, list)
|
||||
{
|
||||
for(var i = 0; i < list.length; i++)
|
||||
if(list[i] == value)
|
||||
return true;
|
||||
|
||||
return false;
|
||||
}
|
||||
|
||||
var elements = document.getElementsByName(name);
|
||||
var highlighter = null;
|
||||
var registered = new Object();
|
||||
var propertyName = 'value';
|
||||
|
||||
// if no code blocks found, leave
|
||||
if(elements == null)
|
||||
return;
|
||||
|
||||
// register all brushes
|
||||
for(var brush in dp.sh.Brushes)
|
||||
{
|
||||
var aliases = dp.sh.Brushes[brush].Aliases;
|
||||
|
||||
if(aliases == null)
|
||||
continue;
|
||||
|
||||
for(var i = 0; i < aliases.length; i++)
|
||||
registered[aliases[i]] = brush;
|
||||
}
|
||||
|
||||
for(var i = 0; i < elements.length; i++)
|
||||
{
|
||||
var element = elements[i];
|
||||
var options = FindValue(
|
||||
element.attributes['class'], element.className,
|
||||
element.attributes['language'], element.language
|
||||
);
|
||||
var language = '';
|
||||
|
||||
if(options == null)
|
||||
continue;
|
||||
|
||||
options = options.split(':');
|
||||
|
||||
language = options[0].toLowerCase();
|
||||
|
||||
if(registered[language] == null)
|
||||
continue;
|
||||
|
||||
// instantiate a brush
|
||||
highlighter = new dp.sh.Brushes[registered[language]]();
|
||||
|
||||
// hide the original element
|
||||
element.style.display = 'none';
|
||||
|
||||
highlighter.addGutter = (showGutter == null) ? !IsOptionSet('nogutter', options) : showGutter;
|
||||
highlighter.addControls = (showControls == null) ? !IsOptionSet('nocontrols', options) : showControls;
|
||||
highlighter.collapse = (collapseAll == null) ? IsOptionSet('collapse', options) : collapseAll;
|
||||
|
||||
highlighter.Highlight(element[propertyName]);
|
||||
|
||||
// place the result table inside a div
|
||||
var div = document.createElement('DIV');
|
||||
|
||||
div.className = 'dp-highlighter';
|
||||
div.appendChild(highlighter.table);
|
||||
|
||||
element.parentNode.insertBefore(div, element);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
dp.sh.Brushes.JScript = function()
|
||||
{
|
||||
var keywords = 'abstract boolean break byte case catch char class const continue debugger ' +
|
||||
'default delete do double else enum export extends false final finally float ' +
|
||||
'for function goto if implements import in instanceof int interface long native ' +
|
||||
'new null package private protected public return short static super switch ' +
|
||||
'synchronized this throw throws transient true try typeof var void volatile while with';
|
||||
|
||||
this.regexList = [
|
||||
{ regex: new RegExp('//.*$', 'gm'), css: 'comment' }, // one line comments
|
||||
{ regex: new RegExp('/\\*[\\s\\S]*?\\*/', 'g'), css: 'comment' }, // multiline comments
|
||||
{ regex: new RegExp('"(?:[^"\n]|[\"])*"', 'g'), css: 'string' }, // double quoted strings
|
||||
{ regex: new RegExp("'(?:[^'\n]|[\'])*'", 'g'), css: 'string' }, // single quoted strings
|
||||
{ regex: new RegExp('^\\s*#.*', 'gm'), css: 'preprocessor' }, // preprocessor tags like #region and #endregion
|
||||
{ regex: new RegExp(this.GetKeywords(keywords), 'gm'), css: 'keyword' } // keywords
|
||||
];
|
||||
|
||||
this.CssClass = 'dp-c';
|
||||
}
|
||||
|
||||
dp.sh.Brushes.JScript.prototype = new dp.sh.Highlighter();
|
||||
dp.sh.Brushes.JScript.Aliases = ['js', 'jscript', 'javascript'];
|
||||
|
||||
|
||||
dp.sh.Brushes.Php = function()
|
||||
{
|
||||
var keywords = 'and or xor __FILE__ __LINE__ array as break case ' +
|
||||
'cfunction class const continue declare default die do echo else ' +
|
||||
'elseif empty enddeclare endfor endforeach endif endswitch endwhile eval exit ' +
|
||||
'extends for foreach function global if include include_once isset list ' +
|
||||
'new old_function print require require_once return static switch unset use ' +
|
||||
'var while __FUNCTION__ __CLASS__';
|
||||
|
||||
this.regexList = [
|
||||
{ regex: new RegExp('//.*$', 'gm'), css: 'comment' }, // one line comments
|
||||
{ regex: new RegExp('/\\*[\\s\\S]*?\\*/', 'g'), css: 'comment' }, // multiline comments
|
||||
{ regex: new RegExp('"(?:[^"\n]|[\"])*"', 'g'), css: 'string' }, // double quoted strings
|
||||
{ regex: new RegExp("'(?:[^'\n]|[\'])*'", 'g'), css: 'string' }, // single quoted strings
|
||||
{ regex: new RegExp('\\$\\w+', 'g'), css: 'vars' }, // variables
|
||||
{ regex: new RegExp(this.GetKeywords(keywords), 'gm'), css: 'keyword' } // keyword
|
||||
];
|
||||
|
||||
this.CssClass = 'dp-c';
|
||||
}
|
||||
|
||||
dp.sh.Brushes.Php.prototype = new dp.sh.Highlighter();
|
||||
dp.sh.Brushes.Php.Aliases = ['php'];
|
||||
|
||||
|
||||
|
||||
dp.sh.Brushes.Xml = function()
|
||||
{
|
||||
this.CssClass = 'dp-xml';
|
||||
}
|
||||
|
||||
dp.sh.Brushes.Xml.prototype = new dp.sh.Highlighter();
|
||||
dp.sh.Brushes.Xml.Aliases = ['xml', 'xhtml', 'xslt', 'html', 'xhtml'];
|
||||
|
||||
dp.sh.Brushes.Xml.prototype.ProcessRegexList = function()
|
||||
{
|
||||
function push(array, value)
|
||||
{
|
||||
array[array.length] = value;
|
||||
}
|
||||
|
||||
/* If only there was a way to get index of a group within a match, the whole XML
|
||||
could be matched with the expression looking something like that:
|
||||
|
||||
(<!\[CDATA\[\s*.*\s*\]\]>)
|
||||
| (<!--\s*.*\s*?-->)
|
||||
| (<)*(\w+)*\s*(\w+)\s*=\s*(".*?"|'.*?'|\w+)(/*>)*
|
||||
| (</?)(.*?)(/?>)
|
||||
*/
|
||||
var index = 0;
|
||||
var match = null;
|
||||
var regex = null;
|
||||
|
||||
// Match CDATA in the following format <![ ... [ ... ]]>
|
||||
// <\!\[[\w\s]*?\[(.|\s)*?\]\]>
|
||||
this.GetMatches(new RegExp('<\\!\\[[\\w\\s]*?\\[(.|\\s)*?\\]\\]>', 'gm'), 'cdata');
|
||||
|
||||
// Match comments
|
||||
// <!--\s*.*\s*?-->
|
||||
this.GetMatches(new RegExp('<!--\\s*.*\\s*?-->', 'gm'), 'comments');
|
||||
|
||||
// Match attributes and their values
|
||||
// (\w+)\s*=\s*(".*?"|\'.*?\'|\w+)*
|
||||
regex = new RegExp('([\\w-\.]+)\\s*=\\s*(".*?"|\'.*?\'|\\w+)*', 'gm');
|
||||
while((match = regex.exec(this.code)) != null)
|
||||
{
|
||||
push(this.matches, new dp.sh.Match(match[1], match.index, 'attribute'));
|
||||
|
||||
// if xml is invalid and attribute has no property value, ignore it
|
||||
if(match[2] != undefined)
|
||||
{
|
||||
push(this.matches, new dp.sh.Match(match[2], match.index + match[0].indexOf(match[2]), 'attribute-value'));
|
||||
}
|
||||
}
|
||||
|
||||
// Match opening and closing tag brackets
|
||||
// </*\?*(?!\!)|/*\?*>
|
||||
this.GetMatches(new RegExp('</*\\?*(?!\\!)|/*\\?*>', 'gm'), 'tag');
|
||||
|
||||
// Match tag names
|
||||
// </*\?*\s*(\w+)
|
||||
regex = new RegExp('</*\\?*\\s*([\\w-\.]+)', 'gm');
|
||||
while((match = regex.exec(this.code)) != null)
|
||||
{
|
||||
push(this.matches, new dp.sh.Match(match[1], match.index + match[0].indexOf(match[1]), 'tag-name'));
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
dp.sh.Brushes.CSS = function()
|
||||
{
|
||||
var keywords = 'link over active visited';
|
||||
|
||||
this.regexList = [
|
||||
{ regex: new RegExp('/\\*[\\s\\S]*?\\*/', 'g'), css: 'comment' }, // multiline comments
|
||||
{ regex: new RegExp('"(?:[^"\n]|[\"])*"', 'g'), css: 'string' }, // double quoted strings
|
||||
{ regex: new RegExp("'(?:[^'\n]|[\'])*'", 'g'), css: 'string' }, // single quoted strings
|
||||
{ regex: new RegExp('^\\s*#.*', 'gm'), css: 'preprocessor' }, // preprocessor tags like #region and #endregion
|
||||
{ regex: new RegExp(this.GetKeywords(keywords), 'gm'), css: 'keyword' } // keywords
|
||||
];
|
||||
|
||||
this.CssClass = 'dp-c';
|
||||
}
|
||||
|
||||
dp.sh.Brushes.CSS.prototype = new dp.sh.Highlighter();
|
||||
dp.sh.Brushes.CSS.Aliases = ['css'];
|
||||
150
www/extras/yui/examples/treeview/js/json.js
vendored
150
www/extras/yui/examples/treeview/js/json.js
vendored
|
|
@ -1,150 +0,0 @@
|
|||
/*
|
||||
Copyright (c) 2005 JSON.org
|
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||
of this software and associated documentation files (the "Software"), to deal
|
||||
in the Software without restriction, including without limitation the rights
|
||||
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||
copies of the Software, and to permit persons to whom the Software is
|
||||
furnished to do so, subject to the following conditions:
|
||||
|
||||
The Software shall be used for Good, not Evil.
|
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
||||
SOFTWARE.
|
||||
*/
|
||||
|
||||
/*
|
||||
The global object JSON contains two methods.
|
||||
|
||||
JSON.stringify(value) takes a JavaScript value and produces a JSON text.
|
||||
The value must not be cyclical.
|
||||
|
||||
JSON.parse(text) takes a JSON text and produces a JavaScript value. It will
|
||||
throw a 'JSONError' exception if there is an error.
|
||||
*/
|
||||
var JSON = {
|
||||
copyright: '(c)2005 JSON.org',
|
||||
license: 'http://www.crockford.com/JSON/license.html',
|
||||
/*
|
||||
Stringify a JavaScript value, producing a JSON text.
|
||||
*/
|
||||
stringify: function (v) {
|
||||
var a = [];
|
||||
|
||||
/*
|
||||
Emit a string.
|
||||
*/
|
||||
function e(s) {
|
||||
a[a.length] = s;
|
||||
}
|
||||
|
||||
/*
|
||||
Convert a value.
|
||||
*/
|
||||
function g(x) {
|
||||
var c, i, l, v;
|
||||
|
||||
switch (typeof x) {
|
||||
case 'object':
|
||||
if (x) {
|
||||
if (x instanceof Array) {
|
||||
e('[');
|
||||
l = a.length;
|
||||
for (i = 0; i < x.length; i += 1) {
|
||||
v = x[i];
|
||||
if (typeof v != 'undefined' &&
|
||||
typeof v != 'function') {
|
||||
if (l < a.length) {
|
||||
e(',');
|
||||
}
|
||||
g(v);
|
||||
}
|
||||
}
|
||||
e(']');
|
||||
return;
|
||||
} else if (typeof x.valueOf == 'function') {
|
||||
e('{');
|
||||
l = a.length;
|
||||
for (i in x) {
|
||||
v = x[i];
|
||||
if (typeof v != 'undefined' &&
|
||||
typeof v != 'function' &&
|
||||
(!v || typeof v != 'object' ||
|
||||
typeof v.valueOf == 'function')) {
|
||||
if (l < a.length) {
|
||||
e(',');
|
||||
}
|
||||
g(i);
|
||||
e(':');
|
||||
g(v);
|
||||
}
|
||||
}
|
||||
return e('}');
|
||||
}
|
||||
}
|
||||
e('null');
|
||||
return;
|
||||
case 'number':
|
||||
e(isFinite(x) ? +x : 'null');
|
||||
return;
|
||||
case 'string':
|
||||
l = x.length;
|
||||
e('"');
|
||||
for (i = 0; i < l; i += 1) {
|
||||
c = x.charAt(i);
|
||||
if (c >= ' ') {
|
||||
if (c == '\\' || c == '"') {
|
||||
e('\\');
|
||||
}
|
||||
e(c);
|
||||
} else {
|
||||
switch (c) {
|
||||
case '\b':
|
||||
e('\\b');
|
||||
break;
|
||||
case '\f':
|
||||
e('\\f');
|
||||
break;
|
||||
case '\n':
|
||||
e('\\n');
|
||||
break;
|
||||
case '\r':
|
||||
e('\\r');
|
||||
break;
|
||||
case '\t':
|
||||
e('\\t');
|
||||
break;
|
||||
default:
|
||||
c = c.charCodeAt();
|
||||
e('\\u00' + Math.floor(c / 16).toString(16) +
|
||||
(c % 16).toString(16));
|
||||
}
|
||||
}
|
||||
}
|
||||
e('"');
|
||||
return;
|
||||
case 'boolean':
|
||||
e(String(x));
|
||||
return;
|
||||
default:
|
||||
e('null');
|
||||
return;
|
||||
}
|
||||
}
|
||||
g(v);
|
||||
return a.join('');
|
||||
},
|
||||
/*
|
||||
Parse a JSON text, producing a JavaScript value.
|
||||
*/
|
||||
parse: function (text) {
|
||||
return (/^(\s+|[,:{}\[\]]|"(\\["\\\/bfnrtu]|[^\x00-\x1f"\\]+)*"|-?\d+(\.\d*)?([eE][+-]?\d+)?|true|false|null)+$/.test(text)) &&
|
||||
eval('(' + text + ')');
|
||||
}
|
||||
};
|
||||
34
www/extras/yui/examples/treeview/js/key.js
vendored
34
www/extras/yui/examples/treeview/js/key.js
vendored
|
|
@ -1,34 +0,0 @@
|
|||
/* Copyright (c) 2006 Yahoo! Inc. All rights reserved. */
|
||||
|
||||
YAHOO.util.Key = new function() {
|
||||
// this.logger = new ygLogger("ygEventUtil");
|
||||
// DOM key constants
|
||||
this.DOM_VK_UNDEFINED = 0x0;
|
||||
this.DOM_VK_RIGHT_ALT = 0x12;
|
||||
this.DOM_VK_LEFT_ALT = 0x12;
|
||||
this.DOM_VK_LEFT_CONTROL = 0x11;
|
||||
this.DOM_VK_RIGHT_CONTROL = 0x11;
|
||||
this.DOM_VK_LEFT_SHIFT = 0x10;
|
||||
this.DOM_VK_RIGHT_SHIFT = 0x10;
|
||||
this.DOM_VK_META = 0x9D;
|
||||
this.DOM_VK_BACK_SPACE = 0x08;
|
||||
this.DOM_VK_CAPS_LOCK = 0x14;
|
||||
this.DOM_VK_DELETE = 0x7F;
|
||||
this.DOM_VK_END = 0x23;
|
||||
this.DOM_VK_ENTER = 0x0D;
|
||||
this.DOM_VK_ESCAPE = 0x1B;
|
||||
this.DOM_VK_HOME = 0x24;
|
||||
this.DOM_VK_NUM_LOCK = 0x90;
|
||||
this.DOM_VK_PAUSE = 0x13;
|
||||
this.DOM_VK_PRINTSCREEN = 0x9A;
|
||||
this.DOM_VK_SCROLL_LOCK = 0x91;
|
||||
this.DOM_VK_SPACE = 0x20;
|
||||
this.DOM_VK_TAB = 0x09;
|
||||
this.DOM_VK_LEFT = 0x25;
|
||||
this.DOM_VK_RIGHT = 0x27;
|
||||
this.DOM_VK_UP = 0x26;
|
||||
this.DOM_VK_DOWN = 0x28;
|
||||
this.DOM_VK_PAGE_DOWN = 0x22;
|
||||
this.DOM_VK_PAGE_UP = 0x21;
|
||||
};
|
||||
|
||||
15
www/extras/yui/examples/treeview/js/log.js
vendored
15
www/extras/yui/examples/treeview/js/log.js
vendored
|
|
@ -1,15 +0,0 @@
|
|||
// Adapter for YAHOO.widget.Logger
|
||||
|
||||
var ygLogger = function(module) {
|
||||
return new YAHOO.widget.LogWriter(module);
|
||||
};
|
||||
|
||||
YAHOO.widget.LogWriter.prototype.debug = function() {
|
||||
this.log.apply(this, arguments);
|
||||
};
|
||||
|
||||
ygLogger.init = function(div) {
|
||||
new YAHOO.widget.LogReader(div, {
|
||||
height: "400px"
|
||||
});
|
||||
};
|
||||
|
|
@ -1,246 +0,0 @@
|
|||
<!doctype html public "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
<head>
|
||||
<title>Yahoo! UI Library - Tree Control</title>
|
||||
<link rel="stylesheet" type="text/css" href="css/screen.css">
|
||||
<style type="text/css">
|
||||
.emLabel, .emLabel:link, .emLabel:visited, .emLabel:hover {
|
||||
font-weight: bold;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body onload="treeInit()">
|
||||
|
||||
<link rel="stylesheet" type="text/css" href="css/menu/tree.css">
|
||||
|
||||
<div id="pageTitle">
|
||||
<h3>Tree Control</h3>
|
||||
</div>
|
||||
|
||||
<script type="text/javascript" src="../../build/yahoo/yahoo.js" ></script>
|
||||
|
||||
<!-- The following are required for the logger -->
|
||||
<script type="text/javascript" src="../../build/event/event.js"></script>
|
||||
<script type="text/javascript" src="../../build/dom/dom.js"></script>
|
||||
<script type="text/javascript" src="../../build/logger/logger.js"></script>
|
||||
<!-- End logger reqs -->
|
||||
|
||||
<script type="text/javascript" src="../../build/treeview/treeview-debug.js" ></script>
|
||||
|
||||
<style type="text/css">
|
||||
|
||||
/* logger default styles */
|
||||
/* font size is controlled here: default 77% */
|
||||
#yui-log {position:absolute;top:1em;right:1em;font-size:77%;text-align:left;}
|
||||
/* width is controlled here: default 31em */
|
||||
.yui-log {background-color:#AAA;border:1px solid black;font-family:monospace;z-index:9000;}
|
||||
.yui-log p {margin:1px;padding:.1em;}
|
||||
.yui-log button {font-family:monospace;}
|
||||
.yui-log .yui-log-hd {padding:.5em;background-color:#575757;color:#FFF;}
|
||||
/* height is controlled here: default 20em*/
|
||||
.yui-log .yui-log-bd {width:100%;height:20em;background-color:#FFF;border:1px solid gray;overflow:auto;}
|
||||
.yui-log .yui-log-ft {margin-top:.5em;margin-bottom:1em;}
|
||||
.yui-log .yui-log-ft .yui-log-categoryfilters {}
|
||||
.yui-log .yui-log-ft .yui-log-sourcefilters {width:100%;border-top:1px solid #575757;margin-top:.75em;padding-top:.75em;}
|
||||
.yui-log .yui-log-btns {position:relative;float:right;bottom:.25em;}
|
||||
.yui-log .yui-log-filtergrp {margin-right:.5em;}
|
||||
.yui-log .info {background-color:#A7CC25;} /* A7CC25 green */
|
||||
.yui-log .warn {background-color:#F58516;} /* F58516 orange */
|
||||
.yui-log .error {background-color:#E32F0B;} /* E32F0B red */
|
||||
.yui-log .time {background-color:#A6C9D7;} /* A6C9D7 blue */
|
||||
.yui-log .window {background-color:#F2E886;} /* F2E886 tan */
|
||||
|
||||
</style>
|
||||
|
||||
|
||||
<div id="container">
|
||||
<img class="ylogo" src="img/logo.gif" alt="" />
|
||||
<div id="containerTop">
|
||||
<div id="header">
|
||||
<h1>
|
||||
|
||||
</h1>
|
||||
<h4> </h4>
|
||||
</div>
|
||||
<div id="main">
|
||||
|
||||
<div id="rightbar">
|
||||
|
||||
<div id="rightBarPad">
|
||||
<h3>Examples</h3>
|
||||
|
||||
<div id="linkage">
|
||||
<ul>
|
||||
<li><a href="default.html?mode=dist">Default tree widget</a></li>
|
||||
<li><a href="dynamic.html?mode=dist">Dynamic load</a></li>
|
||||
|
||||
|
||||
<li><a href="folders.html?mode=dist">Folder view</a></li>
|
||||
<li><a href="menu.html?mode=dist">Menu</a></li>
|
||||
<li><a href="html.html?mode=dist">HTML node</a></li>
|
||||
<li><a href="multi.html?mode=dist">Multiple trees, different styles</a></li>
|
||||
<li><a href="check.html?mode=dist">Task list</a></li>
|
||||
<li><a href="anim.html?mode=dist">Fade animation</a></li>
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<script type="text/javascript">
|
||||
//<![CDATA[
|
||||
YAHOO.example.logApp = function() {
|
||||
var divId;
|
||||
return {
|
||||
init: function(p_divId, p_toggleElId, p_clearElId) {
|
||||
divId = p_divId
|
||||
},
|
||||
|
||||
onload: function() {
|
||||
if (YAHOO.widget.Logger) {
|
||||
new YAHOO.widget.LogReader( "logDiv", { height: "400px" } );
|
||||
}
|
||||
}
|
||||
};
|
||||
} ();
|
||||
|
||||
YAHOO.util.Event.on(window, "load", YAHOO.example.logApp.onload);
|
||||
|
||||
//]]>
|
||||
</script>
|
||||
|
||||
<div id="logDiv"></div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<div id="content">
|
||||
<form name="mainForm" action="javscript:;">
|
||||
<div class="newsItem">
|
||||
<h3>Menu TreeView Widget</h3>
|
||||
<p>
|
||||
The presentation differences between the default treeview widget and this
|
||||
one were accomplished by modifying the css styles in tree.css. The
|
||||
functionality is the same, except the menu does not allow multiple siblings
|
||||
to be expanded at one time (when you expand a node, all of its expanded
|
||||
siblings are collapsed.
|
||||
</p>
|
||||
|
||||
<div id="expandcontractdiv">
|
||||
<a href="javascript:tree.expandAll()">Expand all</a>
|
||||
<a href="javascript:tree.collapseAll()">Collapse all</a>
|
||||
</div>
|
||||
<div id="treeDiv1"></div>
|
||||
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<div id="footerContainer">
|
||||
<div id="footer">
|
||||
<p> </p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<script type="text/javascript">
|
||||
|
||||
var tree;
|
||||
var nodes = new Array();
|
||||
var nodeIndex = 0;
|
||||
|
||||
function treeInit() {
|
||||
buildRandomTextNodeTree();
|
||||
}
|
||||
|
||||
function buildRandomTextNodeTree() {
|
||||
tree = new YAHOO.widget.TreeView("treeDiv1");
|
||||
tree.onExpand = function(node) {
|
||||
// alert(node.index + " was expanded");
|
||||
}
|
||||
|
||||
tree.onCollapse = function(node) {
|
||||
// alert(node.index + " was collapsed");
|
||||
}
|
||||
|
||||
for (var i = 0; i < Math.floor((Math.random()*4) + 3); i++) {
|
||||
var thisId = nodeIndex++;
|
||||
var thisLabel = "menu" + i;
|
||||
// nodes[thisId] = new YAHOO.widget.TextNode({ label: thisLabel }, tree.getRoot(), false);
|
||||
// nodes[thisId] = new YAHOO.widget.MenuNode({label:thisLabel, href:"http://asdf"}, tree.getRoot(), false);
|
||||
nodes[thisId] = new YAHOO.widget.MenuNode(thisLabel, tree.getRoot(), false);
|
||||
|
||||
var p1 = nodes[thisId];
|
||||
var l1 = thisLabel;
|
||||
|
||||
for (var j = 0; j < Math.floor(Math.random()*6) + 1; j++) {
|
||||
thisId = nodeIndex++;
|
||||
thisLabel = l1 + "-" + j;
|
||||
// nodes[thisId] = new YAHOO.widget.TextNode({ label: thisLabel }, p1, true);
|
||||
nodes[thisId] = new YAHOO.widget.MenuNode(thisLabel, p1, false);
|
||||
|
||||
var p2 = nodes[thisId];
|
||||
var l2 = thisLabel;
|
||||
|
||||
for (var k =0; k < Math.floor(Math.random()*6) + 1; k++) {
|
||||
thisId = nodeIndex++;
|
||||
thisLabel = l2 + "-" + k;
|
||||
|
||||
/*
|
||||
var data = {
|
||||
id: thisId,
|
||||
label: thisLabel,
|
||||
href: "javascript:onLabelClick(" + thisId + ")"
|
||||
}
|
||||
*/
|
||||
|
||||
var data = {
|
||||
label: thisLabel,
|
||||
href: "javascript:void(window.open('http://www.yahoo.com'))"
|
||||
}
|
||||
nodes[thisId] = new YAHOO.widget.TextNode(data, p2, false);
|
||||
nodes[thisId].labelStyle = "emLabel";
|
||||
|
||||
// nodes[thisId] = new YAHOO.widget.MenuNode(thisLabel, p2, false);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
// nodes[0] = new YAHOO.widget.TextNode(tree.getRoot(), false, "label-0");
|
||||
tree.draw();
|
||||
}
|
||||
|
||||
var selectedId = null;
|
||||
function onLabelClick(id) {
|
||||
|
||||
var node = tree.getNodeByProperty("id", id);
|
||||
// alert(node.label);
|
||||
|
||||
var el = node.getLabelEl()
|
||||
|
||||
YAHOO.log("pos: " + YAHOO.util.Dom.getXY(el));
|
||||
|
||||
el.style.backgroundColor = "#c5dbfc";
|
||||
|
||||
|
||||
if (selectedId != null) {
|
||||
node = tree.getNodeByProperty("id", selectedId);
|
||||
node.getLabelEl().style.backgroundColor = "white";
|
||||
}
|
||||
|
||||
selectedId = id;
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Loading…
Add table
Add a link
Reference in a new issue