File "index.html"
Full Path: /home/analogde/www/files03/other/jsTree/index.html
File size: 17.66 KB
MIME-type: text/html
Charset: 8 bit
<!---------------------------------------------------------------
| Copyright notice
|
| (c) 2003-2004 Tobias Bender (tobias@phpXplorer.org)
| All rights reserved
|
| This script is part of the jsTree project. The jsTree project is
| free software; you can redistribute it and/or modify
| it under the terms of the GNU General Public License as published by
| the Free Software Foundation; either version 2 of the License, or
| (at your option) any later version.
|
| The GNU General Public License can be found at
| http://www.gnu.org/copyleft/gpl.html.
| A copy is found in the textfile GPL.txt distributed with these scripts.
|
| This script 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 General Public License for more details.
|
| This copyright notice MUST APPEAR in all copies of the script!
---------------------------------------------------------------->
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>jsTree - open source JavaScript treeview control</title>
<script src="jsTree.js" type="text/javascript" language="JavaScript"></script>
<script language="JavaScript" type="text/javascript">
<!--
var newNodeCount = 0
var de_nodeContextMenu =
[
['Knoten anfügen ', ['javascript:var sd = "{@strData}";var newName = prompt("Name", "new node " + (++newNodeCount));if(newName){var newLink = prompt("Link", "#");if(newLink){addNode(getPath(sd.substr(0, sd.length - 3)), [newName, [newLink]], true)}}',,'add']],
['Knoten löschen ', ['javascript:var sd = "{@strData}";deleteNode(getPath(sd.substr(0, sd.length - 3)))',,'delete']],
['Link ändern ', ['javascript:var sd = "{@strData}";var newLink = prompt("Link", eval(sd.substr(0, sd.length-6))[1][0]);if(newLink){eval(sd.substr(0, sd.length-6))[1][0] = newLink;rebuildNode(getPath(sd.substr(0, sd.length-3)), true)}',,'href']],
['Zielfenster ändern ', ['javascript:var sd = "{@strData}";var newLink = prompt("Zielfenster", eval(sd.substr(0, sd.length-6))[1][1]);if(newLink){eval(sd.substr(0, sd.length-6))[1][1] = newLink;rebuildNode(getPath(sd.substr(0, sd.length-3)), true)}',,'target']],
['Bild ändern ', ['javascript:var sd = "{@strData}";var newIcon = prompt("Bild", eval(sd.substr(0, sd.length-6))[1][2] ? eval(sd.substr(0, sd.length-6))[1][2] : "node");if(newIcon){eval(sd.substr(0, sd.length-6))[1][2] = newIcon;rebuildNode(getPath(sd.substr(0, sd.length-3)), true)}',,'icon']],
['Hinweis ändern ', ['javascript:var sd = "{@strData}";var newTooltip = prompt("Hinweis", eval(sd.substr(0, sd.length-6))[1][3] ? eval(sd.substr(0, sd.length-6))[1][3] : "");if(newTooltip){eval(sd.substr(0, sd.length-6))[1][3] = newTooltip;rebuildNode(getPath(sd.substr(0, sd.length-3)), true)}',,'tooltip']]
]
var en_nodeContextMenu =
[
['Add node ', ['javascript:var sd = "{@strData}";var newName = prompt("Name", "new node " + (++newNodeCount));if(newName){var newLink = prompt("Link", "#");if(newLink){addNode(getPath(sd.substr(0, sd.length - 3)), [newName, [newLink]], true)}}',,'add']],
['Delete node ', ['javascript:var sd = "{@strData}";deleteNode(getPath(sd.substr(0, sd.length - 3)))',,'delete']],
['Change link ', ['javascript:var sd = "{@strData}";var newLink = prompt("Link", eval(sd.substr(0, sd.length-6))[1][0]);if(newLink){eval(sd.substr(0, sd.length-6))[1][0] = newLink;rebuildNode(getPath(sd.substr(0, sd.length-3)), true)}',,'href']],
['Change target frame ', ['javascript:var sd = "{@strData}";var newLink = prompt("Target frame", eval(sd.substr(0, sd.length-6))[1][1]);if(newLink){eval(sd.substr(0, sd.length-6))[1][1] = newLink;rebuildNode(getPath(sd.substr(0, sd.length-3)), true)}',,'target']],
['Change icon ', ['javascript:var sd = "{@strData}";var newIcon = prompt("Icon", eval(sd.substr(0, sd.length-6))[1][2] ? eval(sd.substr(0, sd.length-6))[1][2] : "node");if(newIcon){eval(sd.substr(0, sd.length-6))[1][2] = newIcon;rebuildNode(getPath(sd.substr(0, sd.length-3)), true)}',,'icon']],
['Change tooltip ', ['javascript:var sd = "{@strData}";var newTooltip = prompt("Tooltip", eval(sd.substr(0, sd.length-6))[1][3] ? eval(sd.substr(0, sd.length-6))[1][3] : "");if(newTooltip){eval(sd.substr(0, sd.length-6))[1][3] = newTooltip;rebuildNode(getPath(sd.substr(0, sd.length-3)), true)}',,'tooltip']]
]
jst_context_menu = de_nodeContextMenu
function _foo(){}
var arrNodes =
[
['The Simpsons', ['javascript:_foo()'],
[
['Epsisodes', ['javascript:_foo()'],
[
['Season One (1989-1990)', ['javascript:_foo()'],
[
['The Simpsons Christmas Special', ['javascript:alert("It´s a not-so-merry Christmas for the Simpsons, when Mr. Burns decides to cut the Christmas bonuses and Marge had to spend the Christmas savings to erase a tattoo Bart thought would make a great Christmas present. In order to hide the fact that he did not get the bonus, Homer takes a second job as a store Santa.")',,'movie','17 Dec 1989']],
['Bart the Genius', ['javascript:alert("Bart swaps IQ tests with the class brain, and ends up the butt of everyone´s jokes at a school for gifted kids.")',,'movie','14 Jan 1990']],
['Homer\'s Odyssey', ['javascript:alert("Homer gets fired for causing another accident at the nuclear plant, and almost commits suicide. He see the light, and becomes a safety activist, and soon goes after the plant he was fired from.")',,'movie','21 Jan 1990']],
['There\'s No Disgrace Like Home', ['javascript:alert("After seeing family bliss at the recent family picnic, Homer sells the TV and goes to a psychiatrist advertised on TV.")',,'movie','28 Jan 1990']],
['Bart the General', ['javascript:alert("When Bart gets beat up by the school bully for defending Lisa, he organizes his friends to go after the bully.")',,'movie','04 Feb 1990']],
['Moaning Lisa', ['javascript:alert("Lisa is feeling down and blue about the problems around her, and meets a fellow blues musician, Bleedin´ Gums Murphy.")',,'movie','11 Feb 1990']],
['Call of the Simpsons', ['javascript:alert("It´s a camping misadventure for the Simpsons. First, the Simpson´s get lost in the woods and lose all their camping equipment. Then, Bart and Homer go get help, but get washed down a waterfall, and lose all their clothes. Meanwhile, Maggie meets up with some bears. Then, Homer is mistaken for Big Foot.")',,'movie','18 Feb 1990']],
['The Telltale Head', ['javascript:alert("In order to impress some bad kids at school, Bart cuts off the head of a statue of the town´s founder, Jebediah Obediah Zacariah Jenadiah Springfield. Unfortunately, this stunt shocks the whole town.")',,'movie','25 Feb 1990']],
['Life on the Fast Lane', ['javascript:alert("Homer gives Marge a bowling ball for her birthday, intending to use it for himself. However, Marge vows to learn how to bowl, and ends up getting intimate with Jacques, her bowling teacher.")',,'movie','18 Mar 1990']],
['Homer\'s Night Out', ['javascript:alert("Using his new mail-order spy camera, Bart catches Homer dancing with a strip dancer at a stag party.")',,'movie','25 Mar 1990']],
['The Crepes of Wrath', ['javascript:alert("After flushing a cherry bomb down the school toilet, Bart is sent to France via a student exchange, and ends up working for some crooks who want to put anti-freeze in the wine. Meanwhile, the Simpsons receive Adil Hoxha, an Albanian exchange student who is actually a spy.")',,'movie','15 Apr 1990']],
['Krusty Gets Busted', ['javascript:alert("When Krusty the Klown is caught robbing the Kwik-E-Mart, Bart vows to clear his hero´s name, even though the robbery was witnessed by his father, Homer.")',,'movie','29 Apr 1990']],
['Some Enchanted Evening', ['javascript:alert("When Marge calls a radio shrink and tells that their marriage is failing, Homer takes Marge out to a nice dinner and a night at the Offramp Inn. However, the sitter they hired was featured that night on America´s Most Armed and Dangerous.")',,'movie','13 May 1990']]
]
]
]
],
['Characters', ['javascript:_foo()'],
[
['Homer Simpson', ['javascript:alert("No!")',,'homer']],
['Marge Simpson', ['javascript:alert("A little pinch of LSD, that is all i need!")',,'marge']],
['Bart Simpson', ['javascript:alert("Ey Caramba!")',,'bart']],
['Lisa Simpson', ['javascript:alert("E = M * C")',,'lisa']],
['Maggie Simpson', ['javascript:alert("snhk snhk!")',,'maggie']]
]
]
]
]
]
var jst_container = "document.getElementById('treeContainer')"
var jst_image_folder = "test_images"
function writeVariables(){
var c = new Array()
var f = document.forms[0]
for(var v in varDefs){
var cc = ""
cc = "var " + varDefs[v].varName
switch(varDefs[v].varType){
case 'String':
var d = '"' + eval("f." + varDefs[v].varName + ".value") + '"'
if(d != '""')
cc += " = " + d
break
case 'Array':
var d = eval("f." + varDefs[v].varName + ".value")
if(d != "")
cc += " = " + d
break
case 'Boolean':
var d = eval("f." + varDefs[v].varName + ".value")
if(d != "")
cc += " = " + d
break
case 'Integer':
var d = eval("f." + varDefs[v].varName + ".value")
if(d != "")
cc += " = " + d
break
}
c.push(cc)
}
f.varOutput.value = c.join("\n")
}
function varDef(varName, varType, varDefaultValue, varDesc){
this.varName = varName
this.varType = varType
this.varDefaultValue = varDefaultValue
this.varDesc = varDesc
}
var varDefs = new Array()
varDefs.push(new varDef(
'jst_delimiter', 'Array', '[\'|\', \'<|>\']',
'The first delimiter separates node names in a treeview path.<br>The second is used for separating multiple paths.'))
varDefs.push(new varDef(
'jst_id', 'String', 'jsTree',
'Unique ID for treeview instance.'))
varDefs.push(new varDef(
'jst_container', 'String', 'document.getElementById(\'treeContainer\')',
'The treeview gets rendered into the HTML node returned by this JavaScript expression.'))
varDefs.push(new varDef(
'jst_data', 'String', 'arrNodes',
'Name of the Array which contains the treeview definition. See jsTree definition for details.'))
varDefs.push(new varDef(
'jst_expandAll_warning', 'String', 'Expanding all nodes can take a while depending on your hardware! Continue?',
'If not empty users has to confirm before all nodes are expanded.'))
varDefs.push(new varDef(
'jst_target', 'String', '',
'Default target for all nodes which have not got a target defined.'))
varDefs.push(new varDef(
'jst_context_menu', 'Array', '',
'Default context menu array for all nodes which have not got a target defined.'))
varDefs.push(new varDef(
'jst_highlight', 'Boolean', 'true',
'If set to false nodes will not be highlighted on click, select, add, delete ...'))
varDefs.push(new varDef(
'jst_highlight_color', 'String', 'white',
'Text color for highlighted nodes.'))
varDefs.push(new varDef(
'jst_highlight_bg', 'String', 'navy',
'Background color for highlighted nodes.'))
varDefs.push(new varDef(
'jst_highlight_padding', 'String', '1px',
'Space in pixels between node text and background color rectangle on highlighted nodes.'))
varDefs.push(new varDef(
'jst_image_folder', 'String', './test_images',
'Folder which contains all images used in the treeview.'))
varDefs.push(new varDef(
'jst_reloading', 'Boolean', 'false',
'If set to true child nodes get loaded until the parent node is expanded.'))
varDefs.push(new varDef(
'jst_reload_frame', 'String', 'reLoader',
'HTML Iframe for reloading reloading nodes on expand.'))
varDefs.push(new varDef(
'jst_reload_script', 'String', 'tree_jsTree_reload.php',
'Server side script for reloading nodes.<br>See www.phpxplorer.org for example.'))
varDefs.push(new varDef(
'jst_reloading_status', 'String', 'loading tree nodes ...',
'Status bar message while reloading nodes.'))
var c = new Array()
c.push('<table cellspacing="0" cellpadding="10" border="0" style="border:1px solid #888888">')
c.push('<tr><td colspan="3" class="title">jsTree configuration variables</td></tr>')
for(var v in varDefs){
c.push('<tr>')
c.push('<td class="variable"><b>' + varDefs[v].varName + '</b> (<span class="typename">' + varDefs[v].varType + '</span>)</td>')
c.push('<td><input onChange="writeVariables()" style="width:150px" type="text" name="' + varDefs[v].varName + '" value="' + varDefs[v].varDefaultValue + '" class="code"></td>')
c.push('<td class="description" style="width:400px" valign="top">' + varDefs[v].varDesc + '</td>')
c.push('</tr>')
}
c.push('<tr><td colspan="3"><textarea name="varOutput" style="width:100%;height:100px"></textarea><br><a href="javascript: var x = eval(document.forms[0].varOutput.value);renderTree()">set</a></td></tr></table>')
var variableDefs = c.join("")
//-->
</script>
<link rel="stylesheet" type="text/css" href="./jsTree.css"/>
<style type="text/css">
<!--
td{
color: #666666;
font-family: Verdana
}
.typename{
color: #888888
}
td.variable{
font-size: 12px;
font-family: Verdana
}
td.description{
font-size: 12px;
font-family: Verdana;
color: #888888
}
td.title{
background-color: #77aadd;
color: white;
font-weight: bold;
padding: 3px;
font-size: 12px
}
td.code{
font-family: Courier New;
font-size: 12px;
background-color: #fefefe;
width: 300px;
border: 1px solid #888888;
padding: 10px;
color: #003366
}
input.code{
font-size: 12px;
font-family: Courier New;
width: 100%;
color: #666666
}
textarea{
color: #888888
}
a:link{
color: #666666;
}
a:visited{
color: #666666;
}
a:hover{
color: #993300;
font-weight: bould;
}
-->
</style>
</head>
<body onLoad="renderTree();document.getElementById('varDefContainer').innerHTML = variableDefs;writeVariables()">
<form method="post" action="./" name="frm1">
<table>
<tr>
<td style="font-size:12px;color:#444444;line-height:20px">
<br>
<img src="./logo.png" alt="" vspace="0" style="vertical-align:text-bottom"> is an open soure treeview control written in JavaScript.<br><br>
I wrote the script for my <a href="http://www.phpxplorer.org" target="phpxplorer" style="font-weight:bold"><span style="color:#003399">php</span><span style="color:#aaaaaa">X</span><span style="color:003399">plorer</span></a> system. The script is not intended to be a website menu.<br>
Due to use of the DOM the script only works in modern browsers like MSIE > 5.0, Netscape/Mozilla/Firefox and Opera.<br>
Without support for dead Browsers the size of the script is only 12kb and there are no browser switches inside the code.<br>
A funny feature is that the treeview is able to define its data definition by itself.<br>
Try to click on the node images of this little example tree with the left mouse button.<br><br>
<div id="treeContainer"></div>
<br>
<a href="./jsTree.zip" style="color:#993300">Download Version 1.0</a><br>
<br>
<table cellspacing="0" cellpadding="10" border="0" style="border:1px solid #888888">
<tr><td class="title">jsTree testing</td></tr>
<tr>
<td style="font-size:12px;color:#444444;line-height:20px">
<a href="javascript:renderTree()"><b>renderTree</b>()</a> •
<a href="javascript:expandAll()"><b>expandAll</b>()</a> •
<a href="javascript:closeAll()"><b>closeAll</b>()</a> •
<a href="javascript:var x = document.forms[0].text.value = getState()"><i><textarea></i> = <b>getState</b>()</a> •
<a href="javascript:var x = setState(document.forms[0].text.value)"><b>setState</b>(<i><textarea></i>)</a><br>
<a href="javascript:var x = document.forms[0].text.value = getDefinition()"><i><textarea></i> = <b>getDefinition</b>()</a> •
<a href="javascript:var x = eval(document.forms[0].text.value)"><b>setDefinition</b>(<i><textarea></i>)</a> •
<a href="javascript:var x = selectNode('The Simpsons|Characters|Bart Simpson')"><b>selectNode</b>('The Simpsons|Characters|Bart Simpson')</a>
</td>
</tr>
<tr><td><textarea wrap="off" name="text" style="width:100%;height:100px"></textarea><br><a href="javascript:var x = document.forms[0].text.value=''">clear</a></td></tr>
</table>
<br>
The following table describes the configuration variables that can be overwritten.<br>
The JavaScript code with variable declaration in the textarea below gets updated each time<br>
you will change one of the values in the input boxes.
Click on the "set" link below the textarea for testing changes with the example tree.
<br><br>
<div id="varDefContainer"></div>
<br><br>
<table border="0" cellspacing="0" cellpadding="0">
<tr><td class="title">jsTree definition</td></tr>
<tr><td class="code">
<span class="typename">Folder definition</span>: top folder
<br><br>
<table border="0" cellspacing="0" cellpadding="0" style="margin-left: 20px">
<tr><td class="title">Folder definition</td></tr>
<tr><td class="code">
[<br>
<span class="typename">Node definition</span>: node1,<br>
<span class="typename">Node definition</span>: node2<br>
]
<br><br>
<table border="0" cellspacing="0" cellpadding="0" style="margin-left: 40px">
<tr><td class="title">Node definition</td></tr>
<tr><td class="code">
[<br>
<span class="typename">String</span>: node name,<br>
[<br>
<span class="typename">String</span>: href,<br>
<span class="typename">String</span>: target,<br>
<span class="typename">String</span>: image,<br>
<span class="typename">String</span>: tooltip,<br>
<span class="typename">Folder definition</span>: node context menu<br>
],<br>
<span class="typename">Folder definition</span>: sub folder<br>
]
</td></tr>
</table>
</td></tr>
</table>
</td></tr>
</table>
</td>
</tr>
</table>
</form>
</body>
</html>