Add frontend assets and plugin bundles

Add the legacy frontend themes, scripts, and plugin assets required by the main SPOTA interfaces.
This commit is contained in:
Power BI Dev
2026-05-02 10:09:32 +07:00
parent efdb11db3f
commit a52c2a8462
2061 changed files with 513282 additions and 0 deletions

File diff suppressed because it is too large Load Diff

View File

@@ -0,0 +1,919 @@
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" >
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" >
<meta name="ROBOTS" content="NOARCHIVE">
<link rel="icon" type="image/vnd.microsoft.icon" href="http://www.gstatic.com/codesite/ph/images/phosting.ico">
<script type="text/javascript">
var codesite_token = null;
var CS_env = {"projectHomeUrl":"/p/dynatree","loggedInUserEmail":null,"profileUrl":null,"projectName":"dynatree","domainName":null,"relativeBaseUrl":"","assetHostPath":"http://www.gstatic.com/codesite/ph","token":null,"assetVersionPath":"http://www.gstatic.com/codesite/ph/15490321151412058579"};
var _gaq = _gaq || [];
_gaq.push(
['siteTracker._setAccount', 'UA-18071-1'],
['siteTracker._trackPageview']);
_gaq.push(
['projectTracker._setAccount', 'UA-316028-3'],
['projectTracker._trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(ga);
})();
</script>
<title>MIT-License.txt -
dynatree -
Dynatree is a JavaScript dynamic tree view plugin for jQuery with support for persistence, keyboard, checkboxes, drag&#39;n&#39;drop, and lazy loading. - Google Project Hosting
</title>
<link type="text/css" rel="stylesheet" href="http://www.gstatic.com/codesite/ph/15490321151412058579/css/core.css">
<link type="text/css" rel="stylesheet" href="http://www.gstatic.com/codesite/ph/15490321151412058579/css/ph_detail.css" >
<link type="text/css" rel="stylesheet" href="http://www.gstatic.com/codesite/ph/15490321151412058579/css/d_sb.css" >
<!--[if IE]>
<link type="text/css" rel="stylesheet" href="http://www.gstatic.com/codesite/ph/15490321151412058579/css/d_ie.css" >
<![endif]-->
<style type="text/css">
.menuIcon.off { background: no-repeat url(http://www.gstatic.com/codesite/ph/images/dropdown_sprite.gif) 0 -42px }
.menuIcon.on { background: no-repeat url(http://www.gstatic.com/codesite/ph/images/dropdown_sprite.gif) 0 -28px }
.menuIcon.down { background: no-repeat url(http://www.gstatic.com/codesite/ph/images/dropdown_sprite.gif) 0 0; }
tr.inline_comment {
background: #fff;
vertical-align: top;
}
div.draft, div.published {
padding: .3em;
border: 1px solid #999;
margin-bottom: .1em;
font-family: arial, sans-serif;
max-width: 60em;
}
div.draft {
background: #ffa;
}
div.published {
background: #e5ecf9;
}
div.published .body, div.draft .body {
padding: .5em .1em .1em .1em;
max-width: 60em;
white-space: pre-wrap;
white-space: -moz-pre-wrap;
white-space: -pre-wrap;
white-space: -o-pre-wrap;
word-wrap: break-word;
font-size: 1em;
}
div.draft .actions {
margin-left: 1em;
font-size: 90%;
}
div.draft form {
padding: .5em .5em .5em 0;
}
div.draft textarea, div.published textarea {
width: 95%;
height: 10em;
font-family: arial, sans-serif;
margin-bottom: .5em;
}
.nocursor, .nocursor td, .cursor_hidden, .cursor_hidden td {
background-color: white;
height: 2px;
}
.cursor, .cursor td {
background-color: darkblue;
height: 2px;
display: '';
}
.list {
border: 1px solid white;
border-bottom: 0;
}
</style>
</head>
<body class="t4">
<script type="text/javascript">
window.___gcfg = {lang: 'en'};
(function()
{var po = document.createElement("script");
po.type = "text/javascript"; po.async = true;po.src = "https://apis.google.com/js/plusone.js";
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(po, s);
})();
</script>
<div class="headbg">
<div id="gaia">
<span>
<a href="#" id="projects-dropdown" onclick="return false;"><u>My favorites</u> <small>&#9660;</small></a>
| <a href="https://www.google.com/accounts/ServiceLogin?service=code&amp;ltmpl=phosting&amp;continue=http%3A%2F%2Fcode.google.com%2Fp%2Fdynatree%2Fsource%2Fbrowse%2Ftrunk%2Fsrc%2FMIT-License.txt&amp;followup=http%3A%2F%2Fcode.google.com%2Fp%2Fdynatree%2Fsource%2Fbrowse%2Ftrunk%2Fsrc%2FMIT-License.txt" onclick="_CS_click('/gb/ph/signin');"><u>Sign in</u></a>
</span>
</div>
<div class="gbh" style="left: 0pt;"></div>
<div class="gbh" style="right: 0pt;"></div>
<div style="height: 1px"></div>
<!--[if lte IE 7]>
<div style="text-align:center;">
Your version of Internet Explorer is not supported. Try a browser that
contributes to open source, such as <a href="http://www.firefox.com">Firefox</a>,
<a href="http://www.google.com/chrome">Google Chrome</a>, or
<a href="http://code.google.com/chrome/chromeframe/">Google Chrome Frame</a>.
</div>
<![endif]-->
<table style="padding:0px; margin: 0px 0px 10px 0px; width:100%" cellpadding="0" cellspacing="0"
itemscope itemtype="http://schema.org/CreativeWork">
<tr style="height: 58px;">
<td id="plogo">
<link itemprop="url" href="/p/dynatree">
<a href="/p/dynatree/">
<img src="http://www.gstatic.com/codesite/ph/images/defaultlogo.png" alt="Logo" itemprop="image">
</a>
</td>
<td style="padding-left: 0.5em">
<div id="pname">
<a href="/p/dynatree/"><span itemprop="name">dynatree</span></a>
</div>
<div id="psum">
<a id="project_summary_link"
href="/p/dynatree/"><span itemprop="description">Dynatree is a JavaScript dynamic tree view plugin for jQuery with support for persistence, keyboard, checkboxes, drag&#39;n&#39;drop, and lazy loading.</span></a>
</div>
</td>
<td style="white-space:nowrap;text-align:right; vertical-align:bottom;">
<form action="/hosting/search">
<input size="30" name="q" value="" type="text">
<input type="submit" name="projectsearch" value="Search projects" >
</form>
</tr>
</table>
</div>
<div id="mt" class="gtb">
<a href="/p/dynatree/" class="tab ">Project&nbsp;Home</a>
<a href="/p/dynatree/downloads/list" class="tab ">Downloads</a>
<a href="/p/dynatree/w/list" class="tab ">Wiki</a>
<a href="/p/dynatree/issues/list"
class="tab ">Issues</a>
<a href="/p/dynatree/source/checkout"
class="tab active">Source</a>
<div class=gtbc></div>
</div>
<table cellspacing="0" cellpadding="0" width="100%" align="center" border="0" class="st">
<tr>
<td class="subt">
<div class="st2">
<div class="isf">
<span class="inst1"><a href="/p/dynatree/source/checkout">Checkout</a></span> &nbsp;
<span class="inst2"><a href="/p/dynatree/source/browse/">Browse</a></span> &nbsp;
<span class="inst3"><a href="/p/dynatree/source/list">Changes</a></span> &nbsp;
</form>
<script type="text/javascript">
function codesearchQuery(form) {
var query = document.getElementById('q').value;
if (query) { form.action += '%20' + query; }
}
</script>
</div>
</div>
</td>
<td align="right" valign="top" class="bevel-right"></td>
</tr>
</table>
<script type="text/javascript">
var cancelBubble = false;
function _go(url) { document.location = url; }
</script>
<div id="maincol"
>
<div class="expand">
<div id="colcontrol">
<style type="text/css">
#file_flipper { white-space: nowrap; padding-right: 2em; }
#file_flipper.hidden { display: none; }
#file_flipper .pagelink { color: #0000CC; text-decoration: underline; }
#file_flipper #visiblefiles { padding-left: 0.5em; padding-right: 0.5em; }
</style>
<table id="nav_and_rev" class="list"
cellpadding="0" cellspacing="0" width="100%">
<tr>
<td nowrap="nowrap" class="src_crumbs src_nav" width="33%">
<strong class="src_nav">Source path:&nbsp;</strong>
<span id="crumb_root">
<a href="/p/dynatree/source/browse/">svn</a>/&nbsp;</span>
<span id="crumb_links" class="ifClosed"><a href="/p/dynatree/source/browse/trunk/">trunk</a><span class="sp">/&nbsp;</span><a href="/p/dynatree/source/browse/trunk/src/">src</a><span class="sp">/&nbsp;</span>MIT-License.txt</span>
</td>
<td nowrap="nowrap" width="33%" align="right">
<table cellpadding="0" cellspacing="0" style="font-size: 100%"><tr>
<td class="flipper">
<ul class="leftside">
<li><a href="/p/dynatree/source/browse/trunk/src/MIT-License.txt?r=596" title="Previous">&lsaquo;r596</a></li>
</ul>
</td>
<td class="flipper"><b>r680</b></td>
</tr></table>
</td>
</tr>
</table>
<div class="fc">
<style type="text/css">
.undermouse span {
background-image: url(http://www.gstatic.com/codesite/ph/images/comments.gif); }
</style>
<table class="opened" id="review_comment_area"
><tr>
<td id="nums">
<pre><table width="100%"><tr class="nocursor"><td></td></tr></table></pre>
<pre><table width="100%" id="nums_table_0"><tr id="gr_svn680_1"
><td id="1"><a href="#1">1</a></td></tr
><tr id="gr_svn680_2"
><td id="2"><a href="#2">2</a></td></tr
><tr id="gr_svn680_3"
><td id="3"><a href="#3">3</a></td></tr
><tr id="gr_svn680_4"
><td id="4"><a href="#4">4</a></td></tr
><tr id="gr_svn680_5"
><td id="5"><a href="#5">5</a></td></tr
><tr id="gr_svn680_6"
><td id="6"><a href="#6">6</a></td></tr
><tr id="gr_svn680_7"
><td id="7"><a href="#7">7</a></td></tr
></table></pre>
<pre><table width="100%"><tr class="nocursor"><td></td></tr></table></pre>
</td>
<td id="lines">
<pre><table width="100%"><tr class="cursor_stop cursor_hidden"><td></td></tr></table></pre>
<pre ><table id="src_table_0"><tr
id=sl_svn680_1
><td class="source">Copyright (c) 2006-2012 Martin Wendt (http://wwWendt.de)<br></td></tr
><tr
id=sl_svn680_2
><td class="source"><br></td></tr
><tr
id=sl_svn680_3
><td class="source">Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the &quot;Software&quot;), 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:<br></td></tr
><tr
id=sl_svn680_4
><td class="source"><br></td></tr
><tr
id=sl_svn680_5
><td class="source">The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.<br></td></tr
><tr
id=sl_svn680_6
><td class="source"><br></td></tr
><tr
id=sl_svn680_7
><td class="source">THE SOFTWARE IS PROVIDED &quot;AS IS&quot;, 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.<br></td></tr
></table></pre>
<pre><table width="100%"><tr class="cursor_stop cursor_hidden"><td></td></tr></table></pre>
</td>
</tr></table>
<script type="text/javascript">
var lineNumUnderMouse = -1;
function gutterOver(num) {
gutterOut();
var newTR = document.getElementById('gr_svn680_' + num);
if (newTR) {
newTR.className = 'undermouse';
}
lineNumUnderMouse = num;
}
function gutterOut() {
if (lineNumUnderMouse != -1) {
var oldTR = document.getElementById(
'gr_svn680_' + lineNumUnderMouse);
if (oldTR) {
oldTR.className = '';
}
lineNumUnderMouse = -1;
}
}
var numsGenState = {table_base_id: 'nums_table_'};
var srcGenState = {table_base_id: 'src_table_'};
var alignerRunning = false;
var startOver = false;
function setLineNumberHeights() {
if (alignerRunning) {
startOver = true;
return;
}
numsGenState.chunk_id = 0;
numsGenState.table = document.getElementById('nums_table_0');
numsGenState.row_num = 0;
if (!numsGenState.table) {
return; // Silently exit if no file is present.
}
srcGenState.chunk_id = 0;
srcGenState.table = document.getElementById('src_table_0');
srcGenState.row_num = 0;
alignerRunning = true;
continueToSetLineNumberHeights();
}
function rowGenerator(genState) {
if (genState.row_num < genState.table.rows.length) {
var currentRow = genState.table.rows[genState.row_num];
genState.row_num++;
return currentRow;
}
var newTable = document.getElementById(
genState.table_base_id + (genState.chunk_id + 1));
if (newTable) {
genState.chunk_id++;
genState.row_num = 0;
genState.table = newTable;
return genState.table.rows[0];
}
return null;
}
var MAX_ROWS_PER_PASS = 1000;
function continueToSetLineNumberHeights() {
var rowsInThisPass = 0;
var numRow = 1;
var srcRow = 1;
while (numRow && srcRow && rowsInThisPass < MAX_ROWS_PER_PASS) {
numRow = rowGenerator(numsGenState);
srcRow = rowGenerator(srcGenState);
rowsInThisPass++;
if (numRow && srcRow) {
if (numRow.offsetHeight != srcRow.offsetHeight) {
numRow.firstChild.style.height = srcRow.offsetHeight + 'px';
}
}
}
if (rowsInThisPass >= MAX_ROWS_PER_PASS) {
setTimeout(continueToSetLineNumberHeights, 10);
} else {
alignerRunning = false;
if (startOver) {
startOver = false;
setTimeout(setLineNumberHeights, 500);
}
}
}
function initLineNumberHeights() {
// Do 2 complete passes, because there can be races
// between this code and prettify.
startOver = true;
setTimeout(setLineNumberHeights, 250);
window.onresize = setLineNumberHeights;
}
initLineNumberHeights();
</script>
<div id="log">
<div style="text-align:right">
<a class="ifCollapse" href="#" onclick="_toggleMeta(this); return false">Show details</a>
<a class="ifExpand" href="#" onclick="_toggleMeta(this); return false">Hide details</a>
</div>
<div class="ifExpand">
<div class="pmeta_bubble_bg" style="border:1px solid white">
<div class="round4"></div>
<div class="round2"></div>
<div class="round1"></div>
<div class="box-inner">
<div id="changelog">
<p>Change log</p>
<div>
<a href="/p/dynatree/source/detail?spec=svn680&amp;r=606">r606</a>
by moo...@wwwendt.de
on Jun 11, 2012
&nbsp; <a href="/p/dynatree/source/diff?spec=svn680&r=606&amp;format=side&amp;path=/trunk/src/MIT-License.txt&amp;old_path=/trunk/src/MIT-License.txt&amp;old=596">Diff</a>
</div>
<pre>minor docs</pre>
</div>
<script type="text/javascript">
var detail_url = '/p/dynatree/source/detail?r=606&spec=svn680';
var publish_url = '/p/dynatree/source/detail?r=606&spec=svn680#publish';
// describe the paths of this revision in javascript.
var changed_paths = [];
var changed_urls = [];
changed_paths.push('/trunk/doc/sample.js');
changed_urls.push('/p/dynatree/source/browse/trunk/doc/sample.js?r\x3d606\x26spec\x3dsvn680');
changed_paths.push('/trunk/jquery/README.txt');
changed_urls.push('/p/dynatree/source/browse/trunk/jquery/README.txt?r\x3d606\x26spec\x3dsvn680');
changed_paths.push('/trunk/src/MIT-License.txt');
changed_urls.push('/p/dynatree/source/browse/trunk/src/MIT-License.txt?r\x3d606\x26spec\x3dsvn680');
var selected_path = '/trunk/src/MIT-License.txt';
changed_paths.push('/trunk/src/jquery.dynatree.js');
changed_urls.push('/p/dynatree/source/browse/trunk/src/jquery.dynatree.js?r\x3d606\x26spec\x3dsvn680');
function getCurrentPageIndex() {
for (var i = 0; i < changed_paths.length; i++) {
if (selected_path == changed_paths[i]) {
return i;
}
}
}
function getNextPage() {
var i = getCurrentPageIndex();
if (i < changed_paths.length - 1) {
return changed_urls[i + 1];
}
return null;
}
function getPreviousPage() {
var i = getCurrentPageIndex();
if (i > 0) {
return changed_urls[i - 1];
}
return null;
}
function gotoNextPage() {
var page = getNextPage();
if (!page) {
page = detail_url;
}
window.location = page;
}
function gotoPreviousPage() {
var page = getPreviousPage();
if (!page) {
page = detail_url;
}
window.location = page;
}
function gotoDetailPage() {
window.location = detail_url;
}
function gotoPublishPage() {
window.location = publish_url;
}
</script>
<style type="text/css">
#review_nav {
border-top: 3px solid white;
padding-top: 6px;
margin-top: 1em;
}
#review_nav td {
vertical-align: middle;
}
#review_nav select {
margin: .5em 0;
}
</style>
<div id="review_nav">
<table><tr><td>Go to:&nbsp;</td><td>
<select name="files_in_rev" onchange="window.location=this.value">
<option value="/p/dynatree/source/browse/trunk/doc/sample.js?r=606&amp;spec=svn680"
>/trunk/doc/sample.js</option>
<option value="/p/dynatree/source/browse/trunk/jquery/README.txt?r=606&amp;spec=svn680"
>/trunk/jquery/README.txt</option>
<option value="/p/dynatree/source/browse/trunk/src/MIT-License.txt?r=606&amp;spec=svn680"
selected="selected"
>/trunk/src/MIT-License.txt</option>
<option value="/p/dynatree/source/browse/trunk/src/jquery.dynatree.js?r=606&amp;spec=svn680"
>/trunk/src/jquery.dynatree.js</option>
</select>
</td></tr></table>
<div style="white-space:nowrap">
Project members,
<a href="https://www.google.com/accounts/ServiceLogin?service=code&amp;ltmpl=phosting&amp;continue=http%3A%2F%2Fcode.google.com%2Fp%2Fdynatree%2Fsource%2Fbrowse%2Ftrunk%2Fsrc%2FMIT-License.txt&amp;followup=http%3A%2F%2Fcode.google.com%2Fp%2Fdynatree%2Fsource%2Fbrowse%2Ftrunk%2Fsrc%2FMIT-License.txt"
>sign in</a> to write a code review</div>
</div>
</div>
<div class="round1"></div>
<div class="round2"></div>
<div class="round4"></div>
</div>
<div class="pmeta_bubble_bg" style="border:1px solid white">
<div class="round4"></div>
<div class="round2"></div>
<div class="round1"></div>
<div class="box-inner">
<div id="older_bubble">
<p>Older revisions</p>
<div class="closed" style="margin-bottom:3px;" >
<a class="ifClosed" onclick="return _toggleHidden(this)"><img src="http://www.gstatic.com/codesite/ph/images/plus.gif" ></a>
<a class="ifOpened" onclick="return _toggleHidden(this)"><img src="http://www.gstatic.com/codesite/ph/images/minus.gif" ></a>
<a href="/p/dynatree/source/detail?spec=svn680&r=596">r596</a>
by moo...@wwwendt.de
on Jun 6, 2012
&nbsp; <a href="/p/dynatree/source/diff?spec=svn680&r=596&amp;format=side&amp;path=/trunk/src/MIT-License.txt&amp;old_path=/trunk/src/MIT-License.txt&amp;old=455">Diff</a>
<br>
<pre class="ifOpened">pass jshint</pre>
</div>
<div class="closed" style="margin-bottom:3px;" >
<a class="ifClosed" onclick="return _toggleHidden(this)"><img src="http://www.gstatic.com/codesite/ph/images/plus.gif" ></a>
<a class="ifOpened" onclick="return _toggleHidden(this)"><img src="http://www.gstatic.com/codesite/ph/images/minus.gif" ></a>
<a href="/p/dynatree/source/detail?spec=svn680&r=455">r455</a>
by moo...@wwwendt.de
on Jan 22, 2011
&nbsp; <a href="/p/dynatree/source/diff?spec=svn680&r=455&amp;format=side&amp;path=/trunk/src/MIT-License.txt&amp;old_path=/trunk/src/MIT-License.txt&amp;old=316">Diff</a>
<br>
<pre class="ifOpened">Added onRender(node, nodeSpan) and
onCustomRender(node)</pre>
</div>
<div class="closed" style="margin-bottom:3px;" >
<a class="ifClosed" onclick="return _toggleHidden(this)"><img src="http://www.gstatic.com/codesite/ph/images/plus.gif" ></a>
<a class="ifOpened" onclick="return _toggleHidden(this)"><img src="http://www.gstatic.com/codesite/ph/images/minus.gif" ></a>
<a href="/p/dynatree/source/detail?spec=svn680&r=316">r316</a>
by moo...@wwwendt.de
on Mar 23, 2010
&nbsp; <a href="/p/dynatree/source/diff?spec=svn680&r=316&amp;format=side&amp;path=/trunk/src/MIT-License.txt&amp;old_path=/trunk/src/MIT-License.txt&amp;old=139">Diff</a>
<br>
<pre class="ifOpened">fixed samples; removed rooVisible
option; using jquery-ui-1.8rc3</pre>
</div>
<a href="/p/dynatree/source/list?path=/trunk/src/MIT-License.txt&start=606">All revisions of this file</a>
</div>
</div>
<div class="round1"></div>
<div class="round2"></div>
<div class="round4"></div>
</div>
<div class="pmeta_bubble_bg" style="border:1px solid white">
<div class="round4"></div>
<div class="round2"></div>
<div class="round1"></div>
<div class="box-inner">
<div id="fileinfo_bubble">
<p>File info</p>
<div>Size: 1087 bytes,
7 lines</div>
<div><a href="//dynatree.googlecode.com/svn/trunk/src/MIT-License.txt">View raw file</a></div>
</div>
</div>
<div class="round1"></div>
<div class="round2"></div>
<div class="round4"></div>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="http://www.gstatic.com/codesite/ph/15490321151412058579/js/source_file_scripts.js"></script>
<script type="text/javascript" src="http://www.gstatic.com/codesite/ph/15490321151412058579/js/kibbles.js"></script>
<script type="text/javascript">
var lastStop = null;
var initialized = false;
function updateCursor(next, prev) {
if (prev && prev.element) {
prev.element.className = 'cursor_stop cursor_hidden';
}
if (next && next.element) {
next.element.className = 'cursor_stop cursor';
lastStop = next.index;
}
}
function pubRevealed(data) {
updateCursorForCell(data.cellId, 'cursor_stop cursor_hidden');
if (initialized) {
reloadCursors();
}
}
function draftRevealed(data) {
updateCursorForCell(data.cellId, 'cursor_stop cursor_hidden');
if (initialized) {
reloadCursors();
}
}
function draftDestroyed(data) {
updateCursorForCell(data.cellId, 'nocursor');
if (initialized) {
reloadCursors();
}
}
function reloadCursors() {
kibbles.skipper.reset();
loadCursors();
if (lastStop != null) {
kibbles.skipper.setCurrentStop(lastStop);
}
}
// possibly the simplest way to insert any newly added comments
// is to update the class of the corresponding cursor row,
// then refresh the entire list of rows.
function updateCursorForCell(cellId, className) {
var cell = document.getElementById(cellId);
// we have to go two rows back to find the cursor location
var row = getPreviousElement(cell.parentNode);
row.className = className;
}
// returns the previous element, ignores text nodes.
function getPreviousElement(e) {
var element = e.previousSibling;
if (element.nodeType == 3) {
element = element.previousSibling;
}
if (element && element.tagName) {
return element;
}
}
function loadCursors() {
// register our elements with skipper
var elements = CR_getElements('*', 'cursor_stop');
var len = elements.length;
for (var i = 0; i < len; i++) {
var element = elements[i];
element.className = 'cursor_stop cursor_hidden';
kibbles.skipper.append(element);
}
}
function toggleComments() {
CR_toggleCommentDisplay();
reloadCursors();
}
function keysOnLoadHandler() {
// setup skipper
kibbles.skipper.addStopListener(
kibbles.skipper.LISTENER_TYPE.PRE, updateCursor);
// Set the 'offset' option to return the middle of the client area
// an option can be a static value, or a callback
kibbles.skipper.setOption('padding_top', 50);
// Set the 'offset' option to return the middle of the client area
// an option can be a static value, or a callback
kibbles.skipper.setOption('padding_bottom', 100);
// Register our keys
kibbles.skipper.addFwdKey("n");
kibbles.skipper.addRevKey("p");
kibbles.keys.addKeyPressListener(
'u', function() { window.location = detail_url; });
kibbles.keys.addKeyPressListener(
'r', function() { window.location = detail_url + '#publish'; });
kibbles.keys.addKeyPressListener('j', gotoNextPage);
kibbles.keys.addKeyPressListener('k', gotoPreviousPage);
}
</script>
<script src="http://www.gstatic.com/codesite/ph/15490321151412058579/js/code_review_scripts.js"></script>
<script type="text/javascript">
function showPublishInstructions() {
var element = document.getElementById('review_instr');
if (element) {
element.className = 'opened';
}
}
var codereviews;
function revsOnLoadHandler() {
// register our source container with the commenting code
var paths = {'svn680': '/trunk/src/MIT-License.txt'}
codereviews = CR_controller.setup(
{"projectHomeUrl":"/p/dynatree","loggedInUserEmail":null,"profileUrl":null,"projectName":"dynatree","domainName":null,"relativeBaseUrl":"","assetHostPath":"http://www.gstatic.com/codesite/ph","token":null,"assetVersionPath":"http://www.gstatic.com/codesite/ph/15490321151412058579"}, '', 'svn680', paths,
CR_BrowseIntegrationFactory);
codereviews.registerActivityListener(CR_ActivityType.REVEAL_DRAFT_PLATE, showPublishInstructions);
codereviews.registerActivityListener(CR_ActivityType.REVEAL_PUB_PLATE, pubRevealed);
codereviews.registerActivityListener(CR_ActivityType.REVEAL_DRAFT_PLATE, draftRevealed);
codereviews.registerActivityListener(CR_ActivityType.DISCARD_DRAFT_COMMENT, draftDestroyed);
var initialized = true;
reloadCursors();
}
window.onload = function() {keysOnLoadHandler(); revsOnLoadHandler();};
</script>
<script type="text/javascript" src="http://www.gstatic.com/codesite/ph/15490321151412058579/js/dit_scripts.js"></script>
<script type="text/javascript" src="http://www.gstatic.com/codesite/ph/15490321151412058579/js/ph_core.js"></script>
</div>
<div id="footer" dir="ltr">
<div class="text">
<a href="/projecthosting/terms.html">Terms</a> -
<a href="http://www.google.com/privacy.html">Privacy</a> -
<a href="/p/support/">Project Hosting Help</a>
</div>
</div>
<div class="hostedBy" style="margin-top: -20px;">
<span style="vertical-align: top;">Powered by <a href="http://code.google.com/projecthosting/">Google Project Hosting</a></span>
</div>
</body>
</html>

File diff suppressed because it is too large Load Diff

File diff suppressed because one or more lines are too long

Binary file not shown.

After

Width:  |  Height:  |  Size: 648 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 412 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 309 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 536 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 618 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 620 B

View File

@@ -0,0 +1,222 @@
// jQuery Context Menu Plugin
//
// Version 1.01 customized version (see comment below)
//
// Cory S.N. LaViska
// A Beautiful Site (http://abeautifulsite.net/)
//
// More info: http://abeautifulsite.net/2008/09/jquery-context-menu-plugin/
//
// Terms of Use
//
// This plugin is dual-licensed under the GNU General Public License
// and the MIT License and is copyright A Beautiful Site, LLC.
//
// 2011-02-17 Martin Wendt:
// Changed stopPropagation() to preventDefault() in order to make it
// work with Dynatree drag'n'drop.
// See http://code.google.com/p/dynatree/issues/detail?id=174
// 2012-09-27 Martin Wendt:
// fixed position in a fancy layout
//
if(jQuery)( function() {
$.extend($.fn, {
contextMenu: function(o, callback) {
// Defaults
if( o.menu == undefined ) return false;
if( o.inSpeed == undefined ) o.inSpeed = 150;
if( o.outSpeed == undefined ) o.outSpeed = 75;
// 0 needs to be -1 for expected results (no fade)
if( o.inSpeed == 0 ) o.inSpeed = -1;
if( o.outSpeed == 0 ) o.outSpeed = -1;
// Loop each context menu
$(this).each( function() {
var el = $(this);
var offset = $(el).offset();
// Add contextMenu class
$('#' + o.menu).addClass('contextMenu');
// Simulate a true right click
$(this).mousedown( function(e) {
var evt = e;
// evt.stopPropagation();
evt.preventDefault();
$(this).mouseup( function(e) {
// e.stopPropagation();
e.preventDefault();
var srcElement = $(this);
$(this).unbind('mouseup');
if( evt.button == 2 ) {
// Hide context menus that may be showing
$(".contextMenu").hide();
// Get this context menu
var menu = $('#' + o.menu);
if( $(el).hasClass('disabled') ) return false;
// Detect mouse position
var d = {}, x, y;
if( self.innerHeight ) {
d.pageYOffset = self.pageYOffset;
d.pageXOffset = self.pageXOffset;
d.innerHeight = self.innerHeight;
d.innerWidth = self.innerWidth;
} else if( document.documentElement &&
document.documentElement.clientHeight ) {
d.pageYOffset = document.documentElement.scrollTop;
d.pageXOffset = document.documentElement.scrollLeft;
d.innerHeight = document.documentElement.clientHeight;
d.innerWidth = document.documentElement.clientWidth;
} else if( document.body ) {
d.pageYOffset = document.body.scrollTop;
d.pageXOffset = document.body.scrollLeft;
d.innerHeight = document.body.clientHeight;
d.innerWidth = document.body.clientWidth;
}
(e.pageX) ? x = e.pageX : x = e.clientX + d.scrollLeft;
(e.pageY) ? y = e.pageY : y = e.clientY + d.scrollTop;
// Show the menu
$(document).unbind('click');
// MW: fixed position in a fancy layout
// $(menu).css({ top: y, left: x }).fadeIn(o.inSpeed);
$(menu).fadeIn(o.inSpeed).offset({ top: y, left: x }); // must be visible, before calling offset()
// Hover events
$(menu).find('A').mouseover( function() {
$(menu).find('LI.hover').removeClass('hover');
$(this).parent().addClass('hover');
}).mouseout( function() {
$(menu).find('LI.hover').removeClass('hover');
});
// Keyboard
$(document).keypress( function(e) {
switch( e.keyCode ) {
case 38: // up
if( $(menu).find('LI.hover').size() == 0 ) {
$(menu).find('LI:last').addClass('hover');
} else {
$(menu).find('LI.hover').removeClass('hover').prevAll('LI:not(.disabled)').eq(0).addClass('hover');
if( $(menu).find('LI.hover').size() == 0 ) $(menu).find('LI:last').addClass('hover');
}
break;
case 40: // down
if( $(menu).find('LI.hover').size() == 0 ) {
$(menu).find('LI:first').addClass('hover');
} else {
$(menu).find('LI.hover').removeClass('hover').nextAll('LI:not(.disabled)').eq(0).addClass('hover');
if( $(menu).find('LI.hover').size() == 0 ) $(menu).find('LI:first').addClass('hover');
}
break;
case 13: // enter
$(menu).find('LI.hover A').trigger('click');
break;
case 27: // esc
$(document).trigger('click');
break
}
});
// When items are selected
$('#' + o.menu).find('A').unbind('click');
$('#' + o.menu).find('LI:not(.disabled) A').click( function() {
$(document).unbind('click').unbind('keypress');
$(".contextMenu").hide();
// Callback
if( callback ) callback( $(this).attr('href').substr(1), $(srcElement), {x: x - offset.left, y: y - offset.top, docX: x, docY: y} );
return false;
});
// Hide bindings
setTimeout( function() { // Delay for Mozilla
$(document).click( function() {
$(document).unbind('click').unbind('keypress');
$(menu).fadeOut(o.outSpeed);
return false;
});
}, 0);
}
});
});
// Disable text selection
if( $.browser.mozilla ) {
$('#' + o.menu).each( function() { $(this).css({ 'MozUserSelect' : 'none' }); });
} else if( $.browser.msie ) {
$('#' + o.menu).each( function() { $(this).bind('selectstart.disableTextSelect', function() { return false; }); });
} else {
$('#' + o.menu).each(function() { $(this).bind('mousedown.disableTextSelect', function() { return false; }); });
}
// Disable browser context menu (requires both selectors to work in IE/Safari + FF/Chrome)
$(el).add($('UL.contextMenu')).bind('contextmenu', function() { return false; });
});
return $(this);
},
// Disable context menu items on the fly
disableContextMenuItems: function(o) {
if( o == undefined ) {
// Disable all
$(this).find('LI').addClass('disabled');
return( $(this) );
}
$(this).each( function() {
if( o != undefined ) {
var d = o.split(',');
for( var i = 0; i < d.length; i++ ) {
$(this).find('A[href="' + d[i] + '"]').parent().addClass('disabled');
}
}
});
return( $(this) );
},
// Enable context menu items on the fly
enableContextMenuItems: function(o) {
if( o == undefined ) {
// Enable all
$(this).find('LI.disabled').removeClass('disabled');
return( $(this) );
}
$(this).each( function() {
if( o != undefined ) {
var d = o.split(',');
for( var i = 0; i < d.length; i++ ) {
$(this).find('A[href="' + d[i] + '"]').parent().removeClass('disabled');
}
}
});
return( $(this) );
},
// Disable context menu(s)
disableContextMenu: function() {
$(this).each( function() {
$(this).addClass('disabled');
});
return( $(this) );
},
// Enable context menu(s)
enableContextMenu: function() {
$(this).each( function() {
$(this).removeClass('disabled');
});
return( $(this) );
},
// Destroy context menu(s)
destroyContextMenu: function() {
// Destroy specified context menus
$(this).each( function() {
// Disable action
$(this).unbind('mousedown').unbind('mouseup');
});
return( $(this) );
}
});
})(jQuery);

View File

@@ -0,0 +1,62 @@
/* Generic context menu styles */
.contextMenu {
position: absolute;
width: 120px;
z-index: 99999;
border: solid 1px #CCC;
background: #EEE;
padding: 0px;
margin: 0px;
display: none;
}
.contextMenu LI {
list-style: none;
padding: 0px;
margin: 0px;
}
.contextMenu A {
color: #333;
text-decoration: none;
display: block;
line-height: 20px;
height: 20px;
background-position: 6px center;
background-repeat: no-repeat;
outline: none;
padding: 1px 5px;
padding-left: 28px;
}
.contextMenu LI.hover A {
color: #FFF;
background-color: #3399FF;
}
.contextMenu LI.disabled A {
color: #AAA;
cursor: default;
}
.contextMenu LI.hover.disabled A {
background-color: transparent;
}
.contextMenu LI.separator {
border-top: solid 1px #CCC;
}
/*
Adding Icons
You can add icons to the context menu by adding
classes to the respective LI element(s)
*/
.contextMenu LI.edit A { background-image: url(images/page_white_edit.png); }
.contextMenu LI.cut A { background-image: url(images/cut.png); }
.contextMenu LI.copy A { background-image: url(images/page_white_copy.png); }
.contextMenu LI.paste A { background-image: url(images/page_white_paste.png); }
.contextMenu LI.delete A { background-image: url(images/page_white_delete.png); }
.contextMenu LI.quit A { background-image: url(images/door.png); }

File diff suppressed because it is too large Load Diff

View File

@@ -0,0 +1,270 @@
"""
This sample web server demonstrates how to implement a web service for
Dynatree requests.
As data source, we choose a folder in the local file system, simply
because it is hierarchical and has a concept of documents (files) and
folders (directories) and because it was easy to implement.
A typical web service would of course read the data from a 'real' source
like an SQL database or XML file, but I hope you get the idea ;-)
See: http://dynatree.googlecode.com
Martin Wendt, 2009-2011
Usage:
1. Python 2.5 or later is required to run this server.
For Python 2.5 the simplejson module must also be installed;
Python 2.6 has built in json support.
2. Configure the rootPath variable in the main() function at the bottom
of this module.
3. Run this module:
> python dynatree_server.py
Optionally pass a root folder:
> python dynatree_server.py c:\temp
This module
- Is a standalone web server that answers URLs beginning with
http://127.0.0.1:8001/?...
with JSON responses that conform to the Dynatree spec.
However, we don't do error checking or anything else that would be
required for production environments.
- Answers requests to initialize a tree using the 'initAjax: {}' option:
http://127.0.0.1:8001/?mode=baseFolders
with a list of files/directories in the configured root directory.
- Answers requests to lazy-load node children using 'appendAjax({...})':
http://127.0.0.1:8001/?key=_25c2b6d6
with a list of files/directories in the directory that matches this key.
- Supports Dynatree's 'lazy persistence':
http://127.0.0.1:8001/?mode=baseFolder&expandedKeyList=_41771df2%2C_4230fb68%2C...
will return not only the base entries, but also all children inside
parents that are listed as expanded.
- Supports &sleep=SECONDS argument for simulating slow responses.
- Supports the JSONP protocol:
http://127.0.0.1:8001/?mode=baseFolder&callback=jsonp1241293219729
will wrap the result like this "jsonp1241293219729(<res>)".
This is only required, if this web service is not on the same host as
the web page that contains the Dynatree widget.
JSONP can be enabled for jQuery.ajax() by passing dataType: 'jsonp'
instead of 'json'.
- Dumps the POST body, if the request URL is '/submit_data'
Sample Dynatree options to use this service:
$("#tree").dynatree({
...
persist: true,
initAjax: {url: "http://127.0.0.1:8001",
dataType: "jsonp", // Enable JSONP, so this sample can be run from the local file system against a localhost server
data: {key: "",
// sleep: 3,
// depth: 2,
mode: "baseFolders"
},
addExpandedKeyList: true // Send list of expanded keys, so the webservice can deliver these children also
},
onLazyRead: function(dtnode){
dtnode.appendAjax(
{url: "http://127.0.0.1:8001",
dataType: "jsonp",
data: {key: dtnode.data.key,
mode: "branch"
}
});
}
});
"""
import cgi
import os
import sys
import time
from wsgiref.simple_server import WSGIServer, WSGIRequestHandler
from tempfile import gettempdir
try:
import json # Available since Python 2.6
except ImportError:
import simplejson as json
#===============================================================================
# Helper functions
#===============================================================================
def _keyFromString(s):
"""Calculate a unique key for an arbitrary string.
Example: _keyFromString("c:\temp\wsgidav1\src\DAV") = "_25c2b6d6"
"""
return "_" + hex(hash(s)) [3:]
def _findFolderByKey(rootPath, key):
"""Search rootPath and all sub folders for a directory that matches the key."""
for root, dirs, files in os.walk(rootPath):
for name in dirs:
fullPath = os.path.join(root, name)
fileKey = _keyFromString(fullPath)
if key == fileKey:
return fullPath
return None
#===============================================================================
# DynaTreeWsgiApp
#===============================================================================
class DynaTreeWsgiApp(object):
"""This WSGI application serves a file system hierarchy for dynatree."""
def __init__(self, optionDict):
self.optionDict = optionDict
def __call__(self, environ, start_response):
"""Handle one HTTP request."""
# Parse URL query into a list of 2-tuples (name, value)
argList = cgi.parse_qsl(environ.get("QUERY_STRING", ""))
# Convert to dictionary {"name": "value", ... }
argDict = dict(argList)
print "Query args: %s" % argDict
# Support &sleep=SECONDS argument to simulate slow connections for debugging
if argDict.get("sleep"):
print "Sleeping %s seconds..." % argDict.get("sleep")
time.sleep(int(argDict.get("sleep")))
# Dump POST request data, if http://HOST:PORT/submit_data was requested
# print "PI", environ["PATH_INFO"]
if environ["PATH_INFO"] == "/submit_data":
print "Got /submit_data request, CONTENT_LENGTH=%r" % environ.get("CONTENT_LENGTH")
try:
length = int(environ["CONTENT_LENGTH"])
data = environ["wsgi.input"].read(length)
except:
print >>sys.stderr, "Couldn't read from wsgi.input! This can happen when using Firefox locally"
try:
data = environ["wsgi.input"].read()
except:
print
print "Data: ", data
start_response("200 OK", [("Content-Type", "text/html")])
return [ "Thanks for sending<br><pre><code>%s</code></pre>" % data ]
# Support &depth=LEVEL argument to read more than one level (1: direct children)
depth = int(argDict.get("depth", 0))
if depth > 1:
print "'depth' mode: loading %s levels" % depth
# Return empty list when '&returnEmpty' is passed
returnEmpty = "returnEmpty" in argDict
# Eval 'mode' and 'key' arguments
rootPath = self.optionDict["rootPath"]
if argDict.get("mode") == "baseFolders":
folderPath = rootPath
elif argDict.get("key"):
key = argDict.get("key")
folderPath = _findFolderByKey(rootPath, key)
if not folderPath:
raise RuntimeError("Could not find folder for key '%s'." % key)
else:
raise RuntimeError("Missing required argument '&mode=baseFolder' or '&key=...'")
# Get list of child nodes (may be recursive)
childList = [ ]
if not returnEmpty:
self.makeChildList(argDict, folderPath, childList, depth)
# Convert result list to a JSON string
res = json.dumps(childList, encoding="Latin-1")
# Support for the JSONP protocol.
if "callback" in argDict:
res = argDict["callback"] + "(" + res + ")"
# Return HTTP response
start_response("200 OK", [("Content-Type", "application/json")])
return [ res ]
def makeChildList(self, argDict, folderPath, childList, depth):
print "makeChildList(%s, depth=%s) " % (folderPath, depth)
expandedKeyList = argDict.get("expandedKeyList", "").split(",")
filenameList = os.listdir(folderPath)
for fn in filenameList:
fullPath = os.path.join(folderPath, fn)
isFolder = os.path.isdir(fullPath)
key = _keyFromString(fullPath)
try:
size = os.path.getsize(fullPath)
date = time.ctime(os.path.getmtime(fullPath))
except:
# May fail when path contains funny chars (don't care in this sample)
size = 0
date = time.ctime()
# Create a node dictionary and append it to the child list
node = {"title": fn,
"key": key,
"isFolder": isFolder,
"isLazy": isFolder,
"tooltip": "%s, %s bytes, modified: %s" % (fullPath, size, date),
}
childList.append(node)
# Support lazy persistence:
# If the current node was requested as 'expanded', load the children too
if isFolder and (key in expandedKeyList or depth > 1):
subNodes = []
self.makeChildList(argDict, fullPath, subNodes, depth-1)
node["children"] = subNodes
# node["isLazy"] = False
# node["expand"] = True
#===============================================================================
# Server
#===============================================================================
# Requires Python >= 2.5
def make_server(host, port, app, server_class=WSGIServer, handler_class=WSGIRequestHandler):
"""Create a new WSGI server listening on 'host' and 'port' for 'app'."""
server = server_class((host, port), handler_class)
server.set_app(app)
return server
def main():
# Configure root directory that will be exported:
rootPath = gettempdir()
if len(sys.argv) > 1:
rootPath =sys.argv[1]
# rootPath = "/temp"
# Configure hostname and port on which the server will listen
# hostname = "127.0.0.1" # Use empty string for localhost (local access only)
hostname = "" # Use empty string for 0.0.0.0 (allows remote access)
port = 8001
wsgi_app = DynaTreeWsgiApp({"rootPath": rootPath})
httpd = make_server(hostname, port, wsgi_app)
sa = httpd.socket.getsockname()
print "Exporting file system at ", rootPath, " for Dynatree."
print "Serving HTTP on", sa[0], "port", sa[1], "..."
assert os.path.isdir(rootPath), "Invalid root path: '%s'" % rootPath
httpd.serve_forever()
if __name__ == "__main__":
main()

View File

@@ -0,0 +1,122 @@
body {
font-family: sans-serif;
}
ul {
list-style-type: square;
}
div.hint {
font-size: smaller;
}
p.info,
div.info {
background-color: #ffffa0;
background-image: url(iconInfo_32x32.png);
background-repeat: no-repeat;
padding: 5px;
padding-left: 40px;
}
div.codesample {
border: thin solid gray;
}
div.codesample a {
text-align: right;
}
code
{
font-family: monospace;
font-size: 1.2em;
}
div.codesample pre,
pre.codesample
{
font-family: monospace; /* courier doesn't contain '...'*/
background-color: #f0f0f0;
padding: 5px;
}
pre.codesample {
border: thin solid gray;
}
dl.optionList {
margin-left: 20px;
}
dl.optionList dt {
font-family: monospace;
background-color: #f0f0f0;
}
dl.optionList dd {
/* font-style: italic; */
margin-bottom: 10px;
}
/*****************************************************************************
* jquery.planize
*/
#toc {
border: thin solid gray;
/* background-color: f0f0f0; */
padding: 5px;
}
#toc >h4 {
/* background-color: f0f0f0; */
margin-top: 5px;
margin-bottom: 5px;
}
#toc ul {
list-style-type: none;
}
#toc a,
#toc a:visited
{
color: blue;
text-decoration: none;
}
#toc a:hover
{
text-decoration: underline;
}
/*****************************************************************************
* Examples
*/
body.example
{
margin: 15px;
}
body.example h1
{
font-size: 1.2em;
}
body.example p.description,
body.example p.sample-links
{
/* border: thin solid gray; */
background-color: #d0d0f0;
padding: 5px;
font-size: small;
}
p.sample-links a,
p.sample-links a:visited
{
color: navy;
text-decoration: none;
}
p.sample-links a:hover
{
text-decoration: underline;
}

View File

@@ -0,0 +1,87 @@
/*************************************************************************
(c) 2008-2009 Martin Wendt
*************************************************************************/
$(function(){
// Replace tabs inside <pre> with 4 spaces, because some browsers display 8
// characters
$("pre.codesample, div.codesample pre, pre.prettyprint").each(function(){
var text = $(this).text();
text2 = text.replace(/\t/g, " ");
$(this).text(text2)
});
// Show some elements only, if (not) inside the Example Browser
if (top.location == self.location)
$(".hideOutsideFS").hide();
else
$(".hideInsideFS").hide();
});
(function($) {
$.widget("ui.toc", {
init: function() {
// The widget framework supplies this.element and this.options.
this.options.event += '.toc'; // namespace event
// create TOC
var $this = this.element;
var opts = this.options;
// Attach the tree object to parent element
var id = $this.attr("id");
$this.addClass(opts.classnames.container);
$this.append("<div class='" + opts.classnames.title + "'>" + opts.title + "</div>");
// var $ul = $this.append("<ul />");
var $ul = $("<ul />").appendTo($this);
// this._addSubItems($ul, 1);
var idx = 1;
$("h2").each(function() {
var $h = $(this);
$ul.append("<li><a href='#" + idx + "'>" + $h.text() + "</a></li>");
$h.attr("id", idx);
idx++;
});
},
// ------------------------------------------------------------------------
lastentry: undefined
});
// The following methods return a value (thus breaking the jQuery call chain):
//$.ui.toc.getter = "getTree getRoot";
// Plugin default options:
$.ui.toc.defaults = {
title: "Table of contents", // Text used for the toc header.
startDepth: 1, // Start with <Hx> and higher (H1, H2, ...)
maxDepth: 3, // Max depth to scan (..., ´H2, H3)
addUpLink: false, // Add an clickable link to jump back upwards to the toc.
numberItems: false, // Use an ordered list instead of <ul>. Also the index is prepended to the <h..> tags.
orderedListStyleType: "decimal",
strings: {
loading: "Loading&#8230;",
loadError: "Load error!"
},
classnames: {
container: "ui-toc-container",
title: "ui-toc-title"
},
debugLevel: 0,
// templates
//~ tabTemplate: '<li><a href="#{href}"><span>#{label}</span></a></li>', // var $li = $(o.tabTemplate.replace(/#\{href\}/g, url).replace(/#\{label\}/g, label));
// ------------------------------------------------------------------------
lastentry: undefined
};
// ---------------------------------------------------------------------------
})(jQuery);

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.3 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.1 KiB

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

After

Width:  |  Height:  |  Size: 648 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 412 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 309 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 536 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 618 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 620 B

View File

@@ -0,0 +1,134 @@
/*
* jQuery contextMenu - Plugin for simple contextMenu handling
*
* Version: 1.5.2
*
* Authors: Rodney Rehm, Addy Osmani (patches for FF)
* Web: http://medialize.github.com/jQuery-contextMenu/
*
* Licensed under
* MIT License http://www.opensource.org/licenses/mit-license
* GPL v3 http://opensource.org/licenses/GPL-3.0
*
*/
.context-menu-list {
margin:0;
padding:0;
min-width: 120px;
max-width: 250px;
display: inline-block;
position: absolute;
list-style-type: none;
border: 1px solid #DDD;
background: #EEE;
-webkit-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
-moz-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
-ms-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
-o-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
}
.context-menu-item {
padding: 2px 2px 2px 24px;
background-color: #EEE;
position: relative;
-moz-user-select: -moz-none;
}
.context-menu-separator {
padding-bottom:0;
border-bottom: 1px solid #DDD;
}
.context-menu-item > label {
-moz-user-select: text;
}
.context-menu-item.hover {
cursor: pointer;
background-color: #39F;
}
.context-menu-item.disabled {
color: #666;
}
.context-menu-input.hover,
.context-menu-item.disabled.hover {
cursor: default;
background-color: #EEE;
}
.context-menu-submenu:after {
content: ">";
color: #666;
position: absolute;
top: 0;
right: 3px;
z-index: 1;
}
/* icons
#protip:
In case you want to use sprites for icons (which I would suggest you do) have a look at
http://css-tricks.com/13224-pseudo-spriting/ to get an idea of how to implement
.context-menu-item.icon:before {}
*/
.context-menu-item.icon { min-height: 18px; background-repeat: no-repeat; background-position: 4px 2px; }
.context-menu-item.icon-edit { background-image: url(images/page_white_edit.png); }
.context-menu-item.icon-cut { background-image: url(images/cut.png); }
.context-menu-item.icon-copy { background-image: url(images/page_white_copy.png); }
.context-menu-item.icon-paste { background-image: url(images/page_white_paste.png); }
.context-menu-item.icon-delete { background-image: url(images/page_white_delete.png); }
.context-menu-item.icon-quit { background-image: url(images/door.png); }
/* vertically align inside labels */
.context-menu-input > label > * { vertical-align: top; }
/* position checkboxes and radios as icons */
.context-menu-input > label > input[type="checkbox"],
.context-menu-input > label > input[type="radio"] {
margin-left: -17px;
}
.context-menu-input > label > span {
margin-left: 5px;
}
.context-menu-input > label,
.context-menu-input > label > input[type="text"],
.context-menu-input > label > textarea,
.context-menu-input > label > select {
display: block;
width: 100%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
-o-box-sizing: border-box;
box-sizing: border-box;
}
.context-menu-input > label > textarea {
height: 100px;
}
.context-menu-item > .context-menu-list {
display: none;
/* re-positioned by js */
right: -5px;
top: 5px;
}
.context-menu-item.hover > .context-menu-list {
display: block;
}
.context-menu-accesskey {
text-decoration: underline;
}

File diff suppressed because it is too large Load Diff

View File

@@ -0,0 +1,252 @@
/*
* jQuery UI Position 1.8.13
*
* Copyright 2011, AUTHORS.txt (http://jqueryui.com/about)
* Dual licensed under the MIT or GPL Version 2 licenses.
* http://jquery.org/license
*
* http://docs.jquery.com/UI/Position
*/
(function( $, undefined ) {
$.ui = $.ui || {};
var horizontalPositions = /left|center|right/,
verticalPositions = /top|center|bottom/,
center = "center",
_position = $.fn.position,
_offset = $.fn.offset;
$.fn.position = function( options ) {
if ( !options || !options.of ) {
return _position.apply( this, arguments );
}
// make a copy, we don't want to modify arguments
options = $.extend( {}, options );
var target = $( options.of ),
targetElem = target[0],
collision = ( options.collision || "flip" ).split( " " ),
offset = options.offset ? options.offset.split( " " ) : [ 0, 0 ],
targetWidth,
targetHeight,
basePosition;
if ( targetElem.nodeType === 9 ) {
targetWidth = target.width();
targetHeight = target.height();
basePosition = { top: 0, left: 0 };
// TODO: use $.isWindow() in 1.9
} else if ( targetElem.setTimeout ) {
targetWidth = target.width();
targetHeight = target.height();
basePosition = { top: target.scrollTop(), left: target.scrollLeft() };
} else if ( targetElem.preventDefault ) {
// force left top to allow flipping
options.at = "left top";
targetWidth = targetHeight = 0;
basePosition = { top: options.of.pageY, left: options.of.pageX };
} else {
targetWidth = target.outerWidth();
targetHeight = target.outerHeight();
basePosition = target.offset();
}
// force my and at to have valid horizontal and veritcal positions
// if a value is missing or invalid, it will be converted to center
$.each( [ "my", "at" ], function() {
var pos = ( options[this] || "" ).split( " " );
if ( pos.length === 1) {
pos = horizontalPositions.test( pos[0] ) ?
pos.concat( [center] ) :
verticalPositions.test( pos[0] ) ?
[ center ].concat( pos ) :
[ center, center ];
}
pos[ 0 ] = horizontalPositions.test( pos[0] ) ? pos[ 0 ] : center;
pos[ 1 ] = verticalPositions.test( pos[1] ) ? pos[ 1 ] : center;
options[ this ] = pos;
});
// normalize collision option
if ( collision.length === 1 ) {
collision[ 1 ] = collision[ 0 ];
}
// normalize offset option
offset[ 0 ] = parseInt( offset[0], 10 ) || 0;
if ( offset.length === 1 ) {
offset[ 1 ] = offset[ 0 ];
}
offset[ 1 ] = parseInt( offset[1], 10 ) || 0;
if ( options.at[0] === "right" ) {
basePosition.left += targetWidth;
} else if ( options.at[0] === center ) {
basePosition.left += targetWidth / 2;
}
if ( options.at[1] === "bottom" ) {
basePosition.top += targetHeight;
} else if ( options.at[1] === center ) {
basePosition.top += targetHeight / 2;
}
basePosition.left += offset[ 0 ];
basePosition.top += offset[ 1 ];
return this.each(function() {
var elem = $( this ),
elemWidth = elem.outerWidth(),
elemHeight = elem.outerHeight(),
marginLeft = parseInt( $.curCSS( this, "marginLeft", true ) ) || 0,
marginTop = parseInt( $.curCSS( this, "marginTop", true ) ) || 0,
collisionWidth = elemWidth + marginLeft +
( parseInt( $.curCSS( this, "marginRight", true ) ) || 0 ),
collisionHeight = elemHeight + marginTop +
( parseInt( $.curCSS( this, "marginBottom", true ) ) || 0 ),
position = $.extend( {}, basePosition ),
collisionPosition;
if ( options.my[0] === "right" ) {
position.left -= elemWidth;
} else if ( options.my[0] === center ) {
position.left -= elemWidth / 2;
}
if ( options.my[1] === "bottom" ) {
position.top -= elemHeight;
} else if ( options.my[1] === center ) {
position.top -= elemHeight / 2;
}
// prevent fractions (see #5280)
position.left = Math.round( position.left );
position.top = Math.round( position.top );
collisionPosition = {
left: position.left - marginLeft,
top: position.top - marginTop
};
$.each( [ "left", "top" ], function( i, dir ) {
if ( $.ui.position[ collision[i] ] ) {
$.ui.position[ collision[i] ][ dir ]( position, {
targetWidth: targetWidth,
targetHeight: targetHeight,
elemWidth: elemWidth,
elemHeight: elemHeight,
collisionPosition: collisionPosition,
collisionWidth: collisionWidth,
collisionHeight: collisionHeight,
offset: offset,
my: options.my,
at: options.at
});
}
});
if ( $.fn.bgiframe ) {
elem.bgiframe();
}
elem.offset( $.extend( position, { using: options.using } ) );
});
};
$.ui.position = {
fit: {
left: function( position, data ) {
var win = $( window ),
over = data.collisionPosition.left + data.collisionWidth - win.width() - win.scrollLeft();
position.left = over > 0 ? position.left - over : Math.max( position.left - data.collisionPosition.left, position.left );
},
top: function( position, data ) {
var win = $( window ),
over = data.collisionPosition.top + data.collisionHeight - win.height() - win.scrollTop();
position.top = over > 0 ? position.top - over : Math.max( position.top - data.collisionPosition.top, position.top );
}
},
flip: {
left: function( position, data ) {
if ( data.at[0] === center ) {
return;
}
var win = $( window ),
over = data.collisionPosition.left + data.collisionWidth - win.width() - win.scrollLeft(),
myOffset = data.my[ 0 ] === "left" ?
-data.elemWidth :
data.my[ 0 ] === "right" ?
data.elemWidth :
0,
atOffset = data.at[ 0 ] === "left" ?
data.targetWidth :
-data.targetWidth,
offset = -2 * data.offset[ 0 ];
position.left += data.collisionPosition.left < 0 ?
myOffset + atOffset + offset :
over > 0 ?
myOffset + atOffset + offset :
0;
},
top: function( position, data ) {
if ( data.at[1] === center ) {
return;
}
var win = $( window ),
over = data.collisionPosition.top + data.collisionHeight - win.height() - win.scrollTop(),
myOffset = data.my[ 1 ] === "top" ?
-data.elemHeight :
data.my[ 1 ] === "bottom" ?
data.elemHeight :
0,
atOffset = data.at[ 1 ] === "top" ?
data.targetHeight :
-data.targetHeight,
offset = -2 * data.offset[ 1 ];
position.top += data.collisionPosition.top < 0 ?
myOffset + atOffset + offset :
over > 0 ?
myOffset + atOffset + offset :
0;
}
}
};
// offset setter from jQuery 1.4
if ( !$.offset.setOffset ) {
$.offset.setOffset = function( elem, options ) {
// set position first, in-case top/left are set even on static elem
if ( /static/.test( $.curCSS( elem, "position" ) ) ) {
elem.style.position = "relative";
}
var curElem = $( elem ),
curOffset = curElem.offset(),
curTop = parseInt( $.curCSS( elem, "top", true ), 10 ) || 0,
curLeft = parseInt( $.curCSS( elem, "left", true ), 10) || 0,
props = {
top: (options.top - curOffset.top) + curTop,
left: (options.left - curOffset.left) + curLeft
};
if ( 'using' in options ) {
options.using.call( elem, props );
} else {
curElem.css( props );
}
};
$.fn.offset = function( options ) {
var elem = this[ 0 ];
if ( !elem || !elem.ownerDocument ) { return null; }
if ( options ) {
return this.each(function() {
$.offset.setOffset( this, options );
});
}
return _offset.call( this );
};
}
}( jQuery ));

View File

@@ -0,0 +1,148 @@
/**
* The planize jQuery plugin adds some features for dealing with hierarchical headings in a given DOM element.
*
* - adds enumerations and anchors in all headings,
* - can generates an HTML table of content and append it to an existing DOM element,
* - in an unobstrusive way.
*
* Example of use:
*
* $('html *').planize();
*
* Configuration object parameters documentation:
* - add_anchors : generates anchors for each header (automatically set to true if `generate_toc` is set to true)
* - callback : a function called when processing is finished
* - debug : prints pretty debug messages into the firebug or opera console, if available
* - generate_toc : generates an html unordered list containing the table of content of the document
* - min_level : min heading level needed to be included in toc and be renumbered (0 = all headings)
* - max_level : max heading level needed to be included in toc and be renumbered (0 = all headings)
* - number_suffix : heading identifier suffix, eg. ')' in "1.2.3)"
* - number_separator : separator for numbers, eg. '.' in "1.2.3)"
* - toc_elem : the dom element where the toc will be append
* - toc_none : the message to display if no headings have been found in the current document
* - toc_title : the title of the table of content
*
* @requires jQuery v1.2 or higher
* @author Nicolas Perriault <nperriault _at_ gmail _dot_ com>
* @license MIT (http://www.opensource.org/licenses/mit-license.php)
* @param Object config Plugin configuration
* @return jQuery(this)
*
*/
(function(jQuery){
jQuery.fn.planize = function(config) {
var self = jQuery(this);
var processed = false;
var toc = '';
var defaultConfig = {
add_anchors : false,
callback : null,
debug : false,
generate_toc : false,
min_level : 1,
max_level : 6,
number_suffix : '',
number_separator : '.',
toc_elem : null,
toc_none : 'No heading found for this document',
toc_title : 'Table of contents'
};
config = jQuery.extend(defaultConfig, config);
/**
* Prepends all headers text with the current tree number reference
* @return void
*/
var process = function() {
var level = 0;
var levels = [0,0,0,0,0,0,0];
var hLevelText = '';
var prependText = '';
var prevLevel = 0;
var n = 0;
self.children('*:header:visible').each(function(index, heading) {
log('Processing heading %o', heading);
level = parseInt(heading.tagName.substring(1));
if (config.min_level <= level && level <= config.max_level) {
n++;
levels[level]++;
for (var l = 1; l <= level; l++) {
hLevelText += levels[l] > 0 ? levels[l] + config.number_separator : '';
}
levels[level + 1] = 0;
hLevelText = hLevelText.substring(0, hLevelText.length - 1);
prependText = hLevelText;
if (config.generate_toc || config.add_anchors) {
if (config.generate_toc) {
var link = '<a href="#h' + hLevelText + '">' +jQuery('<span/>').text(jQuery(this).text()).html() + '</a>';
var elem = "\n"+'<li>' + hLevelText + (config.number_suffix ? config.number_suffix : '') + ' ' + link;
if (level < prevLevel) {
log(hLevelText + ', unnesting because:' + level + '<' + prevLevel);
var unnest = '';
while (level < prevLevel) {
unnest += '</ul>';
prevLevel--;
}
toc += unnest + elem + '</li>';
} else if (level > prevLevel) {
log(hLevelText + ', nesting because:' + level + '>' + prevLevel);
toc += '<ul>' + elem;
} else {
log(hLevelText + ', same level (' + level + ')');
toc += elem;
}
}
prependText = '<span id="h' + hLevelText + '"></span>' + hLevelText;
}
if (config.number_suffix) {
prependText += config.number_suffix;
}
jQuery(this).prepend(prependText + ' ');
prependText = hLevelText = '';
prevLevel = level;
}
});
if (config.generate_toc) {
if (config.toc_title) {
toc = '<h4>' + config.toc_title + '</h4>' + toc;
}
if (n == 0) {
toc += config.toc_none ? '<p>' + config.toc_none + '</p>' : '';
}
jQuery(config.toc_elem ? config.toc_elem : 'body').append(toc);
}
processed = true;
};
/**
* Logs a message into the firebug or opera console if available
*
*/
var log = function() {
if (!config.debug) {
return;
}
try {
console.log.apply(console, arguments);
} catch(e) {
try {
opera.postError.apply(opera, arguments);
} catch(e){}
}
}
process();
if (config.callback) {
config.callback(config.toc_elem);
}
return jQuery(this);
};
})(jQuery);

Binary file not shown.

After

Width:  |  Height:  |  Size: 372 B

View File

@@ -0,0 +1,52 @@
/* Pretty printing styles. Used with prettify.js. */
.str { color: #080; }
.kwd { color: #008; }
.com { color: #800; }
.typ { color: #606; }
.lit { color: #066; }
.pun { color: #660; }
.pln { color: #000; }
.tag { color: #008; }
.atn { color: #606; }
.atv { color: #080; }
.dec { color: #606; }
/*pre.prettyprint { padding: 2px; border: 1px solid #888 }*/
pre.prettyprint {
padding: 2px;
border: 1px dashed #888;
/* margin-left: 30px;
margin-right: 10px;
background-color: #f0f0f0;*/
overflow: auto;
}
/* Specify class=linenums on a pre to get line numbering */
ol.linenums { margin-top: 0; margin-bottom: 0 } /* IE indents via margin-left */
li.L0,
li.L1,
li.L2,
li.L3,
li.L5,
li.L6,
li.L7,
li.L8 { list-style-type: none }
/* Alternate shading for lines */
li.L1,
li.L3,
li.L5,
li.L7,
li.L9 { background: #eee }
@media print {
.str { color: #060; }
.kwd { color: #006; font-weight: bold; }
.com { color: #600; font-style: italic; }
.typ { color: #404; font-weight: bold; }
.lit { color: #044; }
.pun { color: #440; }
.pln { color: #000; }
.tag { color: #006; font-weight: bold; }
.atn { color: #404; }
.atv { color: #060; }
}

View File

@@ -0,0 +1,33 @@
window.PR_SHOULD_USE_CONTINUATION=true;window.PR_TAB_WIDTH=8;window.PR_normalizedHtml=window.PR=window.prettyPrintOne=window.prettyPrint=void 0;window._pr_isIE6=function(){var y=navigator&&navigator.userAgent&&navigator.userAgent.match(/\bMSIE ([678])\./);y=y?+y[1]:false;window._pr_isIE6=function(){return y};return y};
(function(){function y(b){return b.replace(L,"&amp;").replace(M,"&lt;").replace(N,"&gt;")}function H(b,f,i){switch(b.nodeType){case 1:var o=b.tagName.toLowerCase();f.push("<",o);var l=b.attributes,n=l.length;if(n){if(i){for(var r=[],j=n;--j>=0;)r[j]=l[j];r.sort(function(q,m){return q.name<m.name?-1:q.name===m.name?0:1});l=r}for(j=0;j<n;++j){r=l[j];r.specified&&f.push(" ",r.name.toLowerCase(),'="',r.value.replace(L,"&amp;").replace(M,"&lt;").replace(N,"&gt;").replace(X,"&quot;"),'"')}}f.push(">");
for(l=b.firstChild;l;l=l.nextSibling)H(l,f,i);if(b.firstChild||!/^(?:br|link|img)$/.test(o))f.push("</",o,">");break;case 3:case 4:f.push(y(b.nodeValue));break}}function O(b){function f(c){if(c.charAt(0)!=="\\")return c.charCodeAt(0);switch(c.charAt(1)){case "b":return 8;case "t":return 9;case "n":return 10;case "v":return 11;case "f":return 12;case "r":return 13;case "u":case "x":return parseInt(c.substring(2),16)||c.charCodeAt(1);case "0":case "1":case "2":case "3":case "4":case "5":case "6":case "7":return parseInt(c.substring(1),
8);default:return c.charCodeAt(1)}}function i(c){if(c<32)return(c<16?"\\x0":"\\x")+c.toString(16);c=String.fromCharCode(c);if(c==="\\"||c==="-"||c==="["||c==="]")c="\\"+c;return c}function o(c){var d=c.substring(1,c.length-1).match(RegExp("\\\\u[0-9A-Fa-f]{4}|\\\\x[0-9A-Fa-f]{2}|\\\\[0-3][0-7]{0,2}|\\\\[0-7]{1,2}|\\\\[\\s\\S]|-|[^-\\\\]","g"));c=[];for(var a=[],k=d[0]==="^",e=k?1:0,h=d.length;e<h;++e){var g=d[e];switch(g){case "\\B":case "\\b":case "\\D":case "\\d":case "\\S":case "\\s":case "\\W":case "\\w":c.push(g);
continue}g=f(g);var s;if(e+2<h&&"-"===d[e+1]){s=f(d[e+2]);e+=2}else s=g;a.push([g,s]);if(!(s<65||g>122)){s<65||g>90||a.push([Math.max(65,g)|32,Math.min(s,90)|32]);s<97||g>122||a.push([Math.max(97,g)&-33,Math.min(s,122)&-33])}}a.sort(function(v,w){return v[0]-w[0]||w[1]-v[1]});d=[];g=[NaN,NaN];for(e=0;e<a.length;++e){h=a[e];if(h[0]<=g[1]+1)g[1]=Math.max(g[1],h[1]);else d.push(g=h)}a=["["];k&&a.push("^");a.push.apply(a,c);for(e=0;e<d.length;++e){h=d[e];a.push(i(h[0]));if(h[1]>h[0]){h[1]+1>h[0]&&a.push("-");
a.push(i(h[1]))}}a.push("]");return a.join("")}function l(c){for(var d=c.source.match(RegExp("(?:\\[(?:[^\\x5C\\x5D]|\\\\[\\s\\S])*\\]|\\\\u[A-Fa-f0-9]{4}|\\\\x[A-Fa-f0-9]{2}|\\\\[0-9]+|\\\\[^ux0-9]|\\(\\?[:!=]|[\\(\\)\\^]|[^\\x5B\\x5C\\(\\)\\^]+)","g")),a=d.length,k=[],e=0,h=0;e<a;++e){var g=d[e];if(g==="(")++h;else if("\\"===g.charAt(0))if((g=+g.substring(1))&&g<=h)k[g]=-1}for(e=1;e<k.length;++e)if(-1===k[e])k[e]=++n;for(h=e=0;e<a;++e){g=d[e];if(g==="("){++h;if(k[h]===undefined)d[e]="(?:"}else if("\\"===
g.charAt(0))if((g=+g.substring(1))&&g<=h)d[e]="\\"+k[h]}for(h=e=0;e<a;++e)if("^"===d[e]&&"^"!==d[e+1])d[e]="";if(c.ignoreCase&&r)for(e=0;e<a;++e){g=d[e];c=g.charAt(0);if(g.length>=2&&c==="[")d[e]=o(g);else if(c!=="\\")d[e]=g.replace(/[a-zA-Z]/g,function(s){s=s.charCodeAt(0);return"["+String.fromCharCode(s&-33,s|32)+"]"})}return d.join("")}for(var n=0,r=false,j=false,q=0,m=b.length;q<m;++q){var t=b[q];if(t.ignoreCase)j=true;else if(/[a-z]/i.test(t.source.replace(/\\u[0-9a-f]{4}|\\x[0-9a-f]{2}|\\[^ux]/gi,
""))){r=true;j=false;break}}var p=[];q=0;for(m=b.length;q<m;++q){t=b[q];if(t.global||t.multiline)throw Error(""+t);p.push("(?:"+l(t)+")")}return RegExp(p.join("|"),j?"gi":"g")}function Y(b){var f=0;return function(i){for(var o=null,l=0,n=0,r=i.length;n<r;++n)switch(i.charAt(n)){case "\t":o||(o=[]);o.push(i.substring(l,n));l=b-f%b;for(f+=l;l>=0;l-=16)o.push(" ".substring(0,l));l=n+1;break;case "\n":f=0;break;default:++f}if(!o)return i;o.push(i.substring(l));return o.join("")}}function I(b,
f,i,o){if(f){b={source:f,c:b};i(b);o.push.apply(o,b.d)}}function B(b,f){var i={},o;(function(){for(var r=b.concat(f),j=[],q={},m=0,t=r.length;m<t;++m){var p=r[m],c=p[3];if(c)for(var d=c.length;--d>=0;)i[c.charAt(d)]=p;p=p[1];c=""+p;if(!q.hasOwnProperty(c)){j.push(p);q[c]=null}}j.push(/[\0-\uffff]/);o=O(j)})();var l=f.length;function n(r){for(var j=r.c,q=[j,z],m=0,t=r.source.match(o)||[],p={},c=0,d=t.length;c<d;++c){var a=t[c],k=p[a],e=void 0,h;if(typeof k==="string")h=false;else{var g=i[a.charAt(0)];
if(g){e=a.match(g[1]);k=g[0]}else{for(h=0;h<l;++h){g=f[h];if(e=a.match(g[1])){k=g[0];break}}e||(k=z)}if((h=k.length>=5&&"lang-"===k.substring(0,5))&&!(e&&typeof e[1]==="string")){h=false;k=P}h||(p[a]=k)}g=m;m+=a.length;if(h){h=e[1];var s=a.indexOf(h),v=s+h.length;if(e[2]){v=a.length-e[2].length;s=v-h.length}k=k.substring(5);I(j+g,a.substring(0,s),n,q);I(j+g+s,h,Q(k,h),q);I(j+g+v,a.substring(v),n,q)}else q.push(j+g,k)}r.d=q}return n}function x(b){var f=[],i=[];if(b.tripleQuotedStrings)f.push([A,/^(?:\'\'\'(?:[^\'\\]|\\[\s\S]|\'{1,2}(?=[^\']))*(?:\'\'\'|$)|\"\"\"(?:[^\"\\]|\\[\s\S]|\"{1,2}(?=[^\"]))*(?:\"\"\"|$)|\'(?:[^\\\']|\\[\s\S])*(?:\'|$)|\"(?:[^\\\"]|\\[\s\S])*(?:\"|$))/,
null,"'\""]);else b.multiLineStrings?f.push([A,/^(?:\'(?:[^\\\']|\\[\s\S])*(?:\'|$)|\"(?:[^\\\"]|\\[\s\S])*(?:\"|$)|\`(?:[^\\\`]|\\[\s\S])*(?:\`|$))/,null,"'\"`"]):f.push([A,/^(?:\'(?:[^\\\'\r\n]|\\.)*(?:\'|$)|\"(?:[^\\\"\r\n]|\\.)*(?:\"|$))/,null,"\"'"]);b.verbatimStrings&&i.push([A,/^@\"(?:[^\"]|\"\")*(?:\"|$)/,null]);if(b.hashComments)if(b.cStyleComments){f.push([C,/^#(?:(?:define|elif|else|endif|error|ifdef|include|ifndef|line|pragma|undef|warning)\b|[^\r\n]*)/,null,"#"]);i.push([A,/^<(?:(?:(?:\.\.\/)*|\/?)(?:[\w-]+(?:\/[\w-]+)+)?[\w-]+\.h|[a-z]\w*)>/,
null])}else f.push([C,/^#[^\r\n]*/,null,"#"]);if(b.cStyleComments){i.push([C,/^\/\/[^\r\n]*/,null]);i.push([C,/^\/\*[\s\S]*?(?:\*\/|$)/,null])}b.regexLiterals&&i.push(["lang-regex",RegExp("^"+Z+"(/(?=[^/*])(?:[^/\\x5B\\x5C]|\\x5C[\\s\\S]|\\x5B(?:[^\\x5C\\x5D]|\\x5C[\\s\\S])*(?:\\x5D|$))+/)")]);b=b.keywords.replace(/^\s+|\s+$/g,"");b.length&&i.push([R,RegExp("^(?:"+b.replace(/\s+/g,"|")+")\\b"),null]);f.push([z,/^\s+/,null," \r\n\t\u00a0"]);i.push([J,/^@[a-z_$][a-z_$@0-9]*/i,null],[S,/^@?[A-Z]+[a-z][A-Za-z_$@0-9]*/,
null],[z,/^[a-z_$][a-z_$@0-9]*/i,null],[J,/^(?:0x[a-f0-9]+|(?:\d(?:_\d+)*\d*(?:\.\d*)?|\.\d\+)(?:e[+\-]?\d+)?)[a-z]*/i,null,"0123456789"],[E,/^.[^\s\w\.$@\'\"\`\/\#]*/,null]);return B(f,i)}function $(b){function f(D){if(D>r){if(j&&j!==q){n.push("</span>");j=null}if(!j&&q){j=q;n.push('<span class="',j,'">')}var T=y(p(i.substring(r,D))).replace(e?d:c,"$1&#160;");e=k.test(T);n.push(T.replace(a,s));r=D}}var i=b.source,o=b.g,l=b.d,n=[],r=0,j=null,q=null,m=0,t=0,p=Y(window.PR_TAB_WIDTH),c=/([\r\n ]) /g,
d=/(^| ) /gm,a=/\r\n?|\n/g,k=/[ \r\n]$/,e=true,h=window._pr_isIE6();h=h?b.b.tagName==="PRE"?h===6?"&#160;\r\n":h===7?"&#160;<br>\r":"&#160;\r":"&#160;<br />":"<br />";var g=b.b.className.match(/\blinenums\b(?::(\d+))?/),s;if(g){for(var v=[],w=0;w<10;++w)v[w]=h+'</li><li class="L'+w+'">';var F=g[1]&&g[1].length?g[1]-1:0;n.push('<ol class="linenums"><li class="L',F%10,'"');F&&n.push(' value="',F+1,'"');n.push(">");s=function(){var D=v[++F%10];return j?"</span>"+D+'<span class="'+j+'">':D}}else s=h;
for(;;)if(m<o.length?t<l.length?o[m]<=l[t]:true:false){f(o[m]);if(j){n.push("</span>");j=null}n.push(o[m+1]);m+=2}else if(t<l.length){f(l[t]);q=l[t+1];t+=2}else break;f(i.length);j&&n.push("</span>");g&&n.push("</li></ol>");b.a=n.join("")}function u(b,f){for(var i=f.length;--i>=0;){var o=f[i];if(G.hasOwnProperty(o))"console"in window&&console.warn("cannot override language handler %s",o);else G[o]=b}}function Q(b,f){b&&G.hasOwnProperty(b)||(b=/^\s*</.test(f)?"default-markup":"default-code");return G[b]}
function U(b){var f=b.f,i=b.e;b.a=f;try{var o,l=f.match(aa);f=[];var n=0,r=[];if(l)for(var j=0,q=l.length;j<q;++j){var m=l[j];if(m.length>1&&m.charAt(0)==="<"){if(!ba.test(m))if(ca.test(m)){f.push(m.substring(9,m.length-3));n+=m.length-12}else if(da.test(m)){f.push("\n");++n}else if(m.indexOf(V)>=0&&m.replace(/\s(\w+)\s*=\s*(?:\"([^\"]*)\"|'([^\']*)'|(\S+))/g,' $1="$2$3$4"').match(/[cC][lL][aA][sS][sS]=\"[^\"]*\bnocode\b/)){var t=m.match(W)[2],p=1,c;c=j+1;a:for(;c<q;++c){var d=l[c].match(W);if(d&&
d[2]===t)if(d[1]==="/"){if(--p===0)break a}else++p}if(c<q){r.push(n,l.slice(j,c+1).join(""));j=c}else r.push(n,m)}else r.push(n,m)}else{var a;p=m;var k=p.indexOf("&");if(k<0)a=p;else{for(--k;(k=p.indexOf("&#",k+1))>=0;){var e=p.indexOf(";",k);if(e>=0){var h=p.substring(k+3,e),g=10;if(h&&h.charAt(0)==="x"){h=h.substring(1);g=16}var s=parseInt(h,g);isNaN(s)||(p=p.substring(0,k)+String.fromCharCode(s)+p.substring(e+1))}}a=p.replace(ea,"<").replace(fa,">").replace(ga,"'").replace(ha,'"').replace(ia," ").replace(ja,
"&")}f.push(a);n+=a.length}}o={source:f.join(""),h:r};var v=o.source;b.source=v;b.c=0;b.g=o.h;Q(i,v)(b);$(b)}catch(w){if("console"in window)console.log(w&&w.stack?w.stack:w)}}var A="str",R="kwd",C="com",S="typ",J="lit",E="pun",z="pln",P="src",V="nocode",Z=function(){for(var b=["!","!=","!==","#","%","%=","&","&&","&&=","&=","(","*","*=","+=",",","-=","->","/","/=",":","::",";","<","<<","<<=","<=","=","==","===",">",">=",">>",">>=",">>>",">>>=","?","@","[","^","^=","^^","^^=","{","|","|=","||","||=",
"~","break","case","continue","delete","do","else","finally","instanceof","return","throw","try","typeof"],f="(?:^^|[+-]",i=0;i<b.length;++i)f+="|"+b[i].replace(/([^=<>:&a-z])/g,"\\$1");f+=")\\s*";return f}(),L=/&/g,M=/</g,N=/>/g,X=/\"/g,ea=/&lt;/g,fa=/&gt;/g,ga=/&apos;/g,ha=/&quot;/g,ja=/&amp;/g,ia=/&nbsp;/g,ka=/[\r\n]/g,K=null,aa=RegExp("[^<]+|<!--[\\s\\S]*?--\>|<!\\[CDATA\\[[\\s\\S]*?\\]\\]>|</?[a-zA-Z](?:[^>\"']|'[^']*'|\"[^\"]*\")*>|<","g"),ba=/^<\!--/,ca=/^<!\[CDATA\[/,da=/^<br\b/i,W=/^<(\/?)([a-zA-Z][a-zA-Z0-9]*)/,
la=x({keywords:"break continue do else for if return while auto case char const default double enum extern float goto int long register short signed sizeof static struct switch typedef union unsigned void volatile catch class delete false import new operator private protected public this throw true try typeof alignof align_union asm axiom bool concept concept_map const_cast constexpr decltype dynamic_cast explicit export friend inline late_check mutable namespace nullptr reinterpret_cast static_assert static_cast template typeid typename using virtual wchar_t where break continue do else for if return while auto case char const default double enum extern float goto int long register short signed sizeof static struct switch typedef union unsigned void volatile catch class delete false import new operator private protected public this throw true try typeof abstract boolean byte extends final finally implements import instanceof null native package strictfp super synchronized throws transient as base by checked decimal delegate descending event fixed foreach from group implicit in interface internal into is lock object out override orderby params partial readonly ref sbyte sealed stackalloc string select uint ulong unchecked unsafe ushort var break continue do else for if return while auto case char const default double enum extern float goto int long register short signed sizeof static struct switch typedef union unsigned void volatile catch class delete false import new operator private protected public this throw true try typeof debugger eval export function get null set undefined var with Infinity NaN caller delete die do dump elsif eval exit foreach for goto if import last local my next no our print package redo require sub undef unless until use wantarray while BEGIN END break continue do else for if return while and as assert class def del elif except exec finally from global import in is lambda nonlocal not or pass print raise try with yield False True None break continue do else for if return while alias and begin case class def defined elsif end ensure false in module next nil not or redo rescue retry self super then true undef unless until when yield BEGIN END break continue do else for if return while case done elif esac eval fi function in local set then until ",
hashComments:true,cStyleComments:true,multiLineStrings:true,regexLiterals:true}),G={};u(la,["default-code"]);u(B([],[[z,/^[^<?]+/],["dec",/^<!\w[^>]*(?:>|$)/],[C,/^<\!--[\s\S]*?(?:-\->|$)/],["lang-",/^<\?([\s\S]+?)(?:\?>|$)/],["lang-",/^<%([\s\S]+?)(?:%>|$)/],[E,/^(?:<[%?]|[%?]>)/],["lang-",/^<xmp\b[^>]*>([\s\S]+?)<\/xmp\b[^>]*>/i],["lang-js",/^<script\b[^>]*>([\s\S]*?)(<\/script\b[^>]*>)/i],["lang-css",/^<style\b[^>]*>([\s\S]*?)(<\/style\b[^>]*>)/i],["lang-in.tag",/^(<\/?[a-z][^<>]*>)/i]]),["default-markup",
"htm","html","mxml","xhtml","xml","xsl"]);u(B([[z,/^[\s]+/,null," \t\r\n"],["atv",/^(?:\"[^\"]*\"?|\'[^\']*\'?)/,null,"\"'"]],[["tag",/^^<\/?[a-z](?:[\w.:-]*\w)?|\/?>$/i],["atn",/^(?!style[\s=]|on)[a-z](?:[\w:-]*\w)?/i],["lang-uq.val",/^=\s*([^>\'\"\s]*(?:[^>\'\"\s\/]|\/(?=\s)))/],[E,/^[=<>\/]+/],["lang-js",/^on\w+\s*=\s*\"([^\"]+)\"/i],["lang-js",/^on\w+\s*=\s*\'([^\']+)\'/i],["lang-js",/^on\w+\s*=\s*([^\"\'>\s]+)/i],["lang-css",/^style\s*=\s*\"([^\"]+)\"/i],["lang-css",/^style\s*=\s*\'([^\']+)\'/i],
["lang-css",/^style\s*=\s*([^\"\'>\s]+)/i]]),["in.tag"]);u(B([],[["atv",/^[\s\S]+/]]),["uq.val"]);u(x({keywords:"break continue do else for if return while auto case char const default double enum extern float goto int long register short signed sizeof static struct switch typedef union unsigned void volatile catch class delete false import new operator private protected public this throw true try typeof alignof align_union asm axiom bool concept concept_map const_cast constexpr decltype dynamic_cast explicit export friend inline late_check mutable namespace nullptr reinterpret_cast static_assert static_cast template typeid typename using virtual wchar_t where ",
hashComments:true,cStyleComments:true}),["c","cc","cpp","cxx","cyc","m"]);u(x({keywords:"null true false"}),["json"]);u(x({keywords:"break continue do else for if return while auto case char const default double enum extern float goto int long register short signed sizeof static struct switch typedef union unsigned void volatile catch class delete false import new operator private protected public this throw true try typeof abstract boolean byte extends final finally implements import instanceof null native package strictfp super synchronized throws transient as base by checked decimal delegate descending event fixed foreach from group implicit in interface internal into is lock object out override orderby params partial readonly ref sbyte sealed stackalloc string select uint ulong unchecked unsafe ushort var ",
hashComments:true,cStyleComments:true,verbatimStrings:true}),["cs"]);u(x({keywords:"break continue do else for if return while auto case char const default double enum extern float goto int long register short signed sizeof static struct switch typedef union unsigned void volatile catch class delete false import new operator private protected public this throw true try typeof abstract boolean byte extends final finally implements import instanceof null native package strictfp super synchronized throws transient ",
cStyleComments:true}),["java"]);u(x({keywords:"break continue do else for if return while case done elif esac eval fi function in local set then until ",hashComments:true,multiLineStrings:true}),["bsh","csh","sh"]);u(x({keywords:"break continue do else for if return while and as assert class def del elif except exec finally from global import in is lambda nonlocal not or pass print raise try with yield False True None ",hashComments:true,multiLineStrings:true,tripleQuotedStrings:true}),["cv","py"]);
u(x({keywords:"caller delete die do dump elsif eval exit foreach for goto if import last local my next no our print package redo require sub undef unless until use wantarray while BEGIN END ",hashComments:true,multiLineStrings:true,regexLiterals:true}),["perl","pl","pm"]);u(x({keywords:"break continue do else for if return while alias and begin case class def defined elsif end ensure false in module next nil not or redo rescue retry self super then true undef unless until when yield BEGIN END ",hashComments:true,
multiLineStrings:true,regexLiterals:true}),["rb"]);u(x({keywords:"break continue do else for if return while auto case char const default double enum extern float goto int long register short signed sizeof static struct switch typedef union unsigned void volatile catch class delete false import new operator private protected public this throw true try typeof debugger eval export function get null set undefined var with Infinity NaN ",cStyleComments:true,regexLiterals:true}),["js"]);u(B([],[[A,/^[\s\S]+/]]),
["regex"]);window.PR_normalizedHtml=H;window.prettyPrintOne=function(b,f){var i={f:b,e:f};U(i);return i.a};window.prettyPrint=function(b){function f(){for(var t=window.PR_SHOULD_USE_CONTINUATION?j.now()+250:Infinity;q<o.length&&j.now()<t;q++){var p=o[q];if(p.className&&p.className.indexOf("prettyprint")>=0){var c=p.className.match(/\blang-(\w+)\b/);if(c)c=c[1];for(var d=false,a=p.parentNode;a;a=a.parentNode)if((a.tagName==="pre"||a.tagName==="code"||a.tagName==="xmp")&&a.className&&a.className.indexOf("prettyprint")>=
0){d=true;break}if(!d){a=p;if(null===K){d=document.createElement("PRE");d.appendChild(document.createTextNode('<!DOCTYPE foo PUBLIC "foo bar">\n<foo />'));K=!/</.test(d.innerHTML)}if(K){d=a.innerHTML;if("XMP"===a.tagName)d=y(d);else{a=a;if("PRE"===a.tagName)a=true;else if(ka.test(d)){var k="";if(a.currentStyle)k=a.currentStyle.whiteSpace;else if(window.getComputedStyle)k=window.getComputedStyle(a,null).whiteSpace;a=!k||k==="pre"}else a=true;a||(d=d.replace(/(<br\s*\/?>)[\r\n]+/g,"$1").replace(/(?:[\r\n]+[ \t]*)+/g,
" "))}d=d}else{d=[];for(a=a.firstChild;a;a=a.nextSibling)H(a,d);d=d.join("")}d=d.replace(/(?:\r\n?|\n)$/,"");m={f:d,e:c,b:p};U(m);if(p=m.a){c=m.b;if("XMP"===c.tagName){d=document.createElement("PRE");for(a=0;a<c.attributes.length;++a){k=c.attributes[a];if(k.specified)if(k.name.toLowerCase()==="class")d.className=k.value;else d.setAttribute(k.name,k.value)}d.innerHTML=p;c.parentNode.replaceChild(d,c)}else c.innerHTML=p}}}}if(q<o.length)setTimeout(f,250);else b&&b()}for(var i=[document.getElementsByTagName("pre"),
document.getElementsByTagName("code"),document.getElementsByTagName("xmp")],o=[],l=0;l<i.length;++l)for(var n=0,r=i[l].length;n<r;++n)o.push(i[l][n]);i=null;var j=Date;j.now||(j={now:function(){return(new Date).getTime()}});var q=0,m;f()};window.PR={combinePrefixPatterns:O,createSimpleLexer:B,registerLangHandler:u,sourceDecorator:x,PR_ATTRIB_NAME:"atn",PR_ATTRIB_VALUE:"atv",PR_COMMENT:C,PR_DECLARATION:"dec",PR_KEYWORD:R,PR_LITERAL:J,PR_NOCODE:V,PR_PLAIN:z,PR_PUNCTUATION:E,PR_SOURCE:P,PR_STRING:A,
PR_TAG:"tag",PR_TYPE:S}})()

View File

@@ -0,0 +1,249 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title>Dynatree - Example</title>
<script src="../jquery/jquery.js" type="text/javascript"></script>
<script src="../jquery/jquery-ui.custom.js" type="text/javascript"></script>
<script src="../jquery/jquery.cookie.js" type="text/javascript"></script>
<link href="../src/skin/ui.dynatree.css" rel="stylesheet" type="text/css">
<script src="../src/jquery.dynatree.js" type="text/javascript"></script>
<!-- Start_Exclude: This block is not part of the sample code -->
<link href="prettify.css" rel="stylesheet">
<script src="prettify.js" type="text/javascript"></script>
<link href="sample.css" rel="stylesheet" type="text/css">
<script src="sample.js" type="text/javascript"></script>
<!-- End_Exclude -->
<script type="text/javascript">
$(function(){
// Initialize the tree inside the <div>element.
// The tree structure is read from the contained <ul> tag.
$("#tree").dynatree({
title: "Programming Sample",
onActivate: function(node) {
$("#echoActive").text(node.data.title);
// alert(node.getKeyPath());
if( node.data.url )
window.open(node.data.url, node.data.target);
},
onDeactivate: function(node) {
$("#echoSelected").text("-");
},
onFocus: function(node) {
$("#echoFocused").text(node.data.title);
},
onBlur: function(node) {
$("#echoFocused").text("-");
},
onLazyRead: function(node){
var fakeJsonResult = [
{ title: 'Lazy node 1', isLazy: true },
{ title: 'Simple node 2', select: true }
];
// alert ("Let's pretend we're using this AJAX response to load the branch:\n " + jsonResult);
function fakeAjaxResponse() {
return function() {
node.addChild(fakeJsonResult);
// Remove the 'loading...' status:
node.setLazyNodeStatus(DTNodeStatus_Ok);
};
}
window.setTimeout(fakeAjaxResponse(), 1500);
}
});
$("#btnAddCode").click(function(){
// Sample: add an hierarchic branch using code.
// This is how we would add tree nodes programatically
var rootNode = $("#tree").dynatree("getRoot");
var childNode = rootNode.addChild({
title: "Programatically addded nodes",
tooltip: "This folder and all child nodes were added programmatically.",
isFolder: true
});
childNode.addChild({
title: "Document using a custom icon",
icon: "customdoc1.gif"
});
});
$("#btnAddObject").click(function(){
// Sample: add an hierarchic branch using an array
var obj = [
{ title: 'Lazy node 1', isLazy: true },
{ title: 'Lazy node 2', isLazy: true },
{ title: 'Folder node 3', isFolder: true,
children: [
{ title: 'node 3.1' },
{ title: 'node 3.2',
children: [
{ title: 'node 3.2.1' },
{ title: 'node 3.2.2',
children: [
{ title: 'node 3.2.2.1' }
]
}
]
}
]
}
];
$("#tree").dynatree("getRoot").addChild(obj);
});
$("#btnActiveNode").click(function(){
$("#tree").dynatree("getTree").activateKey("id4.3.2");
// $("#tree").dynatree("getTree").getNodeByKey("id4.3.2").activate();
});
$("#btnSetTitle").click(function(){
var node = $("#tree").dynatree("getActiveNode");
if( !node ) return;
node.setTitle(node.data.title + ", " + new Date());
// this is a shortcut for
// node.fromDict({title: node.data.title + new Date()});
});
$("#btnFromDict").click(function(){
var node = $("#tree").dynatree("getActiveNode");
if( !node ) return;
// Set node data and - optionally - replace children
node.fromDict({
title: node.data.title + new Date(),
children: [{title: "t1"}, {title: "t2"}]
});
});
$("#btnShowActive").click(function(){
var node = $("#tree").dynatree("getActiveNode");
if( node ){
alert("Currently active: " + node.data.title);
}else{
alert("No active node.");
}
});
$("#btnDisable").toggle(function(){
$("#tree").dynatree("disable");
$(this).text("Enable");
return false;
}, function(){
$("#tree").dynatree("enable");
$(this).text("Disable");
return false;
});
$("#btnToggleExpand").click(function(){
$("#tree").dynatree("getRoot").visit(function(node){
node.toggleExpand();
});
return false;
});
$("#btnCollapseAll").click(function(){
$("#tree").dynatree("getRoot").visit(function(node){
node.expand(false);
});
return false;
});
$("#btnExpandAll").click(function(){
$("#tree").dynatree("getRoot").visit(function(node){
node.expand(true);
});
return false;
});
$("#btnSortActive").click(function(){
var node = $("#tree").dynatree("getActiveNode");
// Custom compare function (optional) that sorts case insensitive
var cmp = function(a, b) {
a = a.data.title.toLowerCase();
b = b.data.title.toLowerCase();
return a > b ? 1 : a < b ? -1 : 0;
};
node.sortChildren(cmp, false);
});
$("#btnSortAll").click(function(){
var node = $("#tree").dynatree("getRoot");
node.sortChildren(null, true);
});
});
</script>
</head>
<body class="example">
<h1>Dynatree API</h1>
<p class="description">
This example demonstrates the usage of some DynaTree and DynaTreeNode
API functions.
</p>
<p>
<a href="#" id="btnExpandAll">Expand all</a> -
<a href="#" id="btnCollapseAll">Collapse all</a> -
<a href="#" id="btnToggleExpand">Toggle expand</a>
<br>
<a href="#" id="btnSortAll">Sort tree</a>
<a href="#" id="btnSortActive">Sort current node</a>
<br>
<a href="#" id="btnDisable">Disable</a>
</p>
<div id="tree">
<ul>
<li>This simple node (and the following) have been created from html.
<li id="id1" title="This is item #1">item1 with key and tooltip
<li id="id2">item2 with key 'id2'
<li id="id3" class="folder">Standard Folder with some children
<ul>
<li id="id3.1">Sub-item 3.1
<li id="id3.2">Sub-item 3.2
</ul>
<li id="id4">item 4. Note that also non-folders (i.e. 'documents') may have child nodes
<ul>
<li id="id4.1">Sub-item 4.1
<li id="id4.2">Sub-item 4.2
<li id="id4.3">Sub-item 4.3
<ul>
<li id="id4.3.1">Sub-item 4.3.1
<li id="id4.3.2">Sub-item 4.3.2
<ul>
<li id="id4.3.2.1">Sub-item 4.3.2.1
<li id="id4.3.2.2">Sub-item 4.3.2.2
</ul>
</ul>
<li id="id4.4">Sub-item 4.4
</ul>
<li id="id5" class="expanded folder">Advanced examples
<ul>
<li data="key: 'node5.1'">item5.1: Using data attribute as an alternative way to specify a key.
<li data="key: 'node5.3', isFolder: true">item5.1: Using data attribute as an alternative way to specify a folder.
<li id="id5.2">Sub-item 5.2
<li>Item without a key. Keys are optional (generated automatically), but may be used in the callbacks
</ul>
</ul>
</div>
<div>Active node: <span id="echoActive">-</span></div>
<div>Focused node: <span id="echoFocused">-</span></div>
<p>
<button id="btnAddCode">Add nodes programmatically</button>
<button id="btnAddObject">Add nodes using arrays</button>
<button id="btnActiveNode">Activate item id4.3.2</button>
<button id="btnShowActive">Show active node...</button>
<button id="btnSetTitle">Set active node title</button>
<button id="btnFromDict">Modify active node fom dict</button>
</p>
<!-- Start_Exclude: This block is not part of the sample code -->
<hr>
<p class="sample-links no_code">
<a class="hideInsideFS" href="http://dynatree.googlecode.com">jquery.dynatree.js project home</a>
<a class="hideOutsideFS" href="#">Link to this page</a>
<a class="hideInsideFS" href="samples.html">Example Browser</a>
<a href="#" id="codeExample">View source code</a>
</p>
<pre id="sourceCode" class="prettyprint" style="display:none"></pre>
<!-- End_Exclude -->
</body>
</html>

View File

@@ -0,0 +1,248 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title>Dynatree - Example</title>
<script src="../jquery/jquery.js" type="text/javascript"></script>
<script src="../jquery/jquery-ui.custom.js" type="text/javascript"></script>
<script src="../jquery/jquery.cookie.js" type="text/javascript"></script>
<link href="../src/skin/ui.dynatree.css" rel="stylesheet" type="text/css">
<script src="../src/jquery.dynatree.js" type="text/javascript"></script>
<!-- jquery.contextmenu, A Beautiful Site (http://abeautifulsite.net/) -->
<script src="contextmenu/jquery.contextMenu-custom.js" type="text/javascript"></script>
<link href="contextmenu/jquery.contextMenu.css" rel="stylesheet" type="text/css" >
<!-- Start_Exclude: This block is not part of the sample code -->
<link href="prettify.css" rel="stylesheet">
<script src="prettify.js" type="text/javascript"></script>
<link href="sample.css" rel="stylesheet" type="text/css">
<script src="sample.js" type="text/javascript"></script>
<!-- End_Exclude -->
<script type="text/javascript">
// --- Implement Cut/Copy/Paste --------------------------------------------
var clipboardNode = null;
var pasteMode = null;
function copyPaste(action, node) {
switch( action ) {
case "cut":
case "copy":
clipboardNode = node;
pasteMode = action;
break;
case "paste":
if( !clipboardNode ) {
alert("Clipoard is empty.");
break;
}
if( pasteMode == "cut" ) {
// Cut mode: check for recursion and remove source
var isRecursive = false;
var cb = clipboardNode.toDict(true, function(dict){
// If one of the source nodes is the target, we must not move
if( dict.key == node.data.key )
isRecursive = true;
});
if( isRecursive ) {
alert("Cannot move a node to a sub node.");
return;
}
node.addChild(cb);
clipboardNode.remove();
} else {
// Copy mode: prevent duplicate keys:
var cb = clipboardNode.toDict(true, function(dict){
dict.title = "Copy of " + dict.title;
delete dict.key; // Remove key, so a new one will be created
});
node.addChild(cb);
}
clipboardNode = pasteMode = null;
break;
default:
alert("Unhandled clipboard action '" + action + "'");
}
};
// --- Contextmenu helper --------------------------------------------------
function bindContextMenu(span) {
// Add context menu to this node:
$(span).contextMenu({menu: "myMenu"}, function(action, el, pos) {
// The event was bound to the <span> tag, but the node object
// is stored in the parent <li> tag
var node = $.ui.dynatree.getNode(el);
switch( action ) {
case "cut":
case "copy":
case "paste":
copyPaste(action, node);
break;
default:
alert("Todo: appply action '" + action + "' to node " + node);
}
});
};
// --- Init dynatree during startup ----------------------------------------
$(function(){
$("#tree").dynatree({
persist: true,
onActivate: function(node) {
$("#echoActivated").text(node.data.title + ", key=" + node.data.key);
},
onClick: function(node, event) {
// Close menu on click
if( $(".contextMenu:visible").length > 0 ){
$(".contextMenu").hide();
// return false;
}
},
onKeydown: function(node, event) {
// Eat keyboard events, when a menu is open
if( $(".contextMenu:visible").length > 0 )
return false;
switch( event.which ) {
// Open context menu on [Space] key (simulate right click)
case 32: // [Space]
$(node.span).trigger("mousedown", {
preventDefault: true,
button: 2
})
.trigger("mouseup", {
preventDefault: true,
pageX: node.span.offsetLeft,
pageY: node.span.offsetTop,
button: 2
});
return false;
// Handle Ctrl-C, -X and -V
case 67:
if( event.ctrlKey ) { // Ctrl-C
copyPaste("copy", node);
return false;
}
break;
case 86:
if( event.ctrlKey ) { // Ctrl-V
copyPaste("paste", node);
return false;
}
break;
case 88:
if( event.ctrlKey ) { // Ctrl-X
copyPaste("cut", node);
return false;
}
break;
}
},
/*Bind context menu for every node when it's DOM element is created.
We do it here, so we can also bind to lazy nodes, which do not
exist at load-time. (abeautifulsite.net menu control does not
support event delegation)*/
onCreate: function(node, span){
bindContextMenu(span);
},
/*Load lazy content (to show that context menu will work for new items too)*/
onLazyRead: function(node){
node.appendAjax({
url: "sample-data2.json"
});
},
/* D'n'd, just to show it's compatible with a context menu.
See http://code.google.com/p/dynatree/issues/detail?id=174 */
dnd: {
preventVoidMoves: true, // Prevent dropping nodes 'before self', etc.
onDragStart: function(node) {
return true;
},
onDragEnter: function(node, sourceNode) {
if(node.parent !== sourceNode.parent)
return false;
return ["before", "after"];
},
onDrop: function(node, sourceNode, hitMode, ui, draggable) {
sourceNode.move(node, hitMode);
}
}
});
});
</script>
</head>
<body class="example">
<h1>Example: Context Menu</h1>
<p class="description">
Implementation of a context menu. Right-click a node and see what happens.<br>
Also [space] key is supported to open the menu.<br>
<br>
This example also demonstrates, how to copy or move branches and how
to implement clipboard functionality.
<br>
A keyboard handler implements Cut, Copy, and Paste with <code>Ctrl-X</code>,
<code>Ctrl-C</code>, <code>Ctrl-V</code>.
</p>
<p class="description">
This sample uses the jQuery Context Menu Plugin by Cory S.N. LaViska.
Visit <a href="http://abeautifulsite.net/">A Beautiful Site</a> for usage and more information.
<br>
<b>NOTE:</b></br>
I had to <a href="http://code.google.com/p/dynatree/issues/detail?id=174">patch Cory's code</a> in order to make it work. Please understand, that I am not able to support this plugin. There are many other context menus
out there :-)
</p>
<!-- Definition of context menu -->
<ul id="myMenu" class="contextMenu">
<li class="edit"><a href="#edit">Edit</a></li>
<li class="cut separator"><a href="#cut">Cut</a></li>
<li class="copy"><a href="#copy">Copy</a></li>
<li class="paste"><a href="#paste">Paste</a></li>
<li class="delete"><a href="#delete">Delete</a></li>
<li class="quit separator"><a href="#quit">Quit</a></li>
</ul>
<!-- Definition tree structure -->
<div id="tree">
<ul>
<li id="id1" title="Look, a tool tip!">item1 with key and tooltip
<li id="id2" class="activate">item2: activated on init
<li id="id3" class="folder">Folder with some children
<ul>
<li id="id3.1">Sub-item 3.1
<li id="id3.2">Sub-item 3.2
</ul>
<li id="id4" class="expanded">Document with some children (expanded on init)
<ul>
<li id="id4.1">Sub-item 4.1
<li id="id4.2">Sub-item 4.2
</ul>
<li id="id5" class="lazy folder">Lazy folder
</ul>
</div>
<div>Selected node: <span id="echoActivated">-</span></div>
<!-- Start_Exclude: This block is not part of the sample code -->
<hr>
<p class="sample-links no_code">
<a class="hideInsideFS" href="http://dynatree.googlecode.com">jquery.dynatree.js project home</a>
<a class="hideOutsideFS" href="#">Link to this page</a>
<a class="hideInsideFS" href="samples.html">Example Browser</a>
<a href="#" id="codeExample">View source code</a>
</p>
<pre id="sourceCode" class="prettyprint" style="display:none"></pre>
<!-- End_Exclude -->
</body>
</html>

View File

@@ -0,0 +1,249 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title>Dynatree - Example</title>
<script src="../jquery/jquery.js" type="text/javascript"></script>
<script src="../jquery/jquery-ui.custom.js" type="text/javascript"></script>
<script src="../jquery/jquery.cookie.js" type="text/javascript"></script>
<link href="../src/skin/ui.dynatree.css" rel="stylesheet" type="text/css">
<script src="../src/jquery.dynatree.js" type="text/javascript"></script>
<!-- jquery.contextmenu, A Beautiful Site (http://abeautifulsite.net/) -->
<!--
<script src="contextmenu/jquery.contextMenu-custom.js" type="text/javascript"></script>
<link href="contextmenu/jquery.contextMenu.css" rel="stylesheet" type="text/css" >
-->
<!-- medialize jQuery contextMenu (http://github.com/medialize/jQuery-contextMenu) -->
<!--
-->
<script src="jq.context/jquery.ui.position.js" type="text/javascript"></script>
<script src="jq.context/jquery.contextMenu.js" type="text/javascript"></script>
<link href="jq.context/jquery.contextMenu.css" rel="stylesheet" type="text/css" />
<!-- Start_Exclude: This block is not part of the sample code -->
<link href="prettify.css" rel="stylesheet">
<script src="prettify.js" type="text/javascript"></script>
<link href="sample.css" rel="stylesheet" type="text/css">
<script src="sample.js" type="text/javascript"></script>
<!-- End_Exclude -->
<script type="text/javascript">
// --- Implement Cut/Copy/Paste --------------------------------------------
var clipboardNode = null;
var pasteMode = null;
function copyPaste(action, node) {
switch( action ) {
case "cut":
case "copy":
clipboardNode = node;
pasteMode = action;
break;
case "paste":
if( !clipboardNode ) {
alert("Clipoard is empty.");
break;
}
if( pasteMode == "cut" ) {
// Cut mode: check for recursion and remove source
var isRecursive = false;
var cb = clipboardNode.toDict(true, function(dict){
// If one of the source nodes is the target, we must not move
if( dict.key == node.data.key )
isRecursive = true;
});
if( isRecursive ) {
alert("Cannot move a node to a sub node.");
return;
}
node.addChild(cb);
clipboardNode.remove();
} else {
// Copy mode: prevent duplicate keys:
var cb = clipboardNode.toDict(true, function(dict){
dict.title = "Copy of " + dict.title;
delete dict.key; // Remove key, so a new one will be created
});
node.addChild(cb);
}
clipboardNode = pasteMode = null;
break;
default:
alert("Unhandled clipboard action '" + action + "'");
}
};
// --- Init dynatree during startup ----------------------------------------
$(function(){
$("#tree").dynatree({
persist: true,
onActivate: function(node) {
$("#echoActivated").text(node.data.title + ", key=" + node.data.key);
},
/*
onClick: function(node, event) {
// Close menu on click
if( $(".contextMenu:visible").length > 0 ){
$(".contextMenu").hide();
// return false;
}
},
*/
onKeydown: function(node, event) {
// Eat keyboard events, when a menu is open
if( $(".contextMenu:visible").length > 0 ){
return false;
}
switch( event.which ) {
// Open context menu on [Space] key (simulate right click)
case 32: // [Space]
$("a", node.span).contextMenu();
return false;
// Handle Ctrl-C, -X and -V
case 67:
if( event.ctrlKey ) { // Ctrl-C
copyPaste("copy", node);
return false;
}
break;
case 86:
if( event.ctrlKey ) { // Ctrl-V
copyPaste("paste", node);
return false;
}
break;
case 88:
if( event.ctrlKey ) { // Ctrl-X
copyPaste("cut", node);
return false;
}
break;
}
},
/*Load lazy content (to show that context menu will work for new items too)*/
onLazyRead: function(node){
node.appendAjax({
url: "sample-data2.json"
});
},
/* D'n'd, just to show it's compatible with a context menu.
See http://code.google.com/p/dynatree/issues/detail?id=174 */
dnd: {
preventVoidMoves: true, // Prevent dropping nodes 'before self', etc.
onDragStart: function(node) {
return true;
},
onDragEnter: function(node, sourceNode) {
if(node.parent !== sourceNode.parent)
return false;
return ["before", "after"];
},
onDrop: function(node, sourceNode, hitMode, ui, draggable) {
sourceNode.move(node, hitMode);
}
}
}); // $.dynatree
/*
$(document).on('contextmenu.contextMenu', function(e){
alert("on contextmenu");
});
*/
// jQuery contextMenu blocks mouse events, so we have to catch them in order to
// activate the node on click
$(document).on('mousedown.contextMenu', function(e){
var node = $.ui.dynatree.getNode(e.target);
window.console && console.log("e: %o, node: %o", e, node);
node && node.activate();
});
$.contextMenu({
// bind menu to every dynatree node
selector: 'a.dynatree-title',
// called for every menu command
callback: function(cmd, options) {
var node = $.ui.dynatree.getNode(this);
window.console && console.log(cmd + " - " + node);
node.activate();
copyPaste(cmd, node);
},
items: {
"edit": {name: "Edit", icon: "edit"},
"cut": {name: "Cut", icon: "cut"},
"copy": {name: "Copy", icon: "copy"},
"paste": {name: "Paste", icon: "paste"},
"delete": {name: "Delete", icon: "delete"},
"sep1": "---------",
"quit": {name: "Quit", icon: "quit"}
}
}); // $.contextMenu()
}); // $(function){...}
</script>
</head>
<body class="example">
<h1>Example: Context Menu</h1>
<p class="description">
Implementation of a context menu. Right-click a node and see what happens.<br>
Also [space] key is supported to open the menu.<br>
<br>
This example also demonstrates, how to copy or move branches and how
to implement clipboard functionality.
<br>
A keyboard handler implements Cut, Copy, and Paste with <code>Ctrl-X</code>,
<code>Ctrl-C</code>, <code>Ctrl-V</code>.
</p>
<p class="description">
This sample uses the jQuery Context Menu Plugin by Rodney Rehm.
Visit <a href="http://medialize.github.com/jQuery-contextMenu/index.html">the project page at github</a> for usage and more information.
<br>
<b>NOTE:</b></br>
Please understand, that I am not able to support this plugin. There are many other context menus
out there :-)
</p>
<!-- Definition tree structure -->
<div id="tree">
<ul>
<li id="id1" title="Look, a tool tip!">item1 with key and tooltip
<li id="id2" class="activate">item2: activated on init
<li id="id3" class="folder">Folder with some children
<ul>
<li id="id3.1">Sub-item 3.1
<li id="id3.2">Sub-item 3.2
</ul>
<li id="id4" class="expanded">Document with some children (expanded on init)
<ul>
<li id="id4.1">Sub-item 4.1
<li id="id4.2">Sub-item 4.2
</ul>
<li id="id5" class="lazy folder">Lazy folder
</ul>
</div>
<div>Selected node: <span id="echoActivated">-</span></div>
<!-- Start_Exclude: This block is not part of the sample code -->
<hr>
<p class="sample-links no_code">
<a class="hideInsideFS" href="http://dynatree.googlecode.com">jquery.dynatree.js project home</a>
<a class="hideOutsideFS" href="#">Link to this page</a>
<a class="hideInsideFS" href="samples.html">Example Browser</a>
<a href="#" id="codeExample">View source code</a>
</p>
<pre id="sourceCode" class="prettyprint" style="display:none"></pre>
<!-- End_Exclude -->
</body>
</html>

View File

@@ -0,0 +1,16 @@
[
{"title": "Item 1"},
{"title": "Folder 2", "isFolder": true, "key": "folder2",
"children": [
{"title": "Sub-item 2.1"},
{"title": "Sub-item 2.2"}
]
},
{"title": "Folder 3", "isFolder": true, "key": "folder3",
"children": [
{"title": "Sub-item 3.1"},
{"title": "Sub-item 3.2"}
]
},
{"title": "Item 5"}
]

View File

@@ -0,0 +1 @@
[ {"title": "SubItem 1", "isLazy": true }, {"title": "SubFolder 2", "isFolder": true, "isLazy": true } ]

View File

@@ -0,0 +1,41 @@
[
{"title": "Item 1"},
{"title": "Folder 2", "isFolder": true, "key": "folder2", "expand": true,
"children": [
{"title": "Sub-item 2.1",
"children": [
{"title": "Sub-item 2.1.1",
"children": [
{"title": "Sub-item 2.1.1.1"},
{"title": "Sub-item 2.1.2.2"},
{"title": "Sub-item 2.1.1.3"},
{"title": "Sub-item 2.1.2.4"}
]
},
{"title": "Sub-item 2.1.2"},
{"title": "Sub-item 2.1.3"},
{"title": "Sub-item 2.1.4"}
]
},
{"title": "Sub-item 2.2"},
{"title": "Sub-item 2.3 (lazy)", "isLazy": true }
]
},
{"title": "Folder 3", "isFolder": true, "key": "folder3",
"children": [
{"title": "Sub-item 3.1",
"children": [
{"title": "Sub-item 3.1.1"},
{"title": "Sub-item 3.1.2"},
{"title": "Sub-item 3.1.3"},
{"title": "Sub-item 3.1.4"}
]
},
{"title": "Sub-item 3.2"},
{"title": "Sub-item 3.3"},
{"title": "Sub-item 3.4"}
]
},
{"title": "Lazy Folder 4", "isFolder": true, "isLazy": true, "key": "folder4"},
{"title": "Item 5"}
]

View File

@@ -0,0 +1,99 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title>Dynatree - Example</title>
<script src="../jquery/jquery.js" type="text/javascript"></script>
<script src="../jquery/jquery-ui.custom.js" type="text/javascript"></script>
<script src="../jquery/jquery.cookie.js" type="text/javascript"></script>
<link href="../src/skin/ui.dynatree.css" rel="stylesheet" type="text/css" id="skinSheet">
<script src="../src/jquery.dynatree.js" type="text/javascript"></script>
<!-- Start_Exclude: This block is not part of the sample code -->
<link href="prettify.css" rel="stylesheet">
<script src="prettify.js" type="text/javascript"></script>
<link href="sample.css" rel="stylesheet" type="text/css">
<script src="sample.js" type="text/javascript"></script>
<!-- End_Exclude -->
<script type="text/javascript">
$(function(){
$("#tree").dynatree({
// using default options
});
<!-- Start_Exclude: This block is not part of the sample code -->
$("#skinCombo")
.val(0) // set state to prevent caching
.change(function(){
var href = "../src/"
+ $(this).val()
+ "/ui.dynatree.css"
+ "?reload=" + new Date().getTime();
$("#skinSheet").attr("href", href);
});
<!-- End_Exclude -->
});
</script>
</head>
<body class="example">
<h1>Example: Default</h1>
<p class="description">
This tree uses default options.<br>
It is initalized from a hidden &lt;ul> element on this page.
</p>
<div>
Skin:
<select id="skinCombo" size="1">
<option value="skin">Standard ('/skin/')</option>
<option value="skin-vista">Vista ('/skin-vista/')</option>
</select>
</div>
<div id="tree">
<ul id="treeData" style="display: none;">
<li id="id1" title="Look, a tool tip!">item1 with key and tooltip
<li id="id2">item2
<li id="id3" class="folder">Folder with some children
<ul>
<li id="id3.1">Sub-item 3.1
<ul>
<li id="id3.1.1">Sub-item 3.1.1
<li id="id3.1.2">Sub-item 3.1.2
</ul>
<li id="id3.2">Sub-item 3.2
<ul>
<li id="id3.2.1">Sub-item 3.2.1
<li id="id3.2.2">Sub-item 3.2.2
</ul>
</ul>
<li id="id4" class="expanded">Document with some children (expanded on init)
<ul>
<li id="id4.1" class="active focused">Sub-item 4.1 (active and focus on init)
<ul>
<li id="id4.1.1">Sub-item 4.1.1
<li id="id4.1.2">Sub-item 4.1.2
</ul>
<li id="id4.2">Sub-item 4.2
<ul>
<li id="id4.2.1">Sub-item 4.2.1
<li id="id4.2.2">Sub-item 4.2.2
</ul>
</ul>
</ul>
</div>
<!-- Start_Exclude: This block is not part of the sample code -->
<hr>
<p class="sample-links no_code">
<a class="hideInsideFS" href="http://dynatree.googlecode.com">jquery.dynatree.js project home</a>
<a class="hideOutsideFS" href="#">Link to this page</a>
<a class="hideInsideFS" href="samples.html">Example Browser</a>
<a href="#" id="codeExample">View source code</a>
</p>
<pre id="sourceCode" class="prettyprint" style="display:none"></pre>
<!-- End_Exclude -->
</body>
</html>

View File

@@ -0,0 +1,92 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title>Dynatree - Example</title>
<script src="../jquery/jquery.js" type="text/javascript"></script>
<script src="../jquery/jquery-ui.custom.js" type="text/javascript"></script>
<script src="../jquery/jquery.cookie.js" type="text/javascript"></script>
<link href="../src/skin/ui.dynatree.css" rel="stylesheet" type="text/css">
<script src="../src/jquery.dynatree.js" type="text/javascript"></script>
<!-- Start_Exclude: This block is not part of the sample code -->
<link href="prettify.css" rel="stylesheet">
<script src="prettify.js" type="text/javascript"></script>
<link href="sample.css" rel="stylesheet" type="text/css">
<script src="sample.js" type="text/javascript"></script>
<!-- End_Exclude -->
<script type="text/javascript"><!--
$(function(){
// --- Initialize first Dynatree -------------------------------------------
$("#tree").dynatree({
initAjax: {
url: "sample-data3.json"
},
onLazyRead: function(node){
// Mockup a slow reqeuest ...
node.appendAjax({
url: "sample-data2.json",
debugLazyDelay: 750 // don't do thi in production code
});
},
dnd: {
preventVoidMoves: true, // Prevent dropping nodes 'before self', etc.
onDragStart: function(node) {
/** This function MUST be defined to enable dragging for the tree.
* Return false to cancel dragging of node.
*/
return true;
},
onDragEnter: function(node, sourceNode) {
/** sourceNode may be null for non-dynatree droppables.
* Return false to disallow dropping on node. In this case
* onDragOver and onDragLeave are not called.
* Return 'over', 'before, or 'after' to force a hitMode.
* Return ['before', 'after'] to restrict available hitModes.
* Any other return value will calc the hitMode from the cursor position.
*/
// Prevent dropping a parent below another parent (only sort
// nodes under the same parent)
if(node.parent !== sourceNode.parent){
return false;
}
// Don't allow dropping *over* a node (would create a child)
return ["before", "after"];
},
onDrop: function(node, sourceNode, hitMode, ui, draggable) {
/** This function MUST be defined to enable dropping of items on
* the tree.
*/
sourceNode.move(node, hitMode);
}
}
});
});
--></script>
</head>
<body class="example">
<h1>Example: Sort nodes using drag-and-drop</h1>
<p class="description">
This sample uses Dynatree's built-in drag-and-drop feature to move nodes.<br>
- A node may only be dragged under it's original parent.<br>
- When dropped, the node is moved to the target.
</p>
<div id="tree"> </div>
<!-- Start_Exclude: This block is not part of the sample code -->
<hr>
<p class="sample-links no_code">
<a class="hideInsideFS" href="http://dynatree.googlecode.com">jquery.dynatree.js project home</a>
<a class="hideOutsideFS" href="#">Link to this page</a>
<a class="hideInsideFS" href="samples.html">Example Browser</a>
<a href="#" id="codeExample">View source code</a>
</p>
<pre id="sourceCode" class="prettyprint" style="display:none"></pre>
<!-- End_Exclude -->
</body>
</html>

View File

@@ -0,0 +1,125 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title>Dynatree - Example</title>
<script src="../jquery/jquery.js" type="text/javascript"></script>
<script src="../jquery/jquery-ui.custom.js" type="text/javascript"></script>
<script src="../jquery/jquery.cookie.js" type="text/javascript"></script>
<link href="../src/skin/ui.dynatree.css" rel="stylesheet" type="text/css">
<script src="../src/jquery.dynatree.js" type="text/javascript"></script>
<!-- Start_Exclude: This block is not part of the sample code -->
<link href="prettify.css" rel="stylesheet">
<script src="prettify.js" type="text/javascript"></script>
<link href="sample.css" rel="stylesheet" type="text/css">
<script src="sample.js" type="text/javascript"></script>
<!-- End_Exclude -->
<style type="text/css">
ul.dynatree-container {
overflow: scroll;
position: relative;
width: 200px;
height: 250px;
};
</style>
<script type="text/javascript"><!--
$(function(){
// --- Initialize first Dynatree -------------------------------------------
$("#tree").dynatree({
initAjax: {
url: "sample-data3.json"
},
onLazyRead: function(node){
// Mockup a slow reqeuest ...
node.appendAjax({
url: "sample-data2.json",
debugLazyDelay: 750 // don't do this in production code
});
},
dnd: {
onDragStart: function(node) {
/** This function MUST be defined to enable dragging for the tree.
* Return false to cancel dragging of node.
*/
logMsg("tree.onDragStart(%o)", node);
return true;
},
onDragStop: function(node) {
// This function is optional.
logMsg("tree.onDragStop(%o)", node);
},
autoExpandMS: 1000,
preventVoidMoves: true, // Prevent dropping nodes 'before self', etc.
onDragEnter: function(node, sourceNode) {
/** sourceNode may be null for non-dynatree droppables.
* Return false to disallow dropping on node. In this case
* onDragOver and onDragLeave are not called.
* Return 'over', 'before, or 'after' to force a hitMode.
* Return ['before', 'after'] to restrict available hitModes.
* Any other return value will calc the hitMode from the cursor position.
*/
logMsg("tree.onDragEnter(%o, %o)", node, sourceNode);
return true;
},
onDragOver: function(node, sourceNode, hitMode) {
/** Return false to disallow dropping this node.
*
*/
logMsg("tree.onDragOver(%o, %o, %o)", node, sourceNode, hitMode);
// Prevent dropping a parent below it's own child
if(node.isDescendantOf(sourceNode)){
return false;
}
// Prohibit creating childs in non-folders (only sorting allowed)
if( !node.data.isFolder && hitMode === "over" ){
return "after";
}
},
onDrop: function(node, sourceNode, hitMode, ui, draggable) {
/** This function MUST be defined to enable dropping of items on
* the tree.
*/
logMsg("tree.onDrop(%o, %o, %s)", node, sourceNode, hitMode);
sourceNode.move(node, hitMode);
// expand the drop target
// sourceNode.expand(true);
},
onDragLeave: function(node, sourceNode) {
/** Always called if onDragEnter was called.
*/
logMsg("tree.onDragLeave(%o, %o)", node, sourceNode);
}
}
});
});
--></script>
</head>
<body class="example">
<h1>Example: Move nodes using drag-and-drop</h1>
<p class="description">
This sample uses Dynatree's built-in drag-and-drop feature to move nodes.<br>
- autoExpandMS option is used to expand nodes on mouse hover.<br>
- The container style uses `overflow: scroll` to demonstrate auto-scrolling.<br>
- When dropped, the node is moved to the target.
</p>
<div id="tree"> </div>
<!-- Start_Exclude: This block is not part of the sample code -->
<hr>
<p class="sample-links no_code">
<a class="hideInsideFS" href="http://dynatree.googlecode.com">jquery.dynatree.js project home</a>
<a class="hideOutsideFS" href="#">Link to this page</a>
<a class="hideInsideFS" href="samples.html">Example Browser</a>
<a href="#" id="codeExample">View source code</a>
</p>
<pre id="sourceCode" class="prettyprint" style="display:none"></pre>
<!-- End_Exclude -->
</body>
</html>

View File

@@ -0,0 +1,269 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title>Dynatree - Example</title>
<!--
<script src="../jquery/jquery.cookie.js" type="text/javascript"></script>
<script src="../jquery/jquery.js" type="text/javascript"></script>
<script src="../jquery/jquery-ui.custom.js" type="text/javascript"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" type="text/javascript"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js" type="text/javascript"></script>
-->
<script src="../jquery/jquery.cookie.js" type="text/javascript"></script>
<script src="../jquery/jquery.js" type="text/javascript"></script>
<script src="../jquery/jquery-ui.custom.js" type="text/javascript"></script>
<link href="../src/skin/ui.dynatree.css" rel="stylesheet" type="text/css" id="skinSheet">
<script src="../src/jquery.dynatree.js" type="text/javascript"></script>
<style type="text/css">
#draggableSample, #droppableSample {
height:100px;
padding:0.5em;
width:150px;
border:1px solid #AAAAAA;
}
#draggableSample {
background-color: silver;
color:#222222;
}
#droppableSample {
background-color: maroon;
color: white;
}
#droppableSample.drophover {
border: 1px solid green;
}
</style>
<!-- Start_Exclude: This block is not part of the sample code -->
<link href="prettify.css" rel="stylesheet">
<script src="prettify.js" type="text/javascript"></script>
<link href="sample.css" rel="stylesheet" type="text/css">
<script src="sample.js" type="text/javascript"></script>
<!-- End_Exclude -->
<script type="text/javascript"><!--
$(function(){
// --- Initialize first Dynatree -------------------------------------------
$("#tree").dynatree({
initAjax: {
url: "sample-data3.json"
},
onLazyRead: function(node){
// Mockup a slow reqeuest ...
node.appendAjax({
url: "sample-data2.json",
debugLazyDelay: 750 // don't do thi in production code
});
},
onActivate: function(node) {
$("#echoActive").text(node.data.title + "(" + node.data.key + ")");
},
onDeactivate: function(node) {
$("#echoActive").text("-");
},
dnd: {
onDragStart: function(node) {
/** This function MUST be defined to enable dragging for the tree.
* Return false to cancel dragging of node.
*/
logMsg("tree.onDragStart(%o)", node);
if(node.data.isFolder)
return false;
return true;
},
onDragStop: function(node) {
logMsg("tree.onDragStop(%o)", node);
}
}
});
// --- Initialize second Dynatree ------------------------------------------
$("#tree2").dynatree({
initAjax: {
url: "sample-data3.json"
},
onLazyRead: function(node){
// Mockup a slow reqeuest ...
node.appendAjax({
url: "sample-data2.json",
debugLazyDelay: 750 // don't do thi in production code
});
},
onActivate: function(node) {
$("#echoActive2").text(node.data.title + "(" + node.data.key + ")");
},
onDeactivate: function(node) {
$("#echoActive2").text("-");
},
onLazyRead: function(node){
node.appendAjax({
url: "sample-data2.json"
});
},
dnd: {
autoExpandMS: 1000,
preventVoidMoves: true, // Prevent dropping nodes 'before self', etc.
onDragEnter: function(node, sourceNode) {
/** sourceNode may be null for non-dynatree droppables.
* Return false to disallow dropping on node. In this case
* onDragOver and onDragLeave are not called.
* Return 'over', 'before, or 'after' to force a hitMode.
* Any other return value will calc the hitMode from the cursor position.
*/
logMsg("tree.onDragEnter(%o, %o)", node, sourceNode);
// if(node.data.isFolder)
// return false;
return true;
// return "over";
},
onDragOver: function(node, sourceNode, hitMode) {
/** Return false to disallow dropping this node.
*
*/
// if(node.data.isFolder){
// var dd = $.ui.ddmanager.current;
// dd.cancel();
// alert("folder");
// }
logMsg("tree.onDragOver(%o, %o, %o)", node, sourceNode, hitMode);
},
onDrop: function(node, sourceNode, hitMode, ui, draggable) {
/**This function MUST be defined to enable dropping of items on the tree.
* sourceNode may be null, if it is a non-Dynatree droppable.
*/
logMsg("tree.onDrop(%o, %o)", node, sourceNode);
var copynode;
if(sourceNode) {
copynode = sourceNode.toDict(true, function(dict){
dict.title = "Copy of " + dict.title;
delete dict.key; // Remove key, so a new one will be created
});
}else{
copynode = {title: "This node was dropped here (" + ui.helper + ")."};
}
if(hitMode == "over"){
// Append as child node
node.addChild(copynode);
// expand the drop target
node.expand(true);
}else if(hitMode == "before"){
// Add before this, i.e. as child of current parent
node.parent.addChild(copynode, node);
}else if(hitMode == "after"){
// Add after this, i.e. as child of current parent
node.parent.addChild(copynode, node.getNextSibling());
}
},
onDragLeave: function(node, sourceNode) {
/** Always called if onDragEnter was called.
*/
logMsg("tree.onDragLeave(%o, %o)", node, sourceNode);
}
}
});
// --- Initialize simple draggable sample ----------------------------------
$("#draggableSample").draggable({
revert: true,
connectToDynatree: true,
cursorAt: { top: -5, left:-5 },
helper: "clone"
});
// --- Initialize simple droppable sample ----------------------------------
$("#droppableSample").droppable({
hoverClass: "drophover",
addClasses: true,
over: function(event, ui) {
logMsg("droppable.over, %o, %o", event, ui);
},
drop: function(event, ui) {
var source = ui.helper.data("dtSourceNode") || ui.draggable;
$(this).addClass("ui-state-highlight").find("p").html("Dropped " + source);
// alert("dropped");
}
});
<!-- Start_Exclude: This block is not part of the sample code -->
$("#skinCombo")
.val(0) // set state to prevent caching
.change(function(){
var href = "../src/"
+ $(this).val()
+ "/ui.dynatree.css"
+ "?reload=" + new Date().getTime();
$("#skinSheet").attr("href", href);
});
<!-- End_Exclude -->
});
--></script>
</head>
<body class="example">
<h1>Example: Standard jQuery drag-and-drop</h1>
<p class="description">
This sample uses the standard jQuery draggable and droppable.
</p>
<div>
Skin:
<select id="skinCombo" size="1">
<option value="skin">Standard ('/skin/')</option>
<option value="skin-vista">Vista ('/skin-vista/')</option>
</select>
</div>
<table>
<thead>
<tr>
<th>
<p>This tree allows dragging.</p>
</th>
<th>
<p>This tree allows dropping.</p>
</th>
</tr>
</thead>
<tbody>
<tr valign="top">
<td>
<div id="tree"> </div>
</td>
<td>
<div id="tree2"></div>
</td>
</tr>
<tr>
<td>
<div>Active node: <span id="echoActive">-</span></div>
</td>
<td>
<div>Active node: <span id="echoActive2">-</span></div>
</td>
</tr>
<tr>
<td>
<div id="draggableSample" class="ui-widget-content">
<p>Drag me around</p>
</div>
</td>
<td>
<div id="droppableSample" class="ui-widget-content">
<p>Drop something here</p>
</div>
</td>
</tr>
</tbody>
</table>
<!-- Start_Exclude: This block is not part of the sample code -->
<hr>
<p class="sample-links no_code">
<a class="hideInsideFS" href="http://dynatree.googlecode.com">jquery.dynatree.js project home</a>
<a class="hideOutsideFS" href="#">Link to this page</a>
<a class="hideInsideFS" href="samples.html">Example Browser</a>
<a href="#" id="codeExample">View source code</a>
</p>
<pre id="sourceCode" class="prettyprint" style="display:none"></pre>
<!-- End_Exclude -->
</body>
</html>

View File

@@ -0,0 +1,124 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title>Dynatree - Example</title>
<script src="../jquery/jquery.js" type="text/javascript"></script>
<script src="../jquery/jquery-ui.custom.js" type="text/javascript"></script>
<script src="../jquery/jquery.cookie.js" type="text/javascript"></script>
<link href="../src/skin/ui.dynatree.css" rel="stylesheet" type="text/css" id="skinSheet">
<script src="../src/jquery.dynatree.js" type="text/javascript"></script>
<!-- Start_Exclude: This block is not part of the sample code -->
<link href="prettify.css" rel="stylesheet">
<script src="prettify.js" type="text/javascript"></script>
<link href="sample.css" rel="stylesheet" type="text/css">
<script src="sample.js" type="text/javascript"></script>
<!-- End_Exclude -->
<script type="text/javascript">
$(function(){
$("#tree").dynatree({
fx: { height: "toggle", duration: 200 },
autoCollapse: true,
onActivate: function(node) {
$("#echoActive").text(node.data.title);
},
onDeactivate: function(node) {
$("#echoActive").text("-");
}
});
$("#cbAutoCollapse")
.attr("checked", true) // set state, to prevent caching
.click(function(){
var f = $(this).attr("checked");
$("#tree").dynatree("option", "autoCollapse", f);
});
$("#cbEffects")
.attr("checked", true) // set state, to prevent caching
.click(function(){
var f = $(this).attr("checked");
if(f){
$("#tree").dynatree("option", "fx", { height: "toggle", duration: 200 });
}else{
$("#tree").dynatree("option", "fx", null);
}
});
$("#skinCombo")
.val(0) // set state to prevent caching
.change(function(){
var href = "../src/"
+ $(this).val()
+ "/ui.dynatree.css"
+ "?reload=" + new Date().getTime();
$("#skinSheet").attr("href", href);
});
});
</script>
</head>
<body class="example">
<h1>Example: effects</h1>
<p class="description">
This sample enables effects to expand/Collapse and sets the
<code>autoCollapse</code> option.
</p>
<div>
<input type="checkbox" id="cbAutoCollapse"><label for="cbAutoCollapse">Auto collapse</label>
-
<input type="checkbox" id="cbEffects"><label for="cbEffects">Use effects</label>
-
Skin:
<select id="skinCombo" size="1">
<option value="skin">Standard ('/skin/')</option>
<option value="skin-vista">Vista ('/skin-vista/')</option>
</select>
</div>
<div id="tree">
<ul style="display: none;">
<li id="id1" title="Look, a tool tip!">item1 with key and tooltip
<li id="id2">item2
<li id="id3" class="folder">Folder with some children
<ul>
<li id="id3.1">Sub-item 3.1
<ul>
<li id="id3.1.1">Sub-item 3.1.1
<li id="id3.1.2">Sub-item 3.1.2
</ul>
<li id="id3.2">Sub-item 3.2
<ul>
<li id="id3.2.1">Sub-item 3.2.1
<li id="id3.2.2">Sub-item 3.2.2
</ul>
</ul>
<li id="id4" class="expanded">Document with some children (expanded on init)
<ul>
<li id="id4.1" class="active focused">Sub-item 4.1 (active and focus on init)
<ul>
<li id="id4.1.1">Sub-item 4.1.1
<li id="id4.1.2">Sub-item 4.1.2
</ul>
<li id="id4.2">Sub-item 4.2
<ul>
<li id="id4.2.1">Sub-item 4.2.1
<li id="id4.2.2">Sub-item 4.2.2
</ul>
</ul>
</ul>
</div>
<div>Active node: <span id="echoActive">-</span></div>
<!-- Start_Exclude: This block is not part of the sample code -->
<hr>
<p class="sample-links no_code">
<a class="hideInsideFS" href="http://dynatree.googlecode.com">jquery.dynatree.js project home</a>
<a class="hideOutsideFS" href="#">Link to this page</a>
<a class="hideInsideFS" href="samples.html">Example Browser</a>
<a href="#" id="codeExample">View source code</a>
</p>
<pre id="sourceCode" class="prettyprint" style="display:none"></pre>
<!-- End_Exclude -->
</body>
</html>

View File

@@ -0,0 +1 @@
[ ]

View File

@@ -0,0 +1,151 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title>Dynatree - Example</title>
<script src="../jquery/jquery.js" type="text/javascript"></script>
<script src="../jquery/jquery-ui.custom.js" type="text/javascript"></script>
<script src="../jquery/jquery.cookie.js" type="text/javascript"></script>
<link href="../src/skin/ui.dynatree.css" rel="stylesheet" type="text/css">
<script src="../src/jquery.dynatree.js" type="text/javascript"></script>
<!-- Start_Exclude: This block is not part of the sample code -->
<link href="prettify.css" rel="stylesheet">
<script src="prettify.js" type="text/javascript"></script>
<link href="sample.css" rel="stylesheet" type="text/css">
<script src="sample.js" type="text/javascript"></script>
<!-- End_Exclude -->
<script type="text/javascript">
$(function(){
$("#tree").dynatree({
title: "Event samples",
// checkbox: true,
// persist: true,
onQueryActivate: function(activate, node) {
logMsg("onQueryActivate(%o, %o)", activate, node);
// return false;
},
onActivate: function(node) {
logMsg("onActivate(%o)", node);
$("#echoActive").text(node.data.title);
if( node.data.url )
window.open(node.data.url);
},
onDeactivate: function(node) {
logMsg("onDeactivate(%o)", node);
$("#echoActive").text("-");
},
onQuerySelect: function(select, node) {
logMsg("onQuerySelect(%o, %o)", select, node);
if( node.data.isFolder )
return false;
},
onSelect: function(select, node) {
logMsg("onSelect(%o, %o)", node);
var s = node.tree.getSelectedNodes().join(", ");
$("#echoSelected").text(s);
},
onQueryExpand: function(expand, node) {
logMsg("onQueryExpand(%o, %o)", expand, node);
// return false;
},
onExpand: function(expand, node) {
logMsg("onExpand(%o, %o)", expand, node);
},
onLazyRead: function(node) {
logMsg("onLazyRead(%o)", node);
},
onFocus: function(node) {
logMsg("onFocus(%o)", node);
$("#echoFocused").text(node.data.title);
// Auto-activate focused node after 2 seconds
node.scheduleAction("activate", 2000);
},
onBlur: function(node) {
logMsg("onBlur(%o)", node);
$("#echoFocused").text("-");
},
onClick: function(node, event) {
logMsg("onClick(%o, %o)", node, event);
if( event.shiftKey && node.isLazy )
alert("ctrl");
//return false;
},
onDblClick: function(node, event) {
logMsg("onDblClick(%o, %o)", node, event);
node.toggleSelect();
},
onKeydown: function(node, event) {
logMsg("onKeydown(%o, %o)", node, event);
switch( event.which ) {
case 32: // [space]
node.toggleSelect();
return false;
}
},
onKeypress: function(node, event) {
logMsg("onKeypress(%o, %o)", node, event);
}
});
});
</script>
</head>
<body class="example">
<h1>Example: Events</h1>
<p class="description">
Implements all callbacks.<br>
Use the Firebug plugin in Firefox to see the event log.<br>
The 'links' folders contain nodes with an custom data.url option.
This is used to open the URL in the onActivate event. <br>
Note: the lazy reading is not implemented in this example.<br>
A focused node will automatically be activated after 2 seconds (use the
keyboard to try this out).
</p>
<div id="tree">
<ul>
<li class="folder">jQuery links
<ul>
<li data="url: 'http://jquery.com'">jQuery home
<li data="url: 'http://docs.jquery.com'">jQuery docs
</ul>
<li class="folder">Other links
<ul>
<li data="url: 'http://code.google.com'">Google Code
</ul>
<li class="folder">Lazy loading
<ul>
<li id="k123" class="lazy">This is a lazy loading document with key k123.
<li id="k234" class="lazy folder">This is a lazy loading folder with key k234.
</ul>
</ul>
</div>
<div>Active node: <span id="echoActive">-</span></div>
<div>Selected node list: <span id="echoSelected">-</span></div>
<div>Focused node: <span id="echoFocused">-</span></div>
<!-- Start_Exclude: This block is not part of the sample code -->
<hr>
<p class="sample-links no_code">
<a class="hideInsideFS" href="http://dynatree.googlecode.com">jquery.dynatree.js project home</a>
<a class="hideOutsideFS" href="#">Link to this page</a>
<a class="hideInsideFS" href="samples.html">Example Browser</a>
<a href="#" id="codeExample">View source code</a>
</p>
<pre id="sourceCode" class="prettyprint" style="display:none"></pre>
<!-- End_Exclude -->
</body>
</html>

View File

@@ -0,0 +1,113 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title>Dynatree - Example</title>
<script src="../jquery/jquery.js" type="text/javascript"></script>
<script src="../jquery/jquery-ui.custom.js" type="text/javascript"></script>
<script src="../jquery/jquery.cookie.js" type="text/javascript"></script>
<link href="../src/skin/ui.dynatree.css" rel="stylesheet" type="text/css">
<script src="../src/jquery.dynatree.js" type="text/javascript"></script>
<!-- Start_Exclude: This block is not part of the sample code -->
<link href="prettify.css" rel="stylesheet">
<script src="prettify.js" type="text/javascript"></script>
<link href="sample.css" rel="stylesheet" type="text/css">
<script src="sample.js" type="text/javascript"></script>
<!-- End_Exclude -->
<!-- Add code to initialize the tree when the document is loaded: -->
<script type="text/javascript">
$(function(){
$("#tree").dynatree({
checkbox: true,
// Override class name for checkbox icon, so rasio buttons are displayed:
//classNames: {checkbox: "dynatree-radio"},
// Select mode 3: multi-hier
selectMode: 3,
children: [
{title: "Item 1", key: "node1"},
{title: "Folder 2", isFolder: true, key: "node2",
children: [
{title: "Sub-item 2.1", key: "node2.1"},
{title: "Sub-item 2.2", key: "node2.2"}
]
},
{title: "Item 3", key: "node3"}
]
});
$("form").submit(function() {
// Serialize standard form fields:
var formData = $(this).serializeArray();
// then append Dynatree selected 'checkboxes':
var tree = $("#tree").dynatree("getTree");
formData = formData.concat(tree.serializeArray());
// and/or add the active node as 'radio button':
if(tree.getActiveNode()){
formData.push({name: "activeNode", value: tree.getActiveNode().data.key});
}
alert("POSTing this:\n" + jQuery.param(formData));
$.post("http://127.0.0.1:8001/submit_data",
formData,
function(response, textStatus, xhr){
alert("POST returned " + response + ", " + textStatus);
}
);
return false;
});
});
</script>
</head>
<body class="example">
<h1>Example: Form</h1>
<p class="description">
This checkbox tree is embedded in a form.
The [Submit] handler serializes the selected tree nodes as if they were
standard checkboxes.<br>
The values are then POSTed to the server (together with the other form
elements).
</p>
<!--
<form action="http://127.0.0.1:8001/submit_data" method="POST">
-->
<form>
Username: <input type="text" name="userName" />
<br>
<textarea name="comment"></textarea>
<br>
<input type="radio" name="rb1" value="foo" checked> Foo
<input type="radio" name="rb1" value="bar"> Bar
<input type="radio" name="rb1" value="baz"> Baz
<br>
<input type="checkbox" name="cb1" value="John" checked>John
<input type="checkbox" name="cb1" value="Paul">Paul
<input type="checkbox" name="cb1" value="George">George
<input type="checkbox" name="cb1" value="Ringo">Ringo
<br>
<!-- The name attribute is used by tree.serializeArray() -->
<div id="tree" name="selNodes">
</div>
<input type="submit" value="Send data">
</form>
<!-- Start_Exclude: This block is not part of the sample code -->
<hr>
<p class="sample-links no_code">
<a class="hideInsideFS" href="http://dynatree.googlecode.com">jquery.dynatree.js project home</a>
<a class="hideOutsideFS" href="#">Link to this page</a>
<a class="hideInsideFS" href="samples.html">Example Browser</a>
<a href="#" id="codeExample">View source code</a>
</p>
<pre id="sourceCode" class="prettyprint" style="display:none"></pre>
<!-- End_Exclude -->
</body>
</html>

View File

@@ -0,0 +1,43 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<meta name="robots" content="noindex,follow">
<title>Dynatree - Example</title>
<script src="../jquery/jquery.js" type="text/javascript"></script>
<script src="../jquery/jquery-ui.custom.js" type="text/javascript"></script>
<script src="../jquery/jquery.cookie.js" type="text/javascript"></script>
<link href="../src/skin/ui.dynatree.css" rel="stylesheet" type="text/css">
<script src="../src/jquery.dynatree.js" type="text/javascript"></script>
<!-- Add code to initialize the tree when the document is loaded: -->
<script type="text/javascript">
$(function(){
$("#btnExpand").click(function(){
var $tree = parent.$("#tree");
var rootNode = parent.$("#tree").dynatree("getRoot");
parent.logMsg("%o", rootNode);
parent.$("#tree").dynatree("getRoot").visit(function(node){
node.toggleExpand();
});
});
});
</script>
</head>
<body class="example">
<p class="description">
This page lives inside an iframe<br>
Click a link in the tree to load some content here.
<br>
This button demonstrates, ho to access a tree in another frame:
<button id="btnExpand">Toggle tree</button>
<br>
View the source of <a href="sample-iframe-1.html" target="_blank">this iframe content</a>,
to see how it can be done.
</p>
</body>
</html>

View File

@@ -0,0 +1,124 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title>Dynatree - Example</title>
<script src="../jquery/jquery.js" type="text/javascript"></script>
<script src="../jquery/jquery-ui.custom.js" type="text/javascript"></script>
<script src="../jquery/jquery.cookie.js" type="text/javascript"></script>
<link href="../src/skin/ui.dynatree.css" rel="stylesheet" type="text/css">
<script src="../src/jquery.dynatree.js" type="text/javascript"></script>
<!-- Start_Exclude: This block is not part of the sample code -->
<link href="prettify.css" rel="stylesheet">
<script src="prettify.js" type="text/javascript"></script>
<link href="sample.css" rel="stylesheet" type="text/css">
<script src="sample.js" type="text/javascript"></script>
<!-- End_Exclude -->
<style type="text/css">
#tree {
vertical-align: top;
width: 250px;
}
iframe {
border: 1px dotted gray;
}
</style>
<!-- Add code to initialize the tree when the document is loaded: -->
<script type="text/javascript">
$(function(){
// Attach the dynatree widget to an existing <div id="tree"> element
// and pass the tree options as an argument to the dynatree() function:
$("#tree").dynatree({
// autoCollapse: true,
minExpandLevel: 1,
// persist: true,
onPostInit: function(isReloading, isError) {
this.reactivate();
},
onActivate: function(node) {
// Use <a> href and target attributes to load the content:
if( node.data.href ){
// Open target
window.open(node.data.href, node.data.target);
// or open target in iframe
// $("[name=contentFrame]").attr("src", node.data.href);
}
}
});
});
</script>
</head>
<body class="example">
<h1>Example: URL navigation and iframes</h1>
<p class="description">
This sample shows, how to use dynatree as a navigation menu.<br>
The tree initialisation uses <code>&lt;a href='URL', target='TARGET'>title&lt;/a></code>
tags.<br>
The <code>onActivate</code> handler then uses <code>node.data.href</code>
to open the the pages in the embedded iframe.<br>
Note that the navigation will fallback to standard HTML links,
when JavaScript is disabled.<br>
<br>
The [Toggle tree] button in the embedded welcome page also gives an example on
how to access a tree that exists outside the own frame.
</p>
<table>
<colgroup>
<col width="300px" valign="top">
<col width="90%">
</colgroup>
<tr>
<td valign="top">
<!-- Add a <div> element where the tree should appear: -->
<div id="tree">
<ul>
<li class="expanded folder">Search engines
<ul>
<li><a href="http://www.google.com" target="contentFrame">Google (target='contentFrame')</a>
<li><a href="http://www.google.com" target="_self">Google (target='_self')</a>
<li><a href="http://www.google.com" target="_top" title="This link replaces the current page">Google (target='_top')</a>
<li><a href="http://www.bing.com" target="contentFrame">Bing</a>
<li><a href="http://www.wolframalpha.com/" target="contentFrame">WolframAlpha</a>
</ul>
<li class="expanded folder">jQuery
<ul>
<li><a href="http://www.jquery.com/" target="contentFrame">jQuery</a>
<li><a href="http://ui.jquery.com/" target="contentFrame">jQuery UI</a>
<li><a href="http://api.jquery.com/" target="contentFrame">API browser</a>
<li><a href="http://code.google.com/p/dynatree/" target="contentFrame">Dynatree</a>
</ul>
<li class="expanded folder">Misc
<ul>
<li><a href="sample-iframe-1.html" target="contentFrame">Welcome</a>
</ul>
</ul>
</div>
</td>
<td>
<iframe src="sample-iframe-1.html" name="contentFrame" width="100%" height="500"
scrolling="yes" marginheight="0" marginwidth="0" frameborder="0">
<p>Your browser does not support iframes</p>
</iframe>
</td>
</tr>
</table>
<!-- Start_Exclude: This block is not part of the sample code -->
<hr>
<p class="sample-links no_code">
<a class="hideInsideFS" href="http://dynatree.googlecode.com">jquery.dynatree.js project home</a>
<a class="hideOutsideFS" href="#">Link to this page</a>
<a class="hideInsideFS" href="samples.html">Example Browser</a>
<a href="#" id="codeExample">View source code</a>
</p>
<pre id="sourceCode" class="prettyprint" style="display:none"></pre>
<!-- End_Exclude -->
</body>
</html>

View File

@@ -0,0 +1,66 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title>Dynatree - Example</title>
<script src="../jquery/jquery.js" type="text/javascript"></script>
<script src="../jquery/jquery-ui.custom.js" type="text/javascript"></script>
<script src="../jquery/jquery.cookie.js" type="text/javascript"></script>
<link href="../src/skin-vista/ui.dynatree.css" rel="stylesheet" type="text/css">
<script src="../src/jquery.dynatree.js" type="text/javascript"></script>
<!-- Start_Exclude: This block is not part of the sample code -->
<link href="prettify.css" rel="stylesheet">
<script src="prettify.js" type="text/javascript"></script>
<link href="sample.css" rel="stylesheet" type="text/css">
<script src="sample.js" type="text/javascript"></script>
<!-- End_Exclude -->
<script type="text/javascript">
$(function(){
$("#tree").dynatree({
// In real life we would call a URL on the server like this:
// initAjax: {
// url: "/getTopLevelNodesAsJson",
// data: { mode: "funnyMode" }
// },
// .. but here we use a local file instead:
initAjax: {
url: "sample-data1.json"
},
onActivate: function(node) {
$("#echoActive").text(node.data.title);
},
onDeactivate: function(node) {
$("#echoActive").text("-");
}
});
});
</script>
</head>
<body class="example">
<h1>Example: Init from Ajax request</h1>
<p class="description">
This sample initializes the tree from a JSON request.
</p>
<!-- Add a <div> element where the tree should appear: -->
<div id="tree"> </div>
<div>Active node: <span id="echoActive">-</span></div>
<!-- Start_Exclude: This block is not part of the sample code -->
<hr>
<p class="sample-links no_code">
<a class="hideInsideFS" href="http://dynatree.googlecode.com">jquery.dynatree.js project home</a>
<a class="hideOutsideFS" href="#">Link to this page</a>
<a class="hideInsideFS" href="samples.html">Example Browser</a>
<a href="#" id="codeExample">View source code</a>
</p>
<pre id="sourceCode" class="prettyprint" style="display:none"></pre>
<!-- End_Exclude -->
</body>
</html>

View File

@@ -0,0 +1,129 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title>Dynatree - Editable nodes</title>
<script src="../jquery/jquery.js" type="text/javascript"></script>
<script src="../jquery/jquery-ui.custom.js" type="text/javascript"></script>
<script src="../jquery/jquery.cookie.js" type="text/javascript"></script>
<link href="../src/skin/ui.dynatree.css" rel="stylesheet" type="text/css">
<script src="../src/jquery.dynatree.js" type="text/javascript"></script>
<!-- Start_Exclude: This block is not part of the sample code -->
<link href="prettify.css" rel="stylesheet">
<script src="prettify.js" type="text/javascript"></script>
<link href="sample.css" rel="stylesheet" type="text/css">
<script src="sample.js" type="text/javascript"></script>
<!-- End_Exclude -->
<script type="text/javascript">
/**
* Implement inline editing for a dynatree node
*/
function editNode(node){
var prevTitle = node.data.title,
tree = node.tree;
// Disable dynatree mouse- and key handling
tree.$widget.unbind();
// Replace node with <input>
$(".dynatree-title", node.span).html("<input id='editNode' value='" + prevTitle + "'>");
// Focus <input> and bind keyboard handler
$("input#editNode")
.focus()
.keydown(function(event){
switch( event.which ) {
case 27: // [esc]
// discard changes on [esc]
$("input#editNode").val(prevTitle);
$(this).blur();
break;
case 13: // [enter]
// simulate blur to accept new value
$(this).blur();
break;
}
}).blur(function(event){
// Accept new value, when user leaves <input>
var title = $("input#editNode").val();
node.setTitle(title);
// Re-enable mouse and keyboard handlling
tree.$widget.bind();
node.focus();
});
}
// ----------
$(function(){
var isMac = /Mac/.test(navigator.platform);
$("#tree").dynatree({
title: "Event samples",
onClick: function(node, event) {
if( event.shiftKey ){
editNode(node);
return false;
}
},
onDblClick: function(node, event) {
editNode(node);
return false;
},
onKeydown: function(node, event) {
switch( event.which ) {
case 113: // [F2]
editNode(node);
return false;
case 13: // [enter]
if( isMac ){
editNode(node);
return false;
}
}
}
});
});
</script>
</head>
<body class="example">
<h1>Example: edit nodes</h1>
<p class="description">
Demos how to edit node titles with<br>
- dblclick<br>
- Shift + click<br>
- [F2]<br>
- [Enter] (on Mac)<br>
</p>
<div id="tree">
<ul>
<li class="folder">Folder 1
<ul>
<li>Node 1
<li>Node 2
<li>Node 3
</ul>
<li class="folder">Folder 2
<ul>
<li>Node 1
<li>Node 2
<li>Node 3
</ul>
</ul>
</div>
<!-- Start_Exclude: This block is not part of the sample code -->
<hr>
<p class="sample-links no_code">
<a class="hideInsideFS" href="http://dynatree.googlecode.com">jquery.dynatree.js project home</a>
<a class="hideOutsideFS" href="#">Link to this page</a>
<a class="hideInsideFS" href="samples.html">Example Browser</a>
<a href="#" id="codeExample">View source code</a>
</p>
<pre id="sourceCode" class="prettyprint" style="display:none"></pre>
<!-- End_Exclude -->
</body>
</html>

View File

@@ -0,0 +1,136 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title>Dynatree - Example</title>
<script src="../jquery/jquery.js" type="text/javascript"></script>
<script src="../jquery/jquery-ui.custom.js" type="text/javascript"></script>
<script src="../jquery/jquery.cookie.js" type="text/javascript"></script>
<link href="../src/skin-vista/ui.dynatree.css" rel="stylesheet" type="text/css">
<script src="../src/jquery.dynatree.js" type="text/javascript"></script>
<!-- Start_Exclude: This block is not part of the sample code -->
<link href="prettify.css" rel="stylesheet">
<script src="prettify.js" type="text/javascript"></script>
<link href="sample.css" rel="stylesheet" type="text/css">
<script src="sample.js" type="text/javascript"></script>
<!-- End_Exclude -->
<script type="text/javascript">
$(function(){
// --- Initialize sample trees
$("#tree").dynatree({
title: "Lazy loading sample",
fx: { height: "toggle", duration: 200 },
autoFocus: false, // Set focus to first child, when expanding or lazy-loading.
// In real life we would call a URL on the server like this:
// initAjax: {
// url: "/getTopLevelNodesAsJson",
// data: { mode: "funnyMode" }
// },
// .. but here we use a local file instead:
initAjax: {
url: "sample-data3.json"
},
onActivate: function(node) {
$("#echoActive").text("" + node + " (" + node.getKeyPath()+ ")");
},
onLazyRead: function(node){
// In real life we would call something like this:
// node.appendAjax({
// url: "/getChildrenAsJson",
// data: {key: node.data.key,
// mode: "funnyMode"
// }
// });
// .. but here we use a local file instead:
node.appendAjax({
url: "sample-data2.json",
// We don't want the next line in production code:
debugLazyDelay: 750
});
}
});
$("#btnReloadActive").click(function(){
var node = $("#tree").dynatree("getActiveNode");
if( node && node.isLazy() ){
node.reloadChildren(function(node, isOk){
});
}else{
alert("Please activate a lazy node first.");
}
});
$("#btnLoadKeyPath").click(function(){
var tree = $("#tree").dynatree("getTree");
// Make sure that node #_27 is loaded, by traversing the parents.
// The callback is executed for every node as we go:
tree.loadKeyPath("/folder4/_23/_26/_27", function(node, status){
if(status == "loaded") {
// 'node' is a parent that was just traversed.
// If we call expand() here, then all nodes will be expanded
// as we go
node.expand();
}else if(status == "ok") {
// 'node' is the end node of our path.
// If we call activate() or makeVisible() here, then the
// whole branch will be exoanded now
node.activate();
}
});
});
<!-- Start_Exclude: This block is not part of the sample code -->
$("#skinCombo")
.val(0) // set state to prevent caching
.change(function(){
var href = "../src/"
+ $(this).val()
+ "/ui.dynatree.css"
+ "?reload=" + new Date().getTime();
$("#skinSheet").attr("href", href);
});
<!-- End_Exclude -->
});
</script>
</head>
<body class="example">
<h1>Example: Lazy loading</h1>
<p class="description">Using 'lazy' option to load the tree and to load the
branches.<br>
<br>
You may want to try this <a href="sample-lazy-persist.html">live example</a> of
a lazy tree that uses a simple test server.
</p>
<div>
Skin:
<select id="skinCombo" size="1">
<option value="skin">Standard ('/skin/')</option>
<option value="skin-vista">Vista ('/skin-vista/')</option>
</select>
</div>
<div id="tree"><!-- When using initAjax, it may be nice to put a throbber here, that spins until the initial content is loaded: -->
</div>
<div>Active node: <span id="echoActive">-</span></div>
<p>
<button id="btnReloadActive">Reload active node...</button>
<button id="btnLoadKeyPath">Load node by path '/folder4/_23/_26/_27'...</button>
</p>
<!-- Start_Exclude: This block is not part of the sample code -->
<hr>
<p class="sample-links no_code">
<a class="hideInsideFS" href="http://dynatree.googlecode.com">jquery.dynatree.js project home</a>
<a class="hideOutsideFS" href="#">Link to this page</a>
<a class="hideInsideFS" href="samples.html">Example Browser</a>
<a href="#" id="codeExample">View source code</a>
</p>
<pre id="sourceCode" class="prettyprint" style="display:none"></pre>
<!-- End_Exclude -->
</body>
</html>

View File

@@ -0,0 +1,83 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title>Dynatree - Example</title>
<script src="../jquery/jquery.js" type="text/javascript"></script>
<script src="../jquery/jquery-ui.custom.js" type="text/javascript"></script>
<script src="../jquery/jquery.cookie.js" type="text/javascript"></script>
<link href="../src/skin/ui.dynatree.css" rel="stylesheet" type="text/css">
<script src="../src/jquery.dynatree.js" type="text/javascript"></script>
<!-- Start_Exclude: This block is not part of the sample code -->
<link href="prettify.css" rel="stylesheet">
<script src="prettify.js" type="text/javascript"></script>
<link href="sample.css" rel="stylesheet" type="text/css">
<script src="sample.js" type="text/javascript"></script>
<!-- End_Exclude -->
<!-- Add code to initialize the tree when the document is loaded: -->
<script type="text/javascript">
$(function(){
$("#tree1").dynatree({
initAjax: {
url: "sample-data3.json"
},
onActivate: function(node) {
logMsg("Activated %o", node);
},
minExpandLevel: 1
});
$("#tree2").dynatree({
initAjax: {
url: "sample-data3.json"
},
onActivate: function(node) {
logMsg("Activated %o", node);
},
minExpandLevel: 2
});
$("#tree3").dynatree({
initAjax: {
url: "sample-data3.json"
},
onActivate: function(node) {
logMsg("Activated %o", node);
},
minExpandLevel: 3
});
});
</script>
</head>
<body class="example">
<h1>Example: Expand level</h1>
<!-- Add a <div> element where the tree should appear: -->
<p class="description">minExpandLevel=1<br>
This is the default option.</p>
<div id="tree1"> </div>
<hr>
<p class="description">minExpandLevel=2<br>
Top-level nodes are always expanded, so the expander icon is hidden.</p>
<div id="tree2"> </div>
<hr>
<p class="description">minExpandLevel=3.</p>
<div id="tree3"> </div>
<!-- Start_Exclude: This block is not part of the sample code -->
<hr>
<p class="sample-links no_code">
<a class="hideInsideFS" href="http://dynatree.googlecode.com">jquery.dynatree.js project home</a>
<a class="hideOutsideFS" href="#">Link to this page</a>
<a class="hideInsideFS" href="samples.html">Example Browser</a>
<a href="#" id="codeExample">View source code</a>
</p>
<pre id="sourceCode" class="prettyprint" style="display:none"></pre>
<!-- End_Exclude -->
</body>
</html>

View File

@@ -0,0 +1,259 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title>Dynatree - Example</title>
<script src="../jquery/jquery.js" type="text/javascript"></script>
<script src="../jquery/jquery-ui.custom.js" type="text/javascript"></script>
<script src="../jquery/jquery.cookie.js" type="text/javascript"></script>
<link href="../src/skin/ui.dynatree.css" rel="stylesheet" type="text/css">
<script src="../src/jquery.dynatree.js" type="text/javascript"></script>
<!-- Start_Exclude: This block is not part of the sample code -->
<link href="prettify.css" rel="stylesheet">
<script src="prettify.js" type="text/javascript"></script>
<link href="sample.css" rel="stylesheet" type="text/css">
<script src="sample.js" type="text/javascript"></script>
<!-- End_Exclude -->
<style>
span.ws-wrap span.dynatree-title { white-space: normal; }
span.ws-nowrap span.dynatree-title { white-space: nowrap; }
span.ws-pre span.dynatree-title { white-space: pre; }
</style>
<script type="text/javascript">
function drawCanvas() {
var canvas = document.getElementById("canvas1");
if(canvas && canvas.getContext) {
canvas = canvas.getContext("2d");
var lingrad = canvas.createLinearGradient( 0, 0, 0, 150 );
lingrad.addColorStop( 0, "#0099cc" );
lingrad.addColorStop( 0.5, "#fff" );
lingrad.addColorStop( 0.5, "#99cc00");
lingrad.addColorStop( 1, "#0099ff");
canvas.fillStyle = lingrad;
canvas.fillRect(0, 0, 400 ,100 );
canvas.fillStyle = "rgb(200,0,0)";
canvas.fillRect( 10, 10, 55, 55 );
}
}
$(function(){
// Initialize the tree inside the <div>element.
// The tree structure is read from the contained <ul> tag.
$("#tree").dynatree({
onActivate: function(node) {
$("#echoActive").text(node.data.title);
if(node.data.key == "canvasNode1")
drawCanvas();
},
onDeactivate: function(node) {
$("#echoSelected").text("-");
}
});
// Dynatree renders nodes 'lazily', i.e. when they are first expanded.
// So we to use live event binding for embedded elements.
$("#btn1").live("click", function(){
alert("Thank you for clicking.");
return false;
});
});
</script>
</head>
<body class="example">
<h1>Example: formatted and multi-line titles</h1>
<p class="description">
This example shows how multi-line and non-text contents is displayed.
<br>
The 'noLink' node-option is used for single nodes to make the form and
HTML5 elements clickable.
</p>
<div id="tree">
<ul>
<li>Using some <b>bold</b> markup in the text (&lt;li&gt; tag only).
<li><span>Using some <b>bold</b> markup in the text (&lt;li&gt;&lt;span&gt; tag).</span>
<li class="folder">Long paragraph, with H3, P, and BR
<ul>
<li><span><h3>Title</h3>
<p>
Lorem ipsum dolor sit amet, consectetuer sadipscing elitr, sed
diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
<br>
Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit
amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
sed diam voluptua.
<br>
At vero eos et accusam et justo duo dolores et ea rebum.
Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod
tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
At vero eos et accusam et justo duo dolores et ea rebum.
<br>
Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</p>
</span>
<li>Node 2
</ul>
<li class="folder">Long line (nowrap)
<ul>
<li class="noLink"><span>
Lorem ipsum dolor sit amet, consectetuer sadipscing elitr, sed
diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit
amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod
tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
At vero eos et accusam et justo duo dolores et ea rebum.
Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</span>
<li>Node 2
</ul>
<li class="folder">Long line (wrapping)
<ul>
<li class="noLink" data="addClass: 'ws-wrap'"><span>
Lorem ipsum dolor sit amet, consectetuer sadipscing elitr, sed
diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit
amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod
tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
At vero eos et accusam et justo duo dolores et ea rebum.
Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</span>
<li>Node 2
</ul>
<li class="folder">Long line (pre formatted)
<ul>
<li class="noLink" data="addClass: 'ws-pre'"><span>
Lorem ipsum dolor sit amet, consectetuer sadipscing elitr, sed
diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit
amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod
tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
At vero eos et accusam et justo duo dolores et ea rebum.
Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</span>
<li>Node 2
</ul>
<li class="folder">Long text using BR and P
<ul>
<li class="noLink"><span>
<p>
Lorem ipsum dolor sit amet, consectetuer sadipscing elitr, sed <br>
diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, <br>
sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. <br>
</p>
<p>
Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit <br>
amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam <br>
nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, <br>
sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. <br>
Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. <br>
</p>
<p>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod <br>
tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. <br>
At vero eos et accusam et justo duo dolores et ea rebum. <br>
</p>
<p>
Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. <br>
</p>
</span>
<li>Node 2
</ul>
<li class="folder">Form elements
<ul>
<li class="noLink"><span>
Name: <input type="text" name="name2" />
</span>
<li class="noLink"><span>
Comment:<br><textarea name="comment2"></textarea>
</span>
<li class="noLink" data="icon: false"><span>
<input type="radio" id="rb1_1" name="rb1" value="v1" checked>
<label for="rb1_1">Foo</label>
<input type="radio" id="rb1_2" name="rb1" value="v2">
<label for="rb1_2">Bar</label>
<input type="radio" id="rb1_3" name="rb1" value="v3">
<label for="rb1_3">Baz</label>
</span>
<li class="noLink"><span>
<button id="btn1" value="123">Click me</button>
</span>
</ul>
<li class="folder">Canvas
<ul>
<li class="noLink" id="canvasNode1" data="icon: false"><span>
Click below to draw:<br>
<canvas id="canvas1" width="400" height="100">
Your browser does not support the <code>canvas</code> element.
</canvas>
</span>
</ul>
<li class="folder">Video
<ul>
<li class="noLink"><span>
<video src="http://www.w3schools.com/html5/movie.ogg"
controls="controls"
NO_autoplay
>
Your browser does not support the <code>video</code> element.
</video>
</span>
</ul>
<li class="folder">Audio
<ul>
<li class="noLink"><span>
<audio src="http://developer.mozilla.org/@api/deki/files/2926/=AudioTest_(1).ogg"
controls="controls"
NO_autoplay>
Your browser does not support the <code>audio</code> element.
</audio>
</span>
</ul>
<li>item3
</ul>
</div>
<div>Active node: <span id="echoActive">-</span></div>
<!-- Start_Exclude: This block is not part of the sample code -->
<hr>
<p class="sample-links no_code">
<a class="hideInsideFS" href="http://dynatree.googlecode.com">jquery.dynatree.js project home</a>
<a class="hideOutsideFS" href="#">Link to this page</a>
<a class="hideInsideFS" href="samples.html">Example Browser</a>
<a href="#" id="codeExample">View source code</a>
</p>
<pre id="sourceCode" class="prettyprint" style="display:none"></pre>
<!-- End_Exclude -->
</body>
</html>

View File

@@ -0,0 +1,107 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title>Dynatree - Example</title>
<script src="../jquery/jquery.js" type="text/javascript"></script>
<script src="../jquery/jquery-ui.custom.js" type="text/javascript"></script>
<script src="../jquery/jquery.cookie.js" type="text/javascript"></script>
<link href="../src/skin/ui.dynatree.css" rel="stylesheet" type="text/css">
<script src="../src/jquery.dynatree.js" type="text/javascript"></script>
<!-- Start_Exclude: This block is not part of the sample code -->
<link href="prettify.css" rel="stylesheet">
<script src="prettify.js" type="text/javascript"></script>
<link href="sample.css" rel="stylesheet" type="text/css">
<script src="sample.js" type="text/javascript"></script>
<!-- End_Exclude -->
<script type="text/javascript">
$(function(){
$("#tree").dynatree({
persist: true,
checkbox: true,
selectMode: 3,
onPostInit: function(isReloading, isError) {
logMsg("onPostInit(%o, %o)", isReloading, isError);
// Re-fire onActivate, so the text is update
this.reactivate();
},
onActivate: function(node) {
$("#echoActive").text(node.data.title);
},
onDeactivate: function(node) {
$("#echoActive").text("-");
},
onDblClick: function(node, event) {
logMsg("onDblClick(%o, %o)", node, event);
node.toggleExpand();
}
});
});
</script>
</head>
<body class="example">
<h1>Example: Persist</h1>
<p class="description">
Cookie persistence is enabled here.<br>
Also, double-click handler expands document nodes.<br>
Select a node and hit [F5] to refresh, to see how the active node and
expansion and selection states are restored.<br>
<br>
NOTE: if this doesn't seem to work, it's probably because the frame
content is cached by the browser.<br>
Try this example as an
<a href="#" target="_blank">unframed page</a>.
</p>
<!-- Tree container -->
<div id="tree">
<ul>
<li id="id1" title="Look, a tool tip!">item1 with key and tooltip
<li id="id2">item2
<li id="id3" class="folder">Folder with some children
<ul>
<li id="id3.1">Sub-item 3.1
<ul>
<li id="id3.1.1">Sub-item 3.1.1
<li id="id3.1.2">Sub-item 3.1.2
</ul>
<li id="id3.2">Sub-item 3.2
<ul>
<li id="id3.2.1">Sub-item 3.2.1
<li id="id3.2.2">Sub-item 3.2.2
</ul>
</ul>
<li id="id4" class="expanded">Document with some children (expanded on init)
<ul>
<li id="id4.1" class="active focused">Sub-item 4.1 (active and focus on init)
<ul>
<li id="id4.1.1">Sub-item 4.1.1
<li id="id4.1.2">Sub-item 4.1.2
</ul>
<li id="id4.2">Sub-item 4.2
<ul>
<li id="id4.2.1">Sub-item 4.2.1
<li id="id4.2.2">Sub-item 4.2.2
</ul>
</ul>
</ul>
</div>
<div>Active node: <span id="echoActive">-</span></div>
<!-- Start_Exclude: This block is not part of the sample code -->
<hr>
<p class="sample-links no_code">
<a class="hideInsideFS" href="http://dynatree.googlecode.com">jquery.dynatree.js project home</a>
<a class="hideOutsideFS" href="#">Link to this page</a>
<a class="hideInsideFS" href="samples.html">Example Browser</a>
<a href="#" id="codeExample">View source code</a>
</p>
<pre id="sourceCode" class="prettyprint" style="display:none"></pre>
<!-- End_Exclude -->
</body>
</html>

View File

@@ -0,0 +1,184 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title>Dynatree - Local Server</title>
<script src="../jquery/jquery.js" type="text/javascript"></script>
<script src="../jquery/jquery-ui.custom.js" type="text/javascript"></script>
<script src="../jquery/jquery.cookie.js" type="text/javascript"></script>
<link href="../src/skin/ui.dynatree.css" rel="stylesheet" type="text/css">
<script src="../src/jquery.dynatree.js" type="text/javascript"></script>
<!-- Start_Exclude: This block is not part of the sample code -->
<link href="prettify.css" rel="stylesheet">
<script src="prettify.js" type="text/javascript"></script>
<link href="sample.css" rel="stylesheet" type="text/css">
<script src="sample.js" type="text/javascript"></script>
<!-- End_Exclude -->
<script type="text/javascript">
var _activeKey = null,
debugDelay = 5; // seconds
$(function(){
$("#tree").ajaxComplete(function(event, XMLHttpRequest, ajaxOptions) {
_log("debug", "ajaxComplete: %o", this); // dom element listening
});
// --- Initialize sample trees
$("#tree").dynatree({
persist: true,
checkbox: true,
selectMode: 3,
onPostInit: function(isReloading, isError) {
// alert("reloading: "+isReloading+", error:"+isError);
logMsg("onPostInit(%o, %o) - %o", isReloading, isError, this);
// Re-fire onActivate, so the text is updated
this.reactivate();
},
fx: { height: "toggle", duration: 200 },
// initAjax is hard to fake, so we pass the children as object array:
initAjax: {url: "http://127.0.0.1:8001",
dataType: "jsonp", // Enable JSONP, so this sample can be run from the local file system against a localhost server
timeout: 10000, // timeout, otherwise 'connection refused' is not recognized if server is not running
data: {key: "",
sleep: debugDelay,
// returnEmpty: true,
// depth: 3,
mode: "baseFolders"
},
addExpandedKeyList: true // Send list of expanded keys, so the webservice can deliver these children also
},
onLazyRead: function(node){
node.appendAjax(
{url: "http://127.0.0.1:8001",
dataType: "jsonp", // Enable JSONP, so this sample can be run from the local file system against a localhost server
data: {key: node.data.key,
sleep: debugDelay,
// returnEmpty: true,
mode: "branch"
}
});
},
onActivate: function(node) {
$("#echoActive").text(node.data.tooltip + ", key=" + node.data.key);
_activeKey = node.data.key;
},
dnd: {
onDragStart: function(node) {
/** This function MUST be defined to enable dragging for the tree.
* Return false to cancel dragging of node.
*/
logMsg("tree.onDragStart(%o)", node);
return true;
},
onDragStop: function(node) {
// This function is optional.
logMsg("tree.onDragStop(%o)", node);
},
autoExpandMS: 1000,
preventVoidMoves: true, // Prevent dropping nodes 'before self', etc.
onDragEnter: function(node, sourceNode) {
/** sourceNode may be null for non-dynatree droppables.
* Return false to disallow dropping on node. In this case
* onDragOver and onDragLeave are not called.
* Return 'over', 'before, or 'after' to force a hitMode.
* Return ['before', 'after'] to restrict available hitModes.
* Any other return value will calc the hitMode from the cursor position.
*/
logMsg("tree.onDragEnter(%o, %o)", node, sourceNode);
return true;
},
onDragOver: function(node, sourceNode, hitMode) {
/** Return false to disallow dropping this node.
*
*/
logMsg("tree.onDragOver(%o, %o, %o)", node, sourceNode, hitMode);
// Prevent dropping a parent below it's own child
if(node.isDescendantOf(sourceNode)){
return false;
}
// Prohibit creating childs in non-folders (only sorting allowed)
// if( !node.isFolder && hitMode == "over" )
// return "after";
},
onDrop: function(node, sourceNode, hitMode, ui, draggable) {
/** This function MUST be defined to enable dropping of items on
* the tree.
*/
logMsg("tree.onDrop(%o, %o, %s)", node, sourceNode, hitMode);
sourceNode.move(node, hitMode);
// expand the drop target
// sourceNode.expand(true);
},
onDragLeave: function(node, sourceNode) {
/** Always called if onDragEnter was called.
*/
logMsg("tree.onDragLeave(%o, %o)", node, sourceNode);
}
}
});
$("#btnReload").click(function(){
$("#tree").dynatree("getTree").reload();
return false;
});
$("#btnReloadNode").click(function(){
$("#tree").dynatree("getTree").getNodeByKey(_activeKey).reloadChildren();
return false;
});
});
</script>
</head>
<body class="example">
<h1>Example: Lazy loading with a (local) HTTP test server</h1>
<p class="description">
Using <code>initAjax</code> option to initialize the tree using Ajax.<br>
The folders have the <code>isLazy</code> option set, so that they are also
loaded 'on demand', when expanded.<br>
<br>
Using <code>persist: true</code> and <code>initAjax: { addExpandedKeyList: true }</code>
we also support 'lazy persistence' (which has to be supported by the
web service, of course).<br>
<br>
Note:<br>
This sample assumes that a Dynatree Web Service is running at http://127.0.0.1:8001.<br>
See <a href="dynatree_server.py">dynatree_server.py</a> for a sample
server implementation.<br>
<br>
Note also:<br>
We have to enable JSONP using the option <code>initAjax: { dataType: 'jsonp' }</code>,
because Ajax calls will fail, if the originating HTML page and the web
service do not reside on the same host.<br>
In our case may have this sample page on the local file system and the
web service runs on 127.0.0.1.
</p>
<div id="tree">
<!-- When using initAjax, it may be nice to put a throbber here, that spins until the initial content is loaded: -->
Loading...
</div>
<div>Active node: <span id="echoActive">-</span></div>
<p>
<button id="btnReload">Reload tree</button>
<button id="btnReloadNode">Reload active node</button>
</p>
<!-- Start_Exclude: This block is not part of the sample code -->
<hr>
<p class="sample-links no_code">
<a class="hideInsideFS" href="http://dynatree.googlecode.com">jquery.dynatree.js project home</a>
<a class="hideOutsideFS" href="#">Link to this page</a>
<a class="hideInsideFS" href="samples.html">Example Browser</a>
<a href="#" id="codeExample">View source code</a>
</p>
<pre id="sourceCode" class="prettyprint" style="display:none"></pre>
<!-- End_Exclude -->
</body>
</html>

View File

@@ -0,0 +1,67 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title>Dynatree - Example</title>
<script src="../jquery/jquery.js" type="text/javascript"></script>
<script src="../jquery/jquery-ui.custom.js" type="text/javascript"></script>
<script src="../jquery/jquery.cookie.js" type="text/javascript"></script>
<link href="../src/skin/ui.dynatree.css" rel="stylesheet" type="text/css">
<script src="../src/jquery.dynatree.js" type="text/javascript"></script>
<!-- Start_Exclude: This block is not part of the sample code -->
<link href="prettify.css" rel="stylesheet">
<script src="prettify.js" type="text/javascript"></script>
<link href="sample.css" rel="stylesheet" type="text/css">
<script src="sample.js" type="text/javascript"></script>
<!-- End_Exclude -->
<!-- Add code to initialize the tree when the document is loaded: -->
<script type="text/javascript">
$(function(){
// Attach the dynatree widget to an existing <div id="tree"> element
// and pass the tree options as an argument to the dynatree() function:
$("#tree").dynatree({
onActivate: function(node) {
// A DynaTreeNode object is passed to the activation handler
// Note: we also get this event, if persistence is on, and the page is reloaded.
alert("You activated " + node.data.title);
},
children: [
{title: "Item 1"},
{title: "Folder 2", isFolder: true, key: "folder2",
children: [
{title: "Sub-item 2.1"},
{title: "Sub-item 2.2"}
]
},
{title: "Item 3"}
]
});
});
</script>
</head>
<body class="example">
<h1>Example: Quick start</h1>
<p class="description">
This sample initializes the tree from a JavaScript object.<br>
An <i>onActivate</i> handler brings up an alert box when a node is selected.
</p>
<!-- Add a <div> element where the tree should appear: -->
<div id="tree"> </div>
<!-- Start_Exclude: This block is not part of the sample code -->
<hr>
<p class="sample-links no_code">
<a class="hideInsideFS" href="http://dynatree.googlecode.com">jquery.dynatree.js project home</a>
<a class="hideOutsideFS" href="#">Link to this page</a>
<a class="hideInsideFS" href="samples.html">Example Browser</a>
<a href="#" id="codeExample">View source code</a>
</p>
<pre id="sourceCode" class="prettyprint" style="display:none"></pre>
<!-- End_Exclude -->
</body>
</html>

View File

@@ -0,0 +1,130 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title>Dynatree - Example</title>
<script src="../jquery/jquery.js" type="text/javascript"></script>
<script src="../jquery/jquery-ui.custom.js" type="text/javascript"></script>
<script src="../jquery/jquery.cookie.js" type="text/javascript"></script>
<link href="../src/skin/ui.dynatree.css" rel="stylesheet" type="text/css" id="skinSheet">
<script src="../src/jquery.dynatree.js" type="text/javascript"></script>
<!-- Start_Exclude: This block is not part of the sample code -->
<link href="prettify.css" rel="stylesheet">
<script src="prettify.js" type="text/javascript"></script>
<link href="sample.css" rel="stylesheet" type="text/css">
<script src="sample.js" type="text/javascript"></script>
<!-- End_Exclude -->
<style type="text/css">
.dynatree-container.dynatree-rtl .dynatree-title {
unicode-bidi: bidi-override; /* optional: reverse title letters */
}
ul.dynatree-container.dynatree-rtl ul {
padding: 0 16px 0 0;
}
ul.dynatree-container.dynatree-rtl li {
background-position: right 0;
background-image: url("../src/skin/vline-rtl.gif");
}
.dynatree-container.dynatree-rtl span.dynatree-connector,
.dynatree-container.dynatree-rtl span.dynatree-expander,
.dynatree-container.dynatree-rtl span.dynatree-icon,
.dynatree-container.dynatree-rtl span.dynatree-drag-helper-img,
.dynatree-container.dynatree-rtl #dynatree-drop-marker {
background-image: url("../src/skin/icons-rtl.gif");
}
</style>
<script type="text/javascript">
$(function(){
$("#tree").dynatree({
dnd: {
onDragStart: function(node) {
return true;
},
onDragEnter: function(node, sourceNode) {
return true;
},
onDrop: function(node, sourceNode, hitMode, ui, draggable) {
sourceNode.move(node, hitMode);
}
},
onPostInit: function(){
// Set RTL attribute on init
this.$tree.find("ul.dynatree-container").attr("DIR", "RTL").addClass("dynatree-rtl");
}
});
<!-- Start_Exclude: This block is not part of the sample code -->
$("#skinCombo")
.val(0) // set state to prevent caching
.change(function(){
var href = "../src/"
+ $(this).val()
+ "/ui.dynatree.css"
+ "?reload=" + new Date().getTime();
$("#skinSheet").attr("href", href);
});
<!-- End_Exclude -->
});
</script>
</head>
<body class="example">
<h1>Example: RTL</h1>
<p class="description">
This tree uses some extra styles to provide RTL support (experimental).
</p>
<div>
Skin:
<select id="skinCombo" size="1">
<option value="skin">Standard ('/skin/')</option>
<option value="skin-vista">Vista ('/skin-vista/')</option>
</select>
</div>
<div id="tree">
<ul id="treeData" style="display: none;">
<li id="id1" title="Look, a tool tip!">item1 with key and tooltip
<li id="id2">item2
<li id="id3" class="folder">Folder with some children
<ul>
<li id="id3.1">Sub-item 3.1
<ul>
<li id="id3.1.1">Sub-item 3.1.1
<li id="id3.1.2">Sub-item 3.1.2
</ul>
<li id="id3.2">Sub-item 3.2
<ul>
<li id="id3.2.1">Sub-item 3.2.1
<li id="id3.2.2">Sub-item 3.2.2
</ul>
</ul>
<li id="id4" class="expanded">Document with some children (expanded on init)
<ul>
<li id="id4.1" class="active focused">Sub-item 4.1 (active and focus on init)
<ul>
<li id="id4.1.1">Sub-item 4.1.1
<li id="id4.1.2">Sub-item 4.1.2
</ul>
<li id="id4.2">Sub-item 4.2
<ul>
<li id="id4.2.1">Sub-item 4.2.1
<li id="id4.2.2">Sub-item 4.2.2
</ul>
</ul>
</ul>
</div>
<!-- Start_Exclude: This block is not part of the sample code -->
<hr>
<p class="sample-links no_code">
<a class="hideInsideFS" href="http://dynatree.googlecode.com">jquery.dynatree.js project home</a>
<a class="hideOutsideFS" href="#">Link to this page</a>
<a class="hideInsideFS" href="samples.html">Example Browser</a>
<a href="#" id="codeExample">View source code</a>
</p>
<pre id="sourceCode" class="prettyprint" style="display:none"></pre>
<!-- End_Exclude -->
</body>
</html>

View File

@@ -0,0 +1,306 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title>Dynatree - Example</title>
<script src="../jquery/jquery.js" type="text/javascript"></script>
<script src="../jquery/jquery-ui.custom.js" type="text/javascript"></script>
<script src="../jquery/jquery.cookie.js" type="text/javascript"></script>
<link href="../src/skin/ui.dynatree.css" rel="stylesheet" type="text/css" id="skinSheet">
<script src="../src/jquery.dynatree.js" type="text/javascript"></script>
<!-- Start_Exclude: This block is not part of the sample code -->
<link href="prettify.css" rel="stylesheet">
<script src="prettify.js" type="text/javascript"></script>
<link href="sample.css" rel="stylesheet" type="text/css">
<script src="sample.js" type="text/javascript"></script>
<!-- End_Exclude -->
<script type="text/javascript">
var treeData = [
{title: "item1 with key and tooltip", tooltip: "Look, a tool tip!" },
{title: "item2: selected on init", select: true },
{title: "Folder", isFolder: true, key: "id3",
children: [
{title: "Sub-item 3.1",
children: [
{title: "Sub-item 3.1.1", key: "id3.1.1" },
{title: "Sub-item 3.1.2", key: "id3.1.2" }
]
},
{title: "Sub-item 3.2",
children: [
{title: "Sub-item 3.2.1", key: "id3.2.1" },
{title: "Sub-item 3.2.2", key: "id3.2.2" }
]
}
]
},
{title: "Document with some children (expanded on init)", key: "id4", expand: true,
children: [
{title: "Sub-item 4.1 (active on init)", activate: true,
children: [
{title: "Sub-item 4.1.1", key: "id4.1.1" },
{title: "Sub-item 4.1.2", key: "id4.1.2" }
]
},
{title: "Sub-item 4.2 (selected on init)", select: true,
children: [
{title: "Sub-item 4.2.1", key: "id4.2.1" },
{title: "Sub-item 4.2.2", key: "id4.2.2" }
]
},
{title: "Sub-item 4.3 (hideCheckbox)", hideCheckbox: true },
{title: "Sub-item 4.4 (unselectable)", unselectable: true }
]
}
];
$(function(){
// --- Initialize sample trees
$("#tree1").dynatree({
checkbox: true,
// Override class name for checkbox icon:
classNames: {checkbox: "dynatree-radio"},
selectMode: 1,
children: treeData,
onActivate: function(node) {
$("#echoActive1").text(node.data.title);
},
onSelect: function(select, node) {
// Display list of selected nodes
var s = node.tree.getSelectedNodes().join(", ");
$("#echoSelection1").text(s);
},
onDblClick: function(node, event) {
node.toggleSelect();
},
onKeydown: function(node, event) {
if( event.which == 32 ) {
node.toggleSelect();
return false;
}
},
// The following options are only required, if we have more than one tree on one page:
// initId: "treeData",
cookieId: "dynatree-Cb1",
idPrefix: "dynatree-Cb1-"
});
$("#tree2").dynatree({
checkbox: true,
selectMode: 2,
children: treeData,
onSelect: function(select, node) {
// Display list of selected nodes
var selNodes = node.tree.getSelectedNodes();
// convert to title/key array
var selKeys = $.map(selNodes, function(node){
return "[" + node.data.key + "]: '" + node.data.title + "'";
});
$("#echoSelection2").text(selKeys.join(", "));
},
onClick: function(node, event) {
// We should not toggle, if target was "checkbox", because this
// would result in double-toggle (i.e. no toggle)
if( node.getEventTargetType(event) == "title" )
node.toggleSelect();
},
onKeydown: function(node, event) {
if( event.which == 32 ) {
node.toggleSelect();
return false;
}
},
// The following options are only required, if we have more than one tree on one page:
cookieId: "dynatree-Cb2",
idPrefix: "dynatree-Cb2-"
});
$("#tree3").dynatree({
checkbox: true,
selectMode: 3,
children: treeData,
onSelect: function(select, node) {
// Get a list of all selected nodes, and convert to a key array:
var selKeys = $.map(node.tree.getSelectedNodes(), function(node){
return node.data.key;
});
$("#echoSelection3").text(selKeys.join(", "));
// Get a list of all selected TOP nodes
var selRootNodes = node.tree.getSelectedNodes(true);
// ... and convert to a key array:
var selRootKeys = $.map(selRootNodes, function(node){
return node.data.key;
});
$("#echoSelectionRootKeys3").text(selRootKeys.join(", "));
$("#echoSelectionRoots3").text(selRootNodes.join(", "));
},
onDblClick: function(node, event) {
node.toggleSelect();
},
onKeydown: function(node, event) {
if( event.which == 32 ) {
node.toggleSelect();
return false;
}
},
// The following options are only required, if we have more than one tree on one page:
// initId: "treeData",
cookieId: "dynatree-Cb3",
idPrefix: "dynatree-Cb3-"
});
$("#tree4").dynatree({
checkbox: false,
selectMode: 2,
children: treeData,
onQuerySelect: function(select, node) {
if( node.data.isFolder )
return false;
},
onSelect: function(select, node) {
// Display list of selected nodes
var selNodes = node.tree.getSelectedNodes();
// convert to title/key array
var selKeys = $.map(selNodes, function(node){
return "[" + node.data.key + "]: '" + node.data.title + "'";
});
$("#echoSelection4").text(selKeys.join(", "));
},
onClick: function(node, event) {
if( ! node.data.isFolder )
node.toggleSelect();
},
onDblClick: function(node, event) {
node.toggleExpand();
},
onKeydown: function(node, event) {
if( event.which == 32 ) {
node.toggleSelect();
return false;
}
},
// The following options are only required, if we have more than one tree on one page:
// initId: "treeData",
cookieId: "dynatree-Cb4",
idPrefix: "dynatree-Cb4-"
});
$("#btnToggleSelect").click(function(){
$("#tree2").dynatree("getRoot").visit(function(node){
node.toggleSelect();
});
return false;
});
$("#btnDeselectAll").click(function(){
$("#tree2").dynatree("getRoot").visit(function(node){
node.select(false);
});
return false;
});
$("#btnSelectAll").click(function(){
$("#tree2").dynatree("getRoot").visit(function(node){
node.select(true);
});
return false;
});
<!-- Start_Exclude: This block is not part of the sample code -->
$("#skinCombo")
.val(0) // set state to prevent caching
.change(function(){
var href = "../src/"
+ $(this).val()
+ "/ui.dynatree.css"
+ "?reload=" + new Date().getTime();
$("#skinSheet").attr("href", href);
});
<!-- End_Exclude -->
});
</script>
</head>
<body class="example">
<h1>Example: Selection and checkbox</h1>
<!-- Tree #1 -->
<p class="description">
This tree has <b>checkoxes and selectMode 1 (single-selection)</b> enabled.<br>
A double-click handler selects a <i>document</i> node (not folders).<br>
A keydown handler selects on [space].<br>
The <code>checkbox</code> class name was customized, to display radio
buttons.<br>
Note: the initialization data contains multiple selected nodes. This is
considered bad input data and <b>not</b> fixed automatically (only on
the first click).
</p>
<div>
Skin:
<select id="skinCombo" size="1">
<option value="skin">Standard ('/skin/')</option>
<option value="skin-vista">Vista ('/skin-vista/')</option>
</select>
</div>
<div id="tree1"></div>
<div>Active node: <span id="echoActive1">-</span></div>
<div>Selection: <span id="echoSelection1">-</span></div>
<!-- Tree #2 -->
<p class="description">
This tree has <b>selectMode 2 (multi-selection)</b> enabled.<br>
A single-click handler selects the node.<br>
A keydown handler selects on [space].
</p>
<p>
<a href="#" id="btnSelectAll">Select all</a> -
<a href="#" id="btnDeselectAll">Deselect all</a> -
<a href="#" id="btnToggleSelect">Toggle select</a>
</p>
<div id="tree2"></div>
<div>Selected keys: <span id="echoSelection2">-</span></div>
<!-- Tree #3 -->
<p class="description">
This tree has <b>checkoxes and selectMode 3 (hierarchical multi-selection)</b> enabled.<br>
A double-click handler selects the node.<br>
A keydown handler selects on [space].
</p>
<div id="tree3"></div>
<div>Selected keys: <span id="echoSelection3">-</span></div>
<div>Selected root keys: <span id="echoSelectionRootKeys3">-</span></div>
<div>Selected root nodes: <span id="echoSelectionRoots3">-</span></div>
<!-- Tree #4 -->
<p class="description">
This tree has selectMode 2 (multi-selection) enabled, but <b>no checkboxes</b>.<br>
A single-click handler selects the node.<br>
A keydown handler selects on [space].<br>
A double-click handler expands documents.<br>
A onQuerySelect handler prevents selection of folders.
</p>
<div id="tree4"></div>
<div>Selected keys: <span id="echoSelection4">-</span></div>
<!-- Start_Exclude: This block is not part of the sample code -->
<hr>
<p class="sample-links no_code">
<a class="hideInsideFS" href="http://dynatree.googlecode.com">jquery.dynatree.js project home</a>
<a class="hideOutsideFS" href="#">Link to this page</a>
<a class="hideInsideFS" href="samples.html">Example Browser</a>
<a href="#" id="codeExample">View source code</a>
</p>
<pre id="sourceCode" class="prettyprint" style="display:none"></pre>
<!-- End_Exclude -->
</body>
</html>

View File

@@ -0,0 +1,93 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title>Dynatree - Example</title>
<script src="../jquery/jquery.js" type="text/javascript"></script>
<script src="../jquery/jquery-ui.custom.js" type="text/javascript"></script>
<script src="../jquery/jquery.cookie.js" type="text/javascript"></script>
<!-- Include the basic stylesheet: -->
<link href="../src/skin-vista/ui.dynatree.css" rel="stylesheet" type="text/css">
<!-- Override CSS with a custom stylesheet : -->
<link href="skin-custom/custom.css" rel="stylesheet" type="text/css" >
<script src="../src/jquery.dynatree.js" type="text/javascript"></script>
<!-- Start_Exclude: This block is not part of the sample code -->
<link href="prettify.css" rel="stylesheet">
<script src="prettify.js" type="text/javascript"></script>
<link href="sample.css" rel="stylesheet" type="text/css">
<script src="sample.js" type="text/javascript"></script>
<!-- End_Exclude -->
<script type="text/javascript">
$(function(){
$("#tree").dynatree({
title: "Sample Theming",
// Image folder used for data.icon attribute.
imagePath: "skin-custom/",
onSelect: function(node) {
alert ("You selected " + node);
}
});
});
</script>
</head>
<body class="example">
<h1>Example: Theming</h1>
<p class="description">
Includes a custom CSS <i>after</i> the standard CSS to overrride theming.<br>
Some nodes have their <code>data.addClass</code> attribute set.<br>
Finally, the last two nodes use the <code>data.icon</code> attribute.
</p>
<div id="tree">
<ul>
<li>Document with some children
<ul>
<li>Sub-item 4.1
<ul>
<li>Sub-item 4.1.1
<li>Sub-item 4.1.2
</ul>
<li>Sub-item 4.2
</ul>
<li class="folder">A folder (different icon when expanded)
<ul>
<li>Node 2.1
<li>Node 2.2
</ul>
<li data="addClass:'custom1'">Node with custom class 1
<li data="isFolder: true, addClass:'custom2'">Folder with custom class 2
<ul>
<li data="addClass:'custom1'">Node 4.1 (using custom class 1)
<li>Node 4.2
</ul>
<li data="icon: 'customDoc1.gif'">Node with standard CSS, but custom icon
<li data="isFolder: true, icon: 'folder_docs.gif'">Folder with standard CSS but custom icon
<ul>
<li>Node 4.1
<li>Node 4.2
</ul>
</ul>
</div>
<!-- Start_Exclude: This block is not part of the sample code -->
<hr>
<p class="sample-links no_code">
<a class="hideInsideFS" href="http://dynatree.googlecode.com">jquery.dynatree.js project home</a>
<a class="hideOutsideFS" href="#">Link to this page</a>
<a class="hideInsideFS" href="samples.html">Example Browser</a>
<a href="#" id="codeExample">View source code</a>
</p>
<pre id="sourceCode" class="prettyprint" style="display:none"></pre>
<!-- End_Exclude -->
</body>
</html>

View File

@@ -0,0 +1,71 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title>Dynatree - Example</title>
<script src="../jquery/jquery.js" type="text/javascript"></script>
<script src="../jquery/jquery-ui.custom.js" type="text/javascript"></script>
<script src="../jquery/jquery.cookie.js" type="text/javascript"></script>
<link href="../src/skin/ui.dynatree.css" rel="stylesheet" type="text/css">
<script src="../src/jquery.dynatree.js" type="text/javascript"></script>
<!-- Start_Exclude: This block is not part of the sample code -->
<link href="prettify.css" rel="stylesheet">
<script src="prettify.js" type="text/javascript"></script>
<link href="sample.css" rel="stylesheet" type="text/css">
<script src="sample.js" type="text/javascript"></script>
<!-- End_Exclude -->
<script type="text/javascript">
$(function(){
$("#tree").dynatree({
onActivate: function(node) {
$("#echoActive").text(node.data.title);
},
onDeactivate: function(node) {
$("#echoActive").text("-");
}
});
});
</script>
</head>
<body class="example">
<h1>Example: Init from &lt;ul> element</h1>
<p class="description">
This sample initializes the tree from a &lt;ul> element.
</p>
<div id="tree">
<ul style="display:none">
<li id="key1" title="Look, a tool tip!">item1 with key and tooltip
<li id="key2" class="selected">item2: selected on init
<li id="key3" class="folder">Folder with some children
<ul>
<li id="key3.1">Sub-item 3.1
<li id="key3.2">Sub-item 3.2
</ul>
<li id="key4" class="expanded">Document with some children (expanded on init)
<ul>
<li id="key4.1">Sub-item 4.1
<li id="key4.2">Sub-item 4.2
</ul>
</ul>
</div>
<div>Active node: <span id="echoActive">-</span></div>
<!-- Start_Exclude: This block is not part of the sample code -->
<hr>
<p class="sample-links no_code">
<a class="hideInsideFS" href="http://dynatree.googlecode.com">jquery.dynatree.js project home</a>
<a class="hideOutsideFS" href="#">Link to this page</a>
<a class="hideInsideFS" href="samples.html">Example Browser</a>
<a href="#" id="codeExample">View source code</a>
</p>
<pre id="sourceCode" class="prettyprint" style="display:none"></pre>
<!-- End_Exclude -->
</body>
</html>

View File

@@ -0,0 +1,63 @@
body.example
{
margin: 15px;
font-family: sans-serif;
}
body.example h1
{
font-size: 1.2em;
}
body.example h2
{
font-size: 1em;
}
a,
a:visited
{
color: navy;
text-decoration: none;
font-size: small;
}
a:hover
{
text-decoration: underline;
}
body.example p.description,
body.example p.sample-links
{
/* border: thin solid gray; */
background-color: #d0d0f0;
padding: 5px;
font-size: small;
}
p.version-info
{
color: gray;
font-size: 0.6em;
}
p.sample-links a,
p.sample-links a:visited
{
color: navy;
text-decoration: none;
margin-left: 15px;
padding: 1px 3px;
/* border: 1pt solid white;*/
}
p.sample-links a:hover
{
text-decoration: underline;
}
pre{
background:#eee;
border:1px solid #999;
padding:.5em;
margin:.5em;
font-size:.9em;
}

View File

@@ -0,0 +1,78 @@
/*************************************************************************
(c) 2008-2012 Martin Wendt
*************************************************************************/
function viewSourceCode()
{
window.location = "view-source:" + window.location.href;
}
function initCodeSamples()
{
var $source = $("#sourceCode");
$("#codeExample").toggle(
function(){
$source.show("fast");
if( !this.old ){
this.old = $(this).html();
$.get(this.href, function(code){
// Remove <!-- Start_Exclude [...] End_Exclude --> blocks:
code = code.replace(/<!-- Start_Exclude(.|\n|\r)*?End_Exclude -->/gi, "<!-- (Irrelevant source removed.) -->");
// Reduce tabs from 8 to 2 characters
code = code.replace(/\t/g, " ");
$source.text(code);
// Format code samples
try {
prettyPrint();
} catch (e) {
alert(e);
}
}, "html");
}
$(this).html("Hide source code");
},
function(){
$(this).html(this.old);
$source.hide("fast");
}
);
if(jQuery.ui){
var info = "Dynatree " + jQuery.ui.dynatree.version
+ ", jQuery UI " + jQuery.ui.version
+ ", jQuery " + jQuery.fn.jquery;
/*
info += "\n<br>";
info += "document.compatMode: " + document.compatMode + "\n";
for(e in jQuery.support){
info += "<br>\n" + e + ": " + jQuery.support[e];
}
*/
$("p.sample-links").after("<p class='version-info'>" + info + "</p>");
}
}
var _gaq = _gaq || [];
$(function(){
// Log to Google Analytics, when not running locally
if ( document.URL.toLowerCase().indexOf("wwwendt.de/") >= 0 ) {
_gaq.push(["_setAccount", "UA-316028-1"]);
_gaq.push(["_trackPageview"]);
(function() {
var ga = document.createElement("script"); ga.type = "text/javascript"; ga.async = true;
ga.src = ("https:" == document.location.protocol ? "https://ssl" : "http://www") + ".google-analytics.com/ga.js";
var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(ga, s);
})();
}
// Show some elements only, if (not) inside the Example Browser
if (top.location == self.location){
$(".hideOutsideFS").hide();
}else{
$(".hideInsideFS").hide();
}
initCodeSamples();
});

View File

@@ -0,0 +1,136 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<meta name="robots" content="noindex,follow">
<script src="../jquery/jquery.js" type="text/javascript"></script>
<script src="../jquery/jquery-ui.custom.js" type="text/javascript"></script>
<script src="../jquery/jquery.cookie.js" type="text/javascript"></script>
<link href="../src/skin-vista/ui.dynatree.css" rel="stylesheet" type="text/css">
<script src="../src/jquery.dynatree.js" type="text/javascript"></script>
<script src="sample.js" type="text/javascript"></script>
<title>Dynatree - Example Browser</title>
<style type="text/css">
body {
background-color: #39414A;
color: white;
font-family: Helvetica, Arial, sans-serif;
font-size: smaller;
background-image: url("nav_bg.png");
background-repeat: repeat-x;
}
a {
color: white;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
div#tree {
position: absolute;
height: 95%;
width: 95%;
padding: 5px;
margin-right: 16px;
}
ul.dynatree-container {
height: 100%;
width: 100%;
background-color: transparent;
}
ul.dynatree-container a {
color: white;
border: 1px solid transparent;
background-color: transparent;
}
ul.dynatree-container a:hover {
background-color: transparent;
}
ul.dynatree-container a:focus, span.dynatree-focused a:link {
background-color: gray;
}
</style>
<script type="text/javascript">
$(function(){
// --- Initialize sample trees
$("#tree").dynatree({
autoFocus: true,
// persist: true,
minExpandLevel: 2,
onFocus: function(node) {
// Auto-activate focused node after 1 second
if(node.data.href){
node.scheduleAction("activate", 1000);
}
},
onBlur: function(node) {
node.scheduleAction("cancel");
},
onActivate: function(node){
if(node.data.href){
window.open(node.data.href, node.data.target);
}
}
});
});
</script>
</head>
<body>
<div id="tree">
<ul>
<li><a target="_blank" href="dynatree-doc.html">Documentation</a>
<li><a target="_blank" href="http://dynatree.googlecode.com">jquery.dynatree.js</a>
<li class="folder expnded"> Examples
<ul>
<li><a target="content" href="sample-default.html">Default options</a>
<li><a target="content" href="sample-quick.html">Init from JS object</a>
<li><a target="content" href="sample-init-lazy.html">Init from external data</a>
<li><a target="content" href="sample-iframe.html">URL navigation and &lt;iframe></a>
<li><a target="content" href="sample-api.html">Programming API</a>
<li><a target="content" href="sample-select.html">Checkbox &amp; select</a>
<li><a target="content" href="sample-theming.html">Theming</a>
<li><a target="content" href="sample-persist.html">Persistence</a>
<li><a target="content" href="sample-events.html">Event handling</a>
<li><a target="content" href="sample-effects.html">Effects</a>
<li class="folder">Drag'n'drop
<ul>
<li><a target="content" href="sample-dnd.html">Drag'n'drop</a>
<li><a target="content" href="sample-dnd2.html">Drag'n'drop 2</a>
<li><a target="content" href="sample-dnd3.html">Drag'n'drop 3</a>
</ul>
<li><a target="content" href="sample-contextmenu.html">Context menu, Copy/paste</a>
<li><a target="content" href="sample-minexpand.html">Fixed expand level</a>
<li><a target="content" href="sample-lazy.html">Lazy loading</a>
<li><a target="content" href="sample-form.html">Embed in forms</a>
<li><a target="content" href="sample-multiline.html">Large nodes</a>
<li class="folder">Tweaks
<ul>
<li><a target="content" href="test-table.html">Column layout</a>
<li><a target="content" href="sample-inline-edit.html">Edit nodes</a>
<li><a target="content" href="sample-rtl.html">RTL</a>
</ul>
<li class="folder">Test
<ul>
<li><a target="content" href="test-bench.html">Benchmark large trees</a>
<li><a target="content" href="test-latest.html">Latest jQuery</a>
<li><a target="content" href="sample-pyserver.html">Local server</a>
<li class="folder">DTD
<ul>
<li><a target="content" href="test-dtd-none.html">No DTD</a>
<li><a target="content" href="test-dtd-html4-transitional.html">HTML4 transitional</a>
<li><a target="content" href="test-dtd-html4-strict.html">HTML4 strict</a>
<li><a target="content" href="test-dtd-html5.html">HTML5</a>
<li><a target="content" href="test-dtd-xml-transitional.html">XHTML transitional</a>
<li><a target="content" href="test-dtd-xml-strict.html">XHTML strict</a>
</ul>
</ul>
</ul>
</ul>
</div>
</body>
</html><html><body></body></html>

View File

@@ -0,0 +1,29 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<meta name="robots" content="noindex,follow">
<title>Dynatree - Example Browser</title>
<style type="text/css">
body {
background-color: #0F1923;
color: white;
padding: 3px 10px;
font-family: sans-serif;
}
h1 {
margin-top: 8px;
font-size: 1.4em;
}
a {
text-decoration: none;
color: white;
}
</style>
</head>
<body>
<h1><a href="samples.html" target="_top">Dynatree - Example Browser</a></h1>
</body>
</html>

View File

@@ -0,0 +1,27 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title>Dynatree - Example</title>
<script src="../jquery/jquery.js" type="text/javascript"></script>
<link href="sample.css" rel="stylesheet" type="text/css">
<script src="sample.js" type="text/javascript"></script>
</head>
<body class="example">
<h1>dynatree - Examples</h1>
<p class="description">
This site presents some live examples for Dynatree.<br>
<br>
Select a topic on the navigator to the left and click 'View source code'
at the bottom of the samples for details.<br>
<br>
More documentation and infos can be found at the
<a target="_blank" href="http://dynatree.googlecode.com">project home</a>.<br>
<br>
Have fun :-)
</p>
</body>
</html>

View File

@@ -0,0 +1,25 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<meta name="robots" content="noindex,follow">
<script src="../jquery/jquery.js" type="text/javascript"></script>
<script src="sample.js" type="text/javascript"></script>
<title>Dynatree - Example Browser</title>
</head>
<frameset rows="50,1*" frameborder="no" framespacing="0">
<frame src="samples-top.html" name="top" scrolling="NO" noresize
marginwidth="0" marginheight="0">
<frameset cols="200,1*" >
<frame src="samples-nav.html" name="nav" scrolling="NO"
marginwidth="0" marginheight="0">
<frame src="samples-welcome.html" name="content">
</frameset>
</frameset>
<noframes>
<body>
<p>This page requires frames.</p>
</body>
</noframes>
</html>

View File

@@ -0,0 +1,71 @@
/*******************************************************************************
* Sample for a Dynatree custom stylesheet.
* This is expected to be included after the standard ui.dynatree.css, thus
* overridung the defaults.
*/
.dynatree-has-children span.dynatree-icon
{
background-position: 0 0;
background-image: url("doc_with_children.gif");
}
.dynatree-ico-cf span.dynatree-icon /* Collapsed Folder */
{
background-image: url("folder_docs.gif");
}
.dynatree-ico-ef span.dynatree-icon /* Expanded Folder */
{
background-image: url("folder_images.gif");
}
/*******************************************************************************
* Node titles
*/
span.dynatree-has-children a
{
font-style: oblique;
}
span.dynatree-selected a
{
color: green;
font-style: italic;
}
span.dynatree-active a,
span.dynatree-active a:hover
{
border: 1px solid maroon;
background-color: #FAD8F0 !important; /* reddish */
}
/*******************************************************************************
* Custom node classes (sample)
*/
span.custom1 a
{
background-color: #ffffbb;
color: maroon;
}
span.custom1 span.dynatree-icon
{
background-position: 0 0;
background-image: url("customDoc2.gif");
}
span.custom2 a
{
font-weight: bold;
background-color: silver;
color: navy;
}
span.custom2 span.dynatree-icon
{
background-position: 0 0;
background-image: url("folder_page.gif");
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 960 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 936 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 1004 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 378 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 1007 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.0 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 260 B

View File

@@ -0,0 +1,136 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title>Dynatree - Example</title>
<script src="../jquery/jquery.min.js" type="text/javascript"></script>
<script src="../jquery/jquery-ui.custom.min.js" type="text/javascript"></script>
<script src="../jquery/jquery.cookie.js" type="text/javascript"></script>
<link href="../src/skin/ui.dynatree.css" rel="stylesheet" type="text/css">
<script src="../src/jquery.dynatree.js" type="text/javascript"></script>
<!-- Start_Exclude: This block is not part of the sample code -->
<link href="prettify.css" rel="stylesheet">
<script src="prettify.js" type="text/javascript"></script>
<link href="sample.css" rel="stylesheet" type="text/css">
<script src="sample.js" type="text/javascript"></script>
<!-- End_Exclude -->
<!-- Add code to initialize the tree when the document is loaded: -->
<script type="text/javascript">
$(function(){
$("#tree").dynatree({
children: [
{title: "Add 100 nodes (flat, force update)...", isFolder: true, isLazy: true, mode: "add100_flat_u" },
{title: "Add 100 nodes (flat)...", isFolder: true, isLazy: true, mode: "add100_flat" },
{title: "Add 1.000 nodes (flat)...", isFolder: true, isLazy: true, mode: "add1000_flat" },
{title: "Add 1.000 nodes (deep)...", isFolder: true, isLazy: true, mode: "add1000_deep" },
{title: "Add 10.000 nodes (deep)...", isFolder: true, isLazy: true, mode: "add10000_deep" }
],
onSelect: function(node) {
alert("You selected " + node.data.title);
},
onLazyRead: function(node) {
var tree = node.tree;
logMsg("Benchmarking mode='" + node.data.mode + "'...");
switch( node.data.mode ) {
case "add100_flat_u":
addNodes(node, 100, 0, 0, true)
break;
case "add100_flat":
addNodes(node, 100, 0, 0)
break;
case "add1000_flat":
addNodes(node, 1000, 0, 0)
break;
case "add1000_deep":
addNodes(node, 10, 10, 10)
break;
case "add10000_deep":
addNodes(node, 10, 100, 10)
break;
}
// node.setLazyNodeStatus(DTNodeStatus_Ok);
logMsg("Benchmarking mode='" + node.data.mode + "' done.");
// Return true, to show we're finished
return true;
}
});
$("#btnClear").click(function(){
var root = $("#tree").dynatree("getRoot");
for(var i = 0; i<root.childList.length; i++)
root.childList[i].removeChildren();
});
$("#btnRenderAll").click(function(){
var tree = $("#tree").dynatree("getTree");
var count = tree.count();
logMsg("Benchmarking node creation for " + count + " nodes...");
tree.renderInvisibleNodes();
logMsg("Benchmarking node creation for " + count + " nodes done.");
});
});
function addNodes(node, level1, level2, level3, forceUpdate) {
if( forceUpdate != true )
node.tree.enableUpdate(false);
var key;
for (var i=0; i<level1; i++) {
key = "" + (i+1);
var f = node.addChild({title: "Folder_" + key,
key: key,
isFolder: true
});
for (var j=0; j<level2; j++) {
key = "" + (i+1) + "." + (j+1);
var d = f.addChild({title: "Node_" + key,
key: key
});
for (var k=0; k<level3; k++) {
key = "" + (i+1) + "." + (j+1) + "." + (k+1);
d.addChild({title: "Node_" + key,
key: key
});
}
}
}
node.tree.enableUpdate(true);
}
</script>
</head>
<body class="example">
<h1>Example: Benchmark</h1>
<p class="description">
Expand a node to start a benchmark, then check the firebug console.
</p>
<p class="description">
Some users reported slow loading with Firefox. If you experience
response times longer than 3-4 for seconds for <code>Add 1.000 nodes (flat)</code>
please <a href="http://code.google.com/p/dynatree/issues/detail?id=182">let us know</a>.
</p>
<div id='tree'> </div>
<p>
enableUpdate(false) is used for speedup.
</p>
<p>
<button id="btnClear">remove children</button>
<button id="btnRenderAll">Create HTML markup for all nodes</button>
</p>
<!-- Start_Exclude: This block is not part of the sample code -->
<hr>
<p class="sample-links no_code">
<a class="hideInsideFS" href="http://dynatree.googlecode.com">jquery.dynatree.js project home</a>
<a class="hideOutsideFS" href="#">Link to this page</a>
<a class="hideInsideFS" href="samples.html">Example Browser</a>
<a href="#" id="codeExample">View source code</a>
</p>
<pre id="sourceCode" class="prettyprint" style="display:none"></pre>
<!-- End_Exclude -->
</body>
</html>

View File

@@ -0,0 +1,44 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title>dynatree - temporary tests</title>
<!-- Include the required JavaScript libraries: -->
<style type="text/css">
.container {
color: red;
}
.container a:link {
text-decoration: none;
color: inherit;
}
.container span.active a {
color: magenta;
}
/*
a:link { font-weight:bold; color:blue; text-decoration:none; }
a:visited { font-weight:bold; color:silver; text-decoration:none; }
a:focus { font-weight:bold; color:red; text-decoration:underline; }
a:hover { font-weight:bold; color:green; text-decoration:none; }
a:active { font-weight:bold; color:lime; text-decoration:underline; }
*/
</style>
</head>
<body>
<P>This file is only temporarily used to reproduce issues.</P>
<p style="color: red;">Using doctype HTML 4.01 Strict.</p>
<div id='tree'> </div>
<div class="container">
<div><span>text</span></div>
<div><span class="active"><a href="#">tag</a></span></div>
<div><span><a href="#">tag</a></span></div>
</div>
<p><a href="http://dynatree.googlecode.com">jquery.dynatree.js</a></p>
</body>
</html>

View File

@@ -0,0 +1,198 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title>Dynatree - HTML4 strict</title>
<script src="../jquery/jquery.js" type="text/javascript"></script>
<script src="../jquery/jquery-ui.custom.js" type="text/javascript"></script>
<script src="../jquery/jquery.cookie.js" type="text/javascript"></script>
<link href="../src/skin/ui.dynatree.css" rel="stylesheet" type="text/css" id="skinSheet">
<script src="../src/jquery.dynatree.js" type="text/javascript"></script>
<style type="text/css">
#tree ul.dynatree-container {
overflow: scroll;
position: relative;
width: 200px;
height: 250px;
}
#tree2 {
position: absolute;
top: 150px;
left: 350px;
}
</style>
<!-- Start_Exclude: This block is not part of the sample code -->
<link href="prettify.css" rel="stylesheet">
<script src="prettify.js" type="text/javascript"></script>
<link href="sample.css" rel="stylesheet" type="text/css">
<script src="sample.js" type="text/javascript"></script>
<!-- End_Exclude -->
<script type="text/javascript"><!--
var data = [
{"title": "Item 1"},
{"title": "Folder 2", "isFolder": true, "key": "folder2", "expand": true,
"children": [
{"title": "Sub-item 2.1",
"children": [
{"title": "Sub-item 2.1.1",
"children": [
{"title": "Sub-item 2.1.1.1"},
{"title": "Sub-item 2.1.2.2"},
{"title": "Sub-item 2.1.1.3"},
{"title": "Sub-item 2.1.2.4"}
]
},
{"title": "Sub-item 2.1.2"},
{"title": "Sub-item 2.1.3"},
{"title": "Sub-item 2.1.4"}
]
},
{"title": "Sub-item 2.2"},
{"title": "Sub-item 2.3 (lazy)"}
]
},
{"title": "Folder 3", "isFolder": true, "key": "folder3",
"children": [
{"title": "Sub-item 3.1",
"children": [
{"title": "Sub-item 3.1.1"},
{"title": "Sub-item 3.1.2"},
{"title": "Sub-item 3.1.3"},
{"title": "Sub-item 3.1.4"}
]
},
{"title": "Sub-item 3.2"},
{"title": "Sub-item 3.3"},
{"title": "Sub-item 3.4"}
]
},
{"title": "Item 5"}
];
$(function(){
// --- Initialize first Dynatree -------------------------------------------
$("#tree").dynatree({
children: data,
onActivate: function(node) {
$("#echoActive").text(node.data.title + "(" + node.data.key + ")");
},
onDeactivate: function(node) {
$("#echoActive").text("-");
},
dnd: {
onDragStart: function(node) {
logMsg("tree.onDragStart(%o)", node);
return true;
},
onDragStop: function(node) {
logMsg("tree.onDragStop(%o)", node);
},
autoExpandMS: 1000,
preventVoidMoves: true, // Prevent dropping nodes 'before self', etc.
onDragEnter: function(node, sourceNode) {
logMsg("tree.onDragEnter(%o, %o)", node, sourceNode);
return true;
},
onDragOver: function(node, sourceNode, hitMode) {
logMsg("tree.onDragOver(%o, %o, %o)", node, sourceNode, hitMode);
if(node.isDescendantOf(sourceNode)){
return false;
}
},
onDrop: function(node, sourceNode, hitMode, ui, draggable) {
logMsg("tree.onDrop(%o, %o, %s)", node, sourceNode, hitMode);
sourceNode.move(node, hitMode);
},
onDragLeave: function(node, sourceNode) {
logMsg("tree.onDragLeave(%o, %o)", node, sourceNode);
}
}
});
// --- Initialize second Dynatree ------------------------------------------
$("#tree2").dynatree({
children: data,
onActivate: function(node) {
$("#echoActive2").text(node.data.title + "(" + node.data.key + ")");
},
onDeactivate: function(node) {
$("#echoActive2").text("-");
},
dnd: {
onDragStart: function(node) {
logMsg("tree.onDragStart(%o)", node);
return true;
},
onDragStop: function(node) {
logMsg("tree.onDragStop(%o)", node);
},
autoExpandMS: 1000,
preventVoidMoves: true, // Prevent dropping nodes 'before self', etc.
onDragEnter: function(node, sourceNode) {
logMsg("tree.onDragEnter(%o, %o)", node, sourceNode);
return true;
},
onDragOver: function(node, sourceNode, hitMode) {
logMsg("tree.onDragOver(%o, %o, %o)", node, sourceNode, hitMode);
if(node.isDescendantOf(sourceNode)){
return false;
}
},
onDrop: function(node, sourceNode, hitMode, ui, draggable) {
logMsg("tree.onDrop(%o, %o, %s)", node, sourceNode, hitMode);
sourceNode.move(node, hitMode);
},
onDragLeave: function(node, sourceNode) {
logMsg("tree.onDragLeave(%o, %o)", node, sourceNode);
}
}
});
<!-- Start_Exclude: This block is not part of the sample code -->
$("#skinCombo")
.val(0) // set state to prevent caching
.change(function(){
var href = "../src/"
+ $(this).val()
+ "/ui.dynatree.css"
+ "?reload=" + new Date().getTime();
$("#skinSheet").attr("href", href);
});
<!-- End_Exclude -->
});
--></script>
</head>
<body class="example">
<h1>DTD test: HTML4 strict</h1>
<p class="description">
This sample uses the standard jQuery draggable and droppable.
</p>
<div>
Skin:
<select id="skinCombo" size="1">
<option value="skin">Standard ('/skin/')</option>
<option value="skin-vista">Vista ('/skin-vista/')</option>
</select>
</div>
<div id="tree"> 1 </div>
<div>Active node 1: <span id="echoActive">-</span></div>
<hr>
<div id="tree2"> 2 </div>
<div>Active node 2: <span id="echoActive2">-</span></div>
<!-- Start_Exclude: This block is not part of the sample code -->
<hr>
<p class="sample-links no_code">
<a class="hideInsideFS" href="http://dynatree.googlecode.com">jquery.dynatree.js project home</a>
<a class="hideOutsideFS" href="#">Link to this page</a>
<a class="hideInsideFS" href="samples.html">Example Browser</a>
<a href="#" id="codeExample">View source code</a>
</p>
<pre id="sourceCode" class="prettyprint" style="display:none"></pre>
<!-- End_Exclude -->
</body>
</html>

View File

@@ -0,0 +1,198 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title>Dynatree - HTML4 transitional</title>
<script src="../jquery/jquery.js" type="text/javascript"></script>
<script src="../jquery/jquery-ui.custom.js" type="text/javascript"></script>
<script src="../jquery/jquery.cookie.js" type="text/javascript"></script>
<link href="../src/skin/ui.dynatree.css" rel="stylesheet" type="text/css" id="skinSheet">
<script src="../src/jquery.dynatree.js" type="text/javascript"></script>
<style type="text/css">
#tree ul.dynatree-container {
overflow: scroll;
position: relative;
width: 200px;
height: 250px;
}
#tree2 {
position: absolute;
top: 150px;
left: 350px;
}
</style>
<!-- Start_Exclude: This block is not part of the sample code -->
<link href="prettify.css" rel="stylesheet">
<script src="prettify.js" type="text/javascript"></script>
<link href="sample.css" rel="stylesheet" type="text/css">
<script src="sample.js" type="text/javascript"></script>
<!-- End_Exclude -->
<script type="text/javascript"><!--
var data = [
{"title": "Item 1"},
{"title": "Folder 2", "isFolder": true, "key": "folder2", "expand": true,
"children": [
{"title": "Sub-item 2.1",
"children": [
{"title": "Sub-item 2.1.1",
"children": [
{"title": "Sub-item 2.1.1.1"},
{"title": "Sub-item 2.1.2.2"},
{"title": "Sub-item 2.1.1.3"},
{"title": "Sub-item 2.1.2.4"}
]
},
{"title": "Sub-item 2.1.2"},
{"title": "Sub-item 2.1.3"},
{"title": "Sub-item 2.1.4"}
]
},
{"title": "Sub-item 2.2"},
{"title": "Sub-item 2.3 (lazy)"}
]
},
{"title": "Folder 3", "isFolder": true, "key": "folder3",
"children": [
{"title": "Sub-item 3.1",
"children": [
{"title": "Sub-item 3.1.1"},
{"title": "Sub-item 3.1.2"},
{"title": "Sub-item 3.1.3"},
{"title": "Sub-item 3.1.4"}
]
},
{"title": "Sub-item 3.2"},
{"title": "Sub-item 3.3"},
{"title": "Sub-item 3.4"}
]
},
{"title": "Item 5"}
];
$(function(){
// --- Initialize first Dynatree -------------------------------------------
$("#tree").dynatree({
children: data,
onActivate: function(node) {
$("#echoActive").text(node.data.title + "(" + node.data.key + ")");
},
onDeactivate: function(node) {
$("#echoActive").text("-");
},
dnd: {
onDragStart: function(node) {
logMsg("tree.onDragStart(%o)", node);
return true;
},
onDragStop: function(node) {
logMsg("tree.onDragStop(%o)", node);
},
autoExpandMS: 1000,
preventVoidMoves: true, // Prevent dropping nodes 'before self', etc.
onDragEnter: function(node, sourceNode) {
logMsg("tree.onDragEnter(%o, %o)", node, sourceNode);
return true;
},
onDragOver: function(node, sourceNode, hitMode) {
logMsg("tree.onDragOver(%o, %o, %o)", node, sourceNode, hitMode);
if(node.isDescendantOf(sourceNode)){
return false;
}
},
onDrop: function(node, sourceNode, hitMode, ui, draggable) {
logMsg("tree.onDrop(%o, %o, %s)", node, sourceNode, hitMode);
sourceNode.move(node, hitMode);
},
onDragLeave: function(node, sourceNode) {
logMsg("tree.onDragLeave(%o, %o)", node, sourceNode);
}
}
});
// --- Initialize second Dynatree ------------------------------------------
$("#tree2").dynatree({
children: data,
onActivate: function(node) {
$("#echoActive2").text(node.data.title + "(" + node.data.key + ")");
},
onDeactivate: function(node) {
$("#echoActive2").text("-");
},
dnd: {
onDragStart: function(node) {
logMsg("tree.onDragStart(%o)", node);
return true;
},
onDragStop: function(node) {
logMsg("tree.onDragStop(%o)", node);
},
autoExpandMS: 1000,
preventVoidMoves: true, // Prevent dropping nodes 'before self', etc.
onDragEnter: function(node, sourceNode) {
logMsg("tree.onDragEnter(%o, %o)", node, sourceNode);
return true;
},
onDragOver: function(node, sourceNode, hitMode) {
logMsg("tree.onDragOver(%o, %o, %o)", node, sourceNode, hitMode);
if(node.isDescendantOf(sourceNode)){
return false;
}
},
onDrop: function(node, sourceNode, hitMode, ui, draggable) {
logMsg("tree.onDrop(%o, %o, %s)", node, sourceNode, hitMode);
sourceNode.move(node, hitMode);
},
onDragLeave: function(node, sourceNode) {
logMsg("tree.onDragLeave(%o, %o)", node, sourceNode);
}
}
});
<!-- Start_Exclude: This block is not part of the sample code -->
$("#skinCombo")
.val(0) // set state to prevent caching
.change(function(){
var href = "../src/"
+ $(this).val()
+ "/ui.dynatree.css"
+ "?reload=" + new Date().getTime();
$("#skinSheet").attr("href", href);
});
<!-- End_Exclude -->
});
--></script>
</head>
<body class="example">
<h1>DTD test: HTML4 transitional</h1>
<p class="description">
This sample uses the standard jQuery draggable and droppable.
</p>
<div>
Skin:
<select id="skinCombo" size="1">
<option value="skin">Standard ('/skin/')</option>
<option value="skin-vista">Vista ('/skin-vista/')</option>
</select>
</div>
<div id="tree"> 1 </div>
<div>Active node 1: <span id="echoActive">-</span></div>
<hr>
<div id="tree2"> 2 </div>
<div>Active node 2: <span id="echoActive2">-</span></div>
<!-- Start_Exclude: This block is not part of the sample code -->
<hr>
<p class="sample-links no_code">
<a class="hideInsideFS" href="http://dynatree.googlecode.com">jquery.dynatree.js project home</a>
<a class="hideOutsideFS" href="#">Link to this page</a>
<a class="hideInsideFS" href="samples.html">Example Browser</a>
<a href="#" id="codeExample">View source code</a>
</p>
<pre id="sourceCode" class="prettyprint" style="display:none"></pre>
<!-- End_Exclude -->
</body>
</html>

View File

@@ -0,0 +1,198 @@
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title>Dynatree - HTML5</title>
<script src="../jquery/jquery.js" type="text/javascript"></script>
<script src="../jquery/jquery-ui.custom.js" type="text/javascript"></script>
<script src="../jquery/jquery.cookie.js" type="text/javascript"></script>
<link href="../src/skin/ui.dynatree.css" rel="stylesheet" type="text/css" id="skinSheet">
<script src="../src/jquery.dynatree.js" type="text/javascript"></script>
<style type="text/css">
#tree ul.dynatree-container {
overflow: scroll;
position: relative;
width: 200px;
height: 250px;
}
#tree2 {
position: absolute;
top: 150px;
left: 350px;
}
</style>
<!-- Start_Exclude: This block is not part of the sample code -->
<link href="prettify.css" rel="stylesheet">
<script src="prettify.js" type="text/javascript"></script>
<link href="sample.css" rel="stylesheet" type="text/css">
<script src="sample.js" type="text/javascript"></script>
<!-- End_Exclude -->
<script type="text/javascript"><!--
var data = [
{"title": "Item 1"},
{"title": "Folder 2", "isFolder": true, "key": "folder2", "expand": true,
"children": [
{"title": "Sub-item 2.1",
"children": [
{"title": "Sub-item 2.1.1",
"children": [
{"title": "Sub-item 2.1.1.1"},
{"title": "Sub-item 2.1.2.2"},
{"title": "Sub-item 2.1.1.3"},
{"title": "Sub-item 2.1.2.4"}
]
},
{"title": "Sub-item 2.1.2"},
{"title": "Sub-item 2.1.3"},
{"title": "Sub-item 2.1.4"}
]
},
{"title": "Sub-item 2.2"},
{"title": "Sub-item 2.3 (lazy)"}
]
},
{"title": "Folder 3", "isFolder": true, "key": "folder3",
"children": [
{"title": "Sub-item 3.1",
"children": [
{"title": "Sub-item 3.1.1"},
{"title": "Sub-item 3.1.2"},
{"title": "Sub-item 3.1.3"},
{"title": "Sub-item 3.1.4"}
]
},
{"title": "Sub-item 3.2"},
{"title": "Sub-item 3.3"},
{"title": "Sub-item 3.4"}
]
},
{"title": "Item 5"}
];
$(function(){
// --- Initialize first Dynatree -------------------------------------------
$("#tree").dynatree({
children: data,
onActivate: function(node) {
$("#echoActive").text(node.data.title + "(" + node.data.key + ")");
},
onDeactivate: function(node) {
$("#echoActive").text("-");
},
dnd: {
onDragStart: function(node) {
logMsg("tree.onDragStart(%o)", node);
return true;
},
onDragStop: function(node) {
logMsg("tree.onDragStop(%o)", node);
},
autoExpandMS: 1000,
preventVoidMoves: true, // Prevent dropping nodes 'before self', etc.
onDragEnter: function(node, sourceNode) {
logMsg("tree.onDragEnter(%o, %o)", node, sourceNode);
return true;
},
onDragOver: function(node, sourceNode, hitMode) {
logMsg("tree.onDragOver(%o, %o, %o)", node, sourceNode, hitMode);
if(node.isDescendantOf(sourceNode)){
return false;
}
},
onDrop: function(node, sourceNode, hitMode, ui, draggable) {
logMsg("tree.onDrop(%o, %o, %s)", node, sourceNode, hitMode);
sourceNode.move(node, hitMode);
},
onDragLeave: function(node, sourceNode) {
logMsg("tree.onDragLeave(%o, %o)", node, sourceNode);
}
}
});
// --- Initialize second Dynatree ------------------------------------------
$("#tree2").dynatree({
children: data,
onActivate: function(node) {
$("#echoActive2").text(node.data.title + "(" + node.data.key + ")");
},
onDeactivate: function(node) {
$("#echoActive2").text("-");
},
dnd: {
onDragStart: function(node) {
logMsg("tree.onDragStart(%o)", node);
return true;
},
onDragStop: function(node) {
logMsg("tree.onDragStop(%o)", node);
},
autoExpandMS: 1000,
preventVoidMoves: true, // Prevent dropping nodes 'before self', etc.
onDragEnter: function(node, sourceNode) {
logMsg("tree.onDragEnter(%o, %o)", node, sourceNode);
return true;
},
onDragOver: function(node, sourceNode, hitMode) {
logMsg("tree.onDragOver(%o, %o, %o)", node, sourceNode, hitMode);
if(node.isDescendantOf(sourceNode)){
return false;
}
},
onDrop: function(node, sourceNode, hitMode, ui, draggable) {
logMsg("tree.onDrop(%o, %o, %s)", node, sourceNode, hitMode);
sourceNode.move(node, hitMode);
},
onDragLeave: function(node, sourceNode) {
logMsg("tree.onDragLeave(%o, %o)", node, sourceNode);
}
}
});
<!-- Start_Exclude: This block is not part of the sample code -->
$("#skinCombo")
.val(0) // set state to prevent caching
.change(function(){
var href = "../src/"
+ $(this).val()
+ "/ui.dynatree.css"
+ "?reload=" + new Date().getTime();
$("#skinSheet").attr("href", href);
});
<!-- End_Exclude -->
});
--></script>
</head>
<body class="example">
<h1>DTD test: HTML5</h1>
<p class="description">
This sample uses the standard jQuery draggable and droppable.
</p>
<div>
Skin:
<select id="skinCombo" size="1">
<option value="skin">Standard ('/skin/')</option>
<option value="skin-vista">Vista ('/skin-vista/')</option>
</select>
</div>
<div id="tree"> 1 </div>
<div>Active node 1: <span id="echoActive">-</span></div>
<hr>
<div id="tree2"> 2 </div>
<div>Active node 2: <span id="echoActive2">-</span></div>
<!-- Start_Exclude: This block is not part of the sample code -->
<hr>
<p class="sample-links no_code">
<a class="hideInsideFS" href="http://dynatree.googlecode.com">jquery.dynatree.js project home</a>
<a class="hideOutsideFS" href="#">Link to this page</a>
<a class="hideInsideFS" href="samples.html">Example Browser</a>
<a href="#" id="codeExample">View source code</a>
</p>
<pre id="sourceCode" class="prettyprint" style="display:none"></pre>
<!-- End_Exclude -->
</body>
</html>

View File

@@ -0,0 +1,197 @@
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title>Dynatree - no DTD (i.e. 'Quirks')</title>
<script src="../jquery/jquery.js" type="text/javascript"></script>
<script src="../jquery/jquery-ui.custom.js" type="text/javascript"></script>
<script src="../jquery/jquery.cookie.js" type="text/javascript"></script>
<link href="../src/skin/ui.dynatree.css" rel="stylesheet" type="text/css" id="skinSheet">
<script src="../src/jquery.dynatree.js" type="text/javascript"></script>
<style type="text/css">
#tree ul.dynatree-container {
overflow: scroll;
position: relative;
width: 200px;
height: 250px;
}
#tree2 {
position: absolute;
top: 150px;
left: 350px;
}
</style>
<!-- Start_Exclude: This block is not part of the sample code -->
<link href="prettify.css" rel="stylesheet">
<script src="prettify.js" type="text/javascript"></script>
<link href="sample.css" rel="stylesheet" type="text/css">
<script src="sample.js" type="text/javascript"></script>
<!-- End_Exclude -->
<script type="text/javascript"><!--
var data = [
{"title": "Item 1"},
{"title": "Folder 2", "isFolder": true, "key": "folder2", "expand": true,
"children": [
{"title": "Sub-item 2.1",
"children": [
{"title": "Sub-item 2.1.1",
"children": [
{"title": "Sub-item 2.1.1.1"},
{"title": "Sub-item 2.1.2.2"},
{"title": "Sub-item 2.1.1.3"},
{"title": "Sub-item 2.1.2.4"}
]
},
{"title": "Sub-item 2.1.2"},
{"title": "Sub-item 2.1.3"},
{"title": "Sub-item 2.1.4"}
]
},
{"title": "Sub-item 2.2"},
{"title": "Sub-item 2.3 (lazy)"}
]
},
{"title": "Folder 3", "isFolder": true, "key": "folder3",
"children": [
{"title": "Sub-item 3.1",
"children": [
{"title": "Sub-item 3.1.1"},
{"title": "Sub-item 3.1.2"},
{"title": "Sub-item 3.1.3"},
{"title": "Sub-item 3.1.4"}
]
},
{"title": "Sub-item 3.2"},
{"title": "Sub-item 3.3"},
{"title": "Sub-item 3.4"}
]
},
{"title": "Item 5"}
];
$(function(){
// --- Initialize first Dynatree -------------------------------------------
$("#tree").dynatree({
children: data,
onActivate: function(node) {
$("#echoActive").text(node.data.title + "(" + node.data.key + ")");
},
onDeactivate: function(node) {
$("#echoActive").text("-");
},
dnd: {
onDragStart: function(node) {
logMsg("tree.onDragStart(%o)", node);
return true;
},
onDragStop: function(node) {
logMsg("tree.onDragStop(%o)", node);
},
autoExpandMS: 1000,
preventVoidMoves: true, // Prevent dropping nodes 'before self', etc.
onDragEnter: function(node, sourceNode) {
logMsg("tree.onDragEnter(%o, %o)", node, sourceNode);
return true;
},
onDragOver: function(node, sourceNode, hitMode) {
logMsg("tree.onDragOver(%o, %o, %o)", node, sourceNode, hitMode);
if(node.isDescendantOf(sourceNode)){
return false;
}
},
onDrop: function(node, sourceNode, hitMode, ui, draggable) {
logMsg("tree.onDrop(%o, %o, %s)", node, sourceNode, hitMode);
sourceNode.move(node, hitMode);
},
onDragLeave: function(node, sourceNode) {
logMsg("tree.onDragLeave(%o, %o)", node, sourceNode);
}
}
});
// --- Initialize second Dynatree ------------------------------------------
$("#tree2").dynatree({
children: data,
onActivate: function(node) {
$("#echoActive2").text(node.data.title + "(" + node.data.key + ")");
},
onDeactivate: function(node) {
$("#echoActive2").text("-");
},
dnd: {
onDragStart: function(node) {
logMsg("tree.onDragStart(%o)", node);
return true;
},
onDragStop: function(node) {
logMsg("tree.onDragStop(%o)", node);
},
autoExpandMS: 1000,
preventVoidMoves: true, // Prevent dropping nodes 'before self', etc.
onDragEnter: function(node, sourceNode) {
logMsg("tree.onDragEnter(%o, %o)", node, sourceNode);
return true;
},
onDragOver: function(node, sourceNode, hitMode) {
logMsg("tree.onDragOver(%o, %o, %o)", node, sourceNode, hitMode);
if(node.isDescendantOf(sourceNode)){
return false;
}
},
onDrop: function(node, sourceNode, hitMode, ui, draggable) {
logMsg("tree.onDrop(%o, %o, %s)", node, sourceNode, hitMode);
sourceNode.move(node, hitMode);
},
onDragLeave: function(node, sourceNode) {
logMsg("tree.onDragLeave(%o, %o)", node, sourceNode);
}
}
});
<!-- Start_Exclude: This block is not part of the sample code -->
$("#skinCombo")
.val(0) // set state to prevent caching
.change(function(){
var href = "../src/"
+ $(this).val()
+ "/ui.dynatree.css"
+ "?reload=" + new Date().getTime();
$("#skinSheet").attr("href", href);
});
<!-- End_Exclude -->
});
--></script>
</head>
<body class="example">
<h1>DTD test: no DTD ('quirks')</h1>
<p class="description">
This sample uses the standard jQuery draggable and droppable.
</p>
<div>
Skin:
<select id="skinCombo" size="1">
<option value="skin">Standard ('/skin/')</option>
<option value="skin-vista">Vista ('/skin-vista/')</option>
</select>
</div>
<div id="tree"> 1 </div>
<div>Active node 1: <span id="echoActive">-</span></div>
<hr>
<div id="tree2"> 2 </div>
<div>Active node 2: <span id="echoActive2">-</span></div>
<!-- Start_Exclude: This block is not part of the sample code -->
<hr>
<p class="sample-links no_code">
<a class="hideInsideFS" href="http://dynatree.googlecode.com">jquery.dynatree.js project home</a>
<a class="hideOutsideFS" href="#">Link to this page</a>
<a class="hideInsideFS" href="samples.html">Example Browser</a>
<a href="#" id="codeExample">View source code</a>
</p>
<pre id="sourceCode" class="prettyprint" style="display:none"></pre>
<!-- End_Exclude -->
</body>
</html>

View File

@@ -0,0 +1,199 @@
<?xml version="1.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">
<head>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title>Dynatree - DTD XML strict</title>
<script src="../jquery/jquery.js" type="text/javascript"></script>
<script src="../jquery/jquery-ui.custom.js" type="text/javascript"></script>
<script src="../jquery/jquery.cookie.js" type="text/javascript"></script>
<link href="../src/skin/ui.dynatree.css" rel="stylesheet" type="text/css" id="skinSheet">
<script src="../src/jquery.dynatree.js" type="text/javascript"></script>
<style type="text/css">
#tree ul.dynatree-container {
overflow: scroll;
position: relative;
width: 200px;
height: 250px;
}
#tree2 {
position: absolute;
top: 150px;
left: 350px;
}
</style>
<!-- Start_Exclude: This block is not part of the sample code -->
<link href="prettify.css" rel="stylesheet">
<script src="prettify.js" type="text/javascript"></script>
<link href="sample.css" rel="stylesheet" type="text/css">
<script src="sample.js" type="text/javascript"></script>
<!-- End_Exclude -->
<script type="text/javascript"><!--
var data = [
{"title": "Item 1"},
{"title": "Folder 2", "isFolder": true, "key": "folder2", "expand": true,
"children": [
{"title": "Sub-item 2.1",
"children": [
{"title": "Sub-item 2.1.1",
"children": [
{"title": "Sub-item 2.1.1.1"},
{"title": "Sub-item 2.1.2.2"},
{"title": "Sub-item 2.1.1.3"},
{"title": "Sub-item 2.1.2.4"}
]
},
{"title": "Sub-item 2.1.2"},
{"title": "Sub-item 2.1.3"},
{"title": "Sub-item 2.1.4"}
]
},
{"title": "Sub-item 2.2"},
{"title": "Sub-item 2.3 (lazy)"}
]
},
{"title": "Folder 3", "isFolder": true, "key": "folder3",
"children": [
{"title": "Sub-item 3.1",
"children": [
{"title": "Sub-item 3.1.1"},
{"title": "Sub-item 3.1.2"},
{"title": "Sub-item 3.1.3"},
{"title": "Sub-item 3.1.4"}
]
},
{"title": "Sub-item 3.2"},
{"title": "Sub-item 3.3"},
{"title": "Sub-item 3.4"}
]
},
{"title": "Item 5"}
];
$(function(){
// --- Initialize first Dynatree -------------------------------------------
$("#tree").dynatree({
children: data,
onActivate: function(node) {
$("#echoActive").text(node.data.title + "(" + node.data.key + ")");
},
onDeactivate: function(node) {
$("#echoActive").text("-");
},
dnd: {
onDragStart: function(node) {
logMsg("tree.onDragStart(%o)", node);
return true;
},
onDragStop: function(node) {
logMsg("tree.onDragStop(%o)", node);
},
autoExpandMS: 1000,
preventVoidMoves: true, // Prevent dropping nodes 'before self', etc.
onDragEnter: function(node, sourceNode) {
logMsg("tree.onDragEnter(%o, %o)", node, sourceNode);
return true;
},
onDragOver: function(node, sourceNode, hitMode) {
logMsg("tree.onDragOver(%o, %o, %o)", node, sourceNode, hitMode);
if(node.isDescendantOf(sourceNode)){
return false;
}
},
onDrop: function(node, sourceNode, hitMode, ui, draggable) {
logMsg("tree.onDrop(%o, %o, %s)", node, sourceNode, hitMode);
sourceNode.move(node, hitMode);
},
onDragLeave: function(node, sourceNode) {
logMsg("tree.onDragLeave(%o, %o)", node, sourceNode);
}
}
});
// --- Initialize second Dynatree ------------------------------------------
$("#tree2").dynatree({
children: data,
onActivate: function(node) {
$("#echoActive2").text(node.data.title + "(" + node.data.key + ")");
},
onDeactivate: function(node) {
$("#echoActive2").text("-");
},
dnd: {
onDragStart: function(node) {
logMsg("tree.onDragStart(%o)", node);
return true;
},
onDragStop: function(node) {
logMsg("tree.onDragStop(%o)", node);
},
autoExpandMS: 1000,
preventVoidMoves: true, // Prevent dropping nodes 'before self', etc.
onDragEnter: function(node, sourceNode) {
logMsg("tree.onDragEnter(%o, %o)", node, sourceNode);
return true;
},
onDragOver: function(node, sourceNode, hitMode) {
logMsg("tree.onDragOver(%o, %o, %o)", node, sourceNode, hitMode);
if(node.isDescendantOf(sourceNode)){
return false;
}
},
onDrop: function(node, sourceNode, hitMode, ui, draggable) {
logMsg("tree.onDrop(%o, %o, %s)", node, sourceNode, hitMode);
sourceNode.move(node, hitMode);
},
onDragLeave: function(node, sourceNode) {
logMsg("tree.onDragLeave(%o, %o)", node, sourceNode);
}
}
});
<!-- Start_Exclude: This block is not part of the sample code -->
$("#skinCombo")
.val(0) // set state to prevent caching
.change(function(){
var href = "../src/"
+ $(this).val()
+ "/ui.dynatree.css"
+ "?reload=" + new Date().getTime();
$("#skinSheet").attr("href", href);
});
<!-- End_Exclude -->
});
--></script>
</head>
<body class="example">
<h1>DTD test: XML strict</h1>
<p class="description">
This sample uses the standard jQuery draggable and droppable.
</p>
<div>
Skin:
<select id="skinCombo" size="1">
<option value="skin">Standard ('/skin/')</option>
<option value="skin-vista">Vista ('/skin-vista/')</option>
</select>
</div>
<div id="tree"> 1 </div>
<div>Active node 1: <span id="echoActive">-</span></div>
<hr>
<div id="tree2"> 2 </div>
<div>Active node 2: <span id="echoActive2">-</span></div>
<!-- Start_Exclude: This block is not part of the sample code -->
<hr>
<p class="sample-links no_code">
<a class="hideInsideFS" href="http://dynatree.googlecode.com">jquery.dynatree.js project home</a>
<a class="hideOutsideFS" href="#">Link to this page</a>
<a class="hideInsideFS" href="samples.html">Example Browser</a>
<a href="#" id="codeExample">View source code</a>
</p>
<pre id="sourceCode" class="prettyprint" style="display:none"></pre>
<!-- End_Exclude -->
</body>
</html>

View File

@@ -0,0 +1,200 @@
<?xml version="1.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>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title>Dynatree - XML transitionale</title>
<script src="../jquery/jquery.js" type="text/javascript"></script>
<script src="../jquery/jquery-ui.custom.js" type="text/javascript"></script>
<script src="../jquery/jquery.cookie.js" type="text/javascript"></script>
<link href="../src/skin/ui.dynatree.css" rel="stylesheet" type="text/css" id="skinSheet">
<script src="../src/jquery.dynatree.js" type="text/javascript"></script>
<style type="text/css">
#tree ul.dynatree-container {
overflow: scroll;
position: relative;
width: 200px;
height: 250px;
}
#tree2 {
position: absolute;
top: 150px;
left: 350px;
}
</style>
<!-- Start_Exclude: This block is not part of the sample code -->
<link href="prettify.css" rel="stylesheet">
<script src="prettify.js" type="text/javascript"></script>
<link href="sample.css" rel="stylesheet" type="text/css">
<script src="sample.js" type="text/javascript"></script>
<!-- End_Exclude -->
<script type="text/javascript"><!--
var data = [
{"title": "Item 1"},
{"title": "Folder 2", "isFolder": true, "key": "folder2", "expand": true,
"children": [
{"title": "Sub-item 2.1",
"children": [
{"title": "Sub-item 2.1.1",
"children": [
{"title": "Sub-item 2.1.1.1"},
{"title": "Sub-item 2.1.2.2"},
{"title": "Sub-item 2.1.1.3"},
{"title": "Sub-item 2.1.2.4"}
]
},
{"title": "Sub-item 2.1.2"},
{"title": "Sub-item 2.1.3"},
{"title": "Sub-item 2.1.4"}
]
},
{"title": "Sub-item 2.2"},
{"title": "Sub-item 2.3 (lazy)"}
]
},
{"title": "Folder 3", "isFolder": true, "key": "folder3",
"children": [
{"title": "Sub-item 3.1",
"children": [
{"title": "Sub-item 3.1.1"},
{"title": "Sub-item 3.1.2"},
{"title": "Sub-item 3.1.3"},
{"title": "Sub-item 3.1.4"}
]
},
{"title": "Sub-item 3.2"},
{"title": "Sub-item 3.3"},
{"title": "Sub-item 3.4"}
]
},
{"title": "Item 5"}
];
$(function(){
// --- Initialize first Dynatree -------------------------------------------
$("#tree").dynatree({
children: data,
onActivate: function(node) {
$("#echoActive").text(node.data.title + "(" + node.data.key + ")");
},
onDeactivate: function(node) {
$("#echoActive").text("-");
},
dnd: {
onDragStart: function(node) {
logMsg("tree.onDragStart(%o)", node);
return true;
},
onDragStop: function(node) {
logMsg("tree.onDragStop(%o)", node);
},
autoExpandMS: 1000,
preventVoidMoves: true, // Prevent dropping nodes 'before self', etc.
onDragEnter: function(node, sourceNode) {
logMsg("tree.onDragEnter(%o, %o)", node, sourceNode);
return true;
},
onDragOver: function(node, sourceNode, hitMode) {
logMsg("tree.onDragOver(%o, %o, %o)", node, sourceNode, hitMode);
if(node.isDescendantOf(sourceNode)){
return false;
}
},
onDrop: function(node, sourceNode, hitMode, ui, draggable) {
logMsg("tree.onDrop(%o, %o, %s)", node, sourceNode, hitMode);
sourceNode.move(node, hitMode);
},
onDragLeave: function(node, sourceNode) {
logMsg("tree.onDragLeave(%o, %o)", node, sourceNode);
}
}
});
// --- Initialize second Dynatree ------------------------------------------
$("#tree2").dynatree({
children: data,
onActivate: function(node) {
$("#echoActive2").text(node.data.title + "(" + node.data.key + ")");
},
onDeactivate: function(node) {
$("#echoActive2").text("-");
},
dnd: {
onDragStart: function(node) {
logMsg("tree.onDragStart(%o)", node);
return true;
},
onDragStop: function(node) {
logMsg("tree.onDragStop(%o)", node);
},
autoExpandMS: 1000,
preventVoidMoves: true, // Prevent dropping nodes 'before self', etc.
onDragEnter: function(node, sourceNode) {
logMsg("tree.onDragEnter(%o, %o)", node, sourceNode);
return true;
},
onDragOver: function(node, sourceNode, hitMode) {
logMsg("tree.onDragOver(%o, %o, %o)", node, sourceNode, hitMode);
if(node.isDescendantOf(sourceNode)){
return false;
}
},
onDrop: function(node, sourceNode, hitMode, ui, draggable) {
logMsg("tree.onDrop(%o, %o, %s)", node, sourceNode, hitMode);
sourceNode.move(node, hitMode);
},
onDragLeave: function(node, sourceNode) {
logMsg("tree.onDragLeave(%o, %o)", node, sourceNode);
}
}
});
<!-- Start_Exclude: This block is not part of the sample code -->
$("#skinCombo")
.val(0) // set state to prevent caching
.change(function(){
var href = "../src/"
+ $(this).val()
+ "/ui.dynatree.css"
+ "?reload=" + new Date().getTime();
$("#skinSheet").attr("href", href);
});
<!-- End_Exclude -->
});
--></script>
</head>
<body class="example">
<h1>DTD test: XML transitional</h1>
<p class="description">
This sample uses the standard jQuery draggable and droppable.
</p>
<div>
Skin:
<select id="skinCombo" size="1">
<option value="skin">Standard ('/skin/')</option>
<option value="skin-vista">Vista ('/skin-vista/')</option>
</select>
</div>
<div id="tree"> 1 </div>
<div>Active node 1: <span id="echoActive">-</span></div>
<hr>
<div id="tree2"> 2 </div>
<div>Active node 2: <span id="echoActive2">-</span></div>
<!-- Start_Exclude: This block is not part of the sample code -->
<hr>
<p class="sample-links no_code">
<a class="hideInsideFS" href="http://dynatree.googlecode.com">jquery.dynatree.js project home</a>
<a class="hideOutsideFS" href="#">Link to this page</a>
<a class="hideInsideFS" href="samples.html">Example Browser</a>
<a href="#" id="codeExample">View source code</a>
</p>
<pre id="sourceCode" class="prettyprint" style="display:none"></pre>
<!-- End_Exclude -->
</body>
</html>

View File

@@ -0,0 +1,262 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title>Dynatree - Test wit latest jQuery</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" type="text/javascript"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js" type="text/javascript"></script>
<script src="../jquery/jquery.cookie.js" type="text/javascript"></script>
<link href="../src/skin/ui.dynatree.css" rel="stylesheet" type="text/css" id="skinSheet">
<script src="../src/jquery.dynatree.js" type="text/javascript"></script>
<style type="text/css">
#draggableSample, #droppableSample {
height:100px;
padding:0.5em;
width:150px;
border:1px solid #AAAAAA;
}
#draggableSample {
background-color: silver;
color:#222222;
}
#droppableSample {
background-color: maroon;
color: white;
}
#droppableSample.drophover {
border: 1px solid green;
}
</style>
<!-- Start_Exclude: This block is not part of the sample code -->
<link href="prettify.css" rel="stylesheet">
<script src="prettify.js" type="text/javascript"></script>
<link href="sample.css" rel="stylesheet" type="text/css">
<script src="sample.js" type="text/javascript"></script>
<!-- End_Exclude -->
<script type="text/javascript"><!--
$(function(){
// --- Initialize first Dynatree -------------------------------------------
$("#tree").dynatree({
initAjax: {
url: "sample-data3.json"
},
onLazyRead: function(node){
// Mockup a slow reqeuest ...
node.appendAjax({
url: "sample-data2.json",
debugLazyDelay: 750 // don't do thi in production code
});
},
onActivate: function(node) {
$("#echoActive").text(node.data.title + "(" + node.data.key + ")");
},
onDeactivate: function(node) {
$("#echoActive").text("-");
},
dnd: {
onDragStart: function(node) {
/** This function MUST be defined to enable dragging for the tree.
* Return false to cancel dragging of node.
*/
logMsg("tree.onDragStart(%o)", node);
if(node.data.isFolder)
return false;
return true;
},
onDragStop: function(node) {
logMsg("tree.onDragStop(%o)", node);
}
}
});
// --- Initialize second Dynatree ------------------------------------------
$("#tree2").dynatree({
initAjax: {
url: "sample-data3.json"
},
onLazyRead: function(node){
// Mockup a slow reqeuest ...
node.appendAjax({
url: "sample-data2.json",
debugLazyDelay: 750 // don't do thi in production code
});
},
onActivate: function(node) {
$("#echoActive2").text(node.data.title + "(" + node.data.key + ")");
},
onDeactivate: function(node) {
$("#echoActive2").text("-");
},
onLazyRead: function(node){
node.appendAjax({
url: "sample-data2.json"
});
},
dnd: {
autoExpandMS: 1000,
preventVoidMoves: true, // Prevent dropping nodes 'before self', etc.
onDragEnter: function(node, sourceNode) {
/** sourceNode may be null for non-dynatree droppables.
* Return false to disallow dropping on node. In this case
* onDragOver and onDragLeave are not called.
* Return 'over', 'before, or 'after' to force a hitMode.
* Any other return value will calc the hitMode from the cursor position.
*/
logMsg("tree.onDragEnter(%o, %o)", node, sourceNode);
// if(node.data.isFolder)
// return false;
return true;
// return "over";
},
onDragOver: function(node, sourceNode, hitMode) {
/** Return false to disallow dropping this node.
*
*/
// if(node.data.isFolder){
// var dd = $.ui.ddmanager.current;
// dd.cancel();
// alert("folder");
// }
logMsg("tree.onDragOver(%o, %o, %o)", node, sourceNode, hitMode);
},
onDrop: function(node, sourceNode, hitMode, ui, draggable) {
/**This function MUST be defined to enable dropping of items on the tree.
* sourceNode may be null, if it is a non-Dynatree droppable.
*/
logMsg("tree.onDrop(%o, %o)", node, sourceNode);
var copynode;
if(sourceNode) {
copynode = sourceNode.toDict(true, function(dict){
dict.title = "Copy of " + dict.title;
delete dict.key; // Remove key, so a new one will be created
});
}else{
copynode = {title: "This node was dropped here (" + ui.helper + ")."};
}
if(hitMode == "over"){
// Append as child node
node.addChild(copynode);
// expand the drop target
node.expand(true);
}else if(hitMode == "before"){
// Add before this, i.e. as child of current parent
node.parent.addChild(copynode, node);
}else if(hitMode == "after"){
// Add after this, i.e. as child of current parent
node.parent.addChild(copynode, node.getNextSibling());
}
},
onDragLeave: function(node, sourceNode) {
/** Always called if onDragEnter was called.
*/
logMsg("tree.onDragLeave(%o, %o)", node, sourceNode);
}
}
});
// --- Initialize simple draggable sample ----------------------------------
$("#draggableSample").draggable({
revert: true,
connectToDynatree: true,
cursorAt: { top: -5, left:-5 },
helper: "clone"
});
// --- Initialize simple droppable sample ----------------------------------
$("#droppableSample").droppable({
hoverClass: "drophover",
addClasses: true,
over: function(event, ui) {
logMsg("droppable.over, %o, %o", event, ui);
},
drop: function(event, ui) {
var source = ui.helper.data("dtSourceNode") || ui.draggable;
$(this).addClass("ui-state-highlight").find("p").html("Dropped " + source);
// alert("dropped");
}
});
<!-- Start_Exclude: This block is not part of the sample code -->
$("#skinCombo")
.val(0) // set state to prevent caching
.change(function(){
var href = "../src/"
+ $(this).val()
+ "/ui.dynatree.css"
+ "?reload=" + new Date().getTime();
$("#skinSheet").attr("href", href);
});
<!-- End_Exclude -->
});
--></script>
</head>
<body class="example">
<h1>Example: Standard jQuery drag-and-drop</h1>
<p class="description">
This sample uses the standard jQuery draggable and droppable.
</p>
<div>
Skin:
<select id="skinCombo" size="1">
<option value="skin">Standard ('/skin/')</option>
<option value="skin-vista">Vista ('/skin-vista/')</option>
</select>
</div>
<table>
<thead>
<tr>
<th>
<p>This tree allows dragging.</p>
</th>
<th>
<p>This tree allows dropping.</p>
</th>
</tr>
</thead>
<tbody>
<tr valign="top">
<td>
<div id="tree"> </div>
</td>
<td>
<div id="tree2"></div>
</td>
</tr>
<tr>
<td>
<div>Active node: <span id="echoActive">-</span></div>
</td>
<td>
<div>Active node: <span id="echoActive2">-</span></div>
</td>
</tr>
<tr>
<td>
<div id="draggableSample" class="ui-widget-content">
<p>Drag me around</p>
</div>
</td>
<td>
<div id="droppableSample" class="ui-widget-content">
<p>Drop something here</p>
</div>
</td>
</tr>
</tbody>
</table>
<!-- Start_Exclude: This block is not part of the sample code -->
<hr>
<p class="sample-links no_code">
<a class="hideInsideFS" href="http://dynatree.googlecode.com">jquery.dynatree.js project home</a>
<a class="hideOutsideFS" href="#">Link to this page</a>
<a class="hideInsideFS" href="samples.html">Example Browser</a>
<a href="#" id="codeExample">View source code</a>
</p>
<pre id="sourceCode" class="prettyprint" style="display:none"></pre>
<!-- End_Exclude -->
</body>
</html>

View File

@@ -0,0 +1,121 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title>Dynatree - Example</title>
<script src="../jquery/jquery.js" type="text/javascript"></script>
<script src="../jquery/jquery-ui.custom.js" type="text/javascript"></script>
<script src="../jquery/jquery.cookie.js" type="text/javascript"></script>
<link href="../src/skin/ui.dynatree.css" rel="stylesheet" type="text/css">
<script src="../src/jquery.dynatree.js" type="text/javascript"></script>
<!-- Start_Exclude: This block is not part of the sample code -->
<link href="prettify.css" rel="stylesheet">
<script src="prettify.js" type="text/javascript"></script>
<link href="sample.css" rel="stylesheet" type="text/css">
<script src="sample.js" type="text/javascript"></script>
<!-- End_Exclude -->
<script type="text/javascript">
var treeData = [
{title: "item1 with key and tooltip", tooltip: "Look, a tool tip!" },
{title: "item2: selected on init", select: true },
{title: "Folder with some children", isFolder: true, key: "id3",
children: [
{title: "Sub-item 3.1",
children: [
{title: "Sub-item 3.1.1", key: "id3.1.1" },
{title: "Sub-item 3.1.2", key: "id3.1.2" }
]
},
{title: "Sub-item 3.2",
children: [
{title: "Sub-item 3.2.1", key: "id3.2.1" },
{title: "Sub-item 3.2.2", key: "id3.2.2" }
]
}
]
},
{title: "Documnent with some children (expanded on init)", key: "id4", expand: true,
children: [
{title: "Sub-item 4.1 (active on init)", activate: true,
children: [
{title: "Sub-item 4.1.1", key: "id4.1.1" },
{title: "Sub-item 4.1.2", key: "id4.1.2" }
]
},
{title: "Sub-item 4.2 (selected on init)", select: true,
children: [
{title: "Sub-item 4.2.1", key: "id4.2.1" },
{title: "Sub-item 4.2.2", key: "id4.2.2" }
]
}
]
}
];
$(function(){
$("#tree").dynatree({
persist: true,
checkbox: true,
children: treeData,
// clickFolderMode: 1,
selectMode: 2,
onPostInit: function(isReloading, isError) {
logMsg("onPostInit(): tree:%o, isReloading:%o, isError:%o", this, isReloading, isError);
logMsg("onPostInit(): tree.isReloading:%o, tree.isInitializing:%o", this.isReloading(), this.isInitializing());
var persistData = this.getPersistData();
logMsg("persistData: %o", persistData);
this.reactivate();
},
onActivate: function(node) {
logMsg("onActivate: %o, userEvent:%o", node, node.tree.isUserEvent());
$("#echoActive").text(node.data.title);
},
onDeactivate: function(node) {
$("#echoActive").text("-");
},
onDblClick: function(node, event) {
logMsg("onDblClick(%o, %o)", node, event);
node.toggleExpand();
}
});
logMsg("after widget init: %o", this);
});
</script>
</head>
<body class="example">
<h1>TEST: Persist</h1>
<p class="description">
Cookie persistence and is enabled here.<br>
(Also, double-click handler expands document nodes.)<br>
Select a node and hit [F5] to refresh, to see how the active node and
expansion and selection states are restored.<br>
<br>
NOTE: if this doesn't seem to work, it's probably because the frame
content is cached by the browser.<br>
Try this example as an
<a href="#" target="_blank">unframed page</a>.
</p>
<!-- Tree container -->
<div id="tree"></div>
<div>Active node: <span id="echoActive">-</span></div>
<!-- Start_Exclude: This block is not part of the sample code -->
<hr>
<p class="sample-links no_code">
<a class="hideInsideFS" href="http://dynatree.googlecode.com">jquery.dynatree.js project home</a>
<a class="hideOutsideFS" href="#">Link to this page</a>
<a class="hideInsideFS" href="samples.html">Example Browser</a>
<a href="#" id="codeExample">View source code</a>
</p>
<pre id="sourceCode" class="prettyprint" style="display:none"></pre>
<!-- End_Exclude -->
</body>
</html>

View File

@@ -0,0 +1,115 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title>Dynatree - Example</title>
<script src="../jquery/jquery.js" type="text/javascript"></script>
<script src="../jquery/jquery-ui.custom.js" type="text/javascript"></script>
<script src="../jquery/jquery.cookie.js" type="text/javascript"></script>
<!--
jQuery.Preload Plugin by Ariel Flesler
http://flesler.blogspot.com/2008/01/jquerypreload.html
-->
<script src="../jquery/jquery.preload-min.js" type="text/javascript"></script>
<link href="../src/skin-vista/ui.dynatree.css" rel="stylesheet" type="text/css">
<script src="../src/jquery.dynatree.js" type="text/javascript"></script>
<!-- Start_Exclude: This block is not part of the sample code -->
<link href="prettify.css" rel="stylesheet">
<script src="prettify.js" type="text/javascript"></script>
<link href="sample.css" rel="stylesheet" type="text/css">
<script src="sample.js" type="text/javascript"></script>
<!-- End_Exclude -->
<script type="text/javascript">
$(function(){
// Preload images (roughly sorted by importance)
// Uses jQuery.Preload Plugin by Ariel Flesler (http://flesler.blogspot.com/2008/01/jquerypreload.html)
$.preload([
"ltWait",
"vline",
"ltFld", "ltFld_o",
"ltL_", "ltL_ne", "ltL_nes", "ltL_ns", "ltM_ne", "ltM_nes", "ltP_ne", "ltP_nes",
"ltD_ne", "ltD_nes", "ltDoc",
"ltError",
"cbUnchecked", "cbUnchecked_hover",
"cbChecked", "cbChecked_hover",
"cbIntermediate", "cbIntermediate_hover",
"rbUnchecked", "rbUnchecked_hover",
"rbChecked", "rbChecked_hover",
"rbIntermediate", "rbIntermediate_hover",
"move_here", "copy_here",
"drop_accept", "drop_here", "drop_reject", "drop_sibling_here"
], {
base: "skin/",
ext: ".jpg",
onComplete: function(data){
// Loaded one image
logMsg("Loaded " + data.image);
},
onFinish: function(data){
// All images loaded:
logMsg("Loaded " + data.loaded + ", failed: " + data.failed);
}
});
$("#tree").dynatree({
// In real life we would call a URL on the server like this:
// initAjax: {
// url: "/getTopLevelNodesAsJson",
// data: { mode: "funnyMode" }
// },
// .. but here we use a local file instead:
initAjax: {
url: "sample-data3.json",
cache: true,
dataType: "json",
type: "GET",
timeout: 5000,
async: false
},
onLazyRead: function(node){
node.appendAjax({
url: "sample-data3.json",
cache: true,
dataType: "json",
type: "GET",
timeout: 5000,
async: false
});
},
onActivate: function(node) {
$("#echoActive").text(node.data.title);
},
onDeactivate: function(node) {
$("#echoActive").text("-");
}
});
});
</script>
</head>
<body class="example">
<h1>Example: Init from Ajax request</h1>
<p class="description">
This sample initializes the tree from a JSON request.
</p>
<!-- Add a <div> element where the tree should appear: -->
<div id="tree"> </div>
<div>Active node: <span id="echoActive">-</span></div>
<!-- Start_Exclude: This block is not part of the sample code -->
<hr>
<p class="sample-links no_code">
<a class="hideInsideFS" href="http://dynatree.googlecode.com">jquery.dynatree.js project home</a>
<a class="hideOutsideFS" href="#">Link to this page</a>
<a class="hideInsideFS" href="samples.html">Example Browser</a>
<a href="#" id="codeExample">View source code</a>
</p>
<pre id="sourceCode" class="prettyprint" style="display:none"></pre>
<!-- End_Exclude -->
</body>
</html>

View File

@@ -0,0 +1,82 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title>dynatree - Q'n'd test for release</title>
<!--
OLD jQuery 1.3 UI 1.7
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7/jquery-ui.js" type="text/javascript"></script>
<script src="../jquery/jquery.cookie.js" type="text/javascript"></script>
<link href="../src/skin/ui.dynatree.css" rel="stylesheet" type="text/css">
<script src="../src/jquery.dynatree.js" type="text/javascript"></script>
LATEST CDN
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.js" type="text/javascript"></script>
<script src="../jquery/jquery.cookie.js" type="text/javascript"></script>
<link href="../src/skin/ui.dynatree.css" rel="stylesheet" type="text/css">
<script src="../src/jquery.dynatree.js" type="text/javascript"></script>
DIST
<script src="../jquery/jquery.js" type="text/javascript"></script>
<script src="../jquery/jquery-ui.custom.js" type="text/javascript"></script>
<script src="../jquery/jquery.cookie.js" type="text/javascript"></script>
<link href="../src/skin/ui.dynatree.css" rel="stylesheet" type="text/css">
<script src="../src/jquery.dynatree.js" type="text/javascript"></script>
MINIFIED DIST
<script src="../jquery/jquery.min.js" type="text/javascript"></script>
<script src="../jquery/jquery-ui.custom.min.js" type="text/javascript"></script>
<script src="../jquery/jquery.cookie.js" type="text/javascript"></script>
<link href="../src/skin/ui.dynatree.css" rel="stylesheet" type="text/css">
<script src="../src/jquery.dynatree.min.js" type="text/javascript"></script>
-->
<!-- Include the required JavaScript libraries: -->
<script src="../jquery/jquery.min.js" type="text/javascript"></script>
<script src="../jquery/jquery-ui.custom.min.js" type="text/javascript"></script>
<script src="../jquery/jquery.cookie.js" type="text/javascript"></script>
<link href="../src/skin/ui.dynatree.css" rel="stylesheet" type="text/css">
<script src="../src/jquery.dynatree.min.js" type="text/javascript"></script>
<!-- Add code to initialize the tree when the document is loaded: -->
<script type="text/javascript">
alert("$.ui.version: " + $.ui.version + "\n"
+ "$.jquery.version: " + jQuery.fn.jquery);
$(function(){
// Attach the dynatree widget to an existing <div id="tree"> element
// and pass the tree options as an argument to the dynatree() function:
$("#tree").dynatree({
onActivate: function(node) {
// A DynaTreeNode object is passed to the activation handler
// Note: we also get this event, if persistence is on, and the page is reloaded.
alert("You activated " + node.data.title);
},
onSelect: function(select, node) {
logMsg("onSelect(%o, %o)", node);
var s = node.tree.getSelectedNodes().join(", ");
$("#echoSelected").text(s);
},
// persist: true,
children: [
{title: "Item 1"},
{title: "Folder 2", isFolder: true, key: "folder2",
children: [
{title: "Sub-item 2.1"},
{title: "Sub-item 2.2"}
]
},
{title: "Item 3"}
]
});
});
</script>
</head>
<body>
<!-- Add a <div> element where the tree should appear: -->
<p>This tree uses the minified JS library. (Check this with IE!)</p>
<div id="tree"> ERROR: Tree could not be loaded!</div>
</body>
</html>

View File

@@ -0,0 +1,104 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title>Dynatree - Example</title>
<script src="../jquery/jquery.js" type="text/javascript"></script>
<script src="../jquery/jquery-ui.custom.js" type="text/javascript"></script>
<script src="../jquery/jquery.cookie.js" type="text/javascript"></script>
<link href="../src/skin/ui.dynatree.css" rel="stylesheet" type="text/css">
<script src="../src/jquery.dynatree.js" type="text/javascript"></script>
<!-- Start_Exclude: This block is not part of the sample code -->
<link href="prettify.css" rel="stylesheet">
<script src="prettify.js" type="text/javascript"></script>
<link href="sample.css" rel="stylesheet" type="text/css">
<script src="sample.js" type="text/javascript"></script>
<!-- End_Exclude -->
<style type="text/css">
ul.dynatree-container span.td {
position: absolute;
display: inline;
border-size: 1px;
overflow: hidden;
background-color: white;
}
ul.dynatree-container span.td:nth-child(1) {
position: static;
}
ul.dynatree-container span.td:nth-child(2) {
color: red;
left: 150px;
width: 50px;
}
ul.dynatree-container span.td:nth-child(3) {
color: green;
left: 200px;
width: 150px;
}
</style>
<!-- Add code to initialize the tree when the document is loaded: -->
<script type="text/javascript">
$(function(){
// Attach the dynatree widget to an existing <div id="tree"> element
// and pass the tree options as an argument to the dynatree() function:
$("#tree").dynatree({
onActivate: function(node) {
},
onCustomRender: function(node) {
// Render title as columns
if(node.data.title.indexOf("~") === -1){
// Default rendering
return false;
}
var cols = node.data.title.split("~"),
html = "<a class='dynatree-title' href='#'>";
for(var i=0; i<cols.length; i++){
html += "<span class='td'>" + cols[i] + "</span>";
}
return html + "</a>";
},
children: [
{title: "Item 1~ico1~sdflkh sdfkjuhds fkjd kjhdf"},
{title: "Item 2~ico1~fkjd kjhdf"},
{title: "Folder 2", isFolder: true, key: "folder2",
children: [
{title: "Sub Item 1~ico1~sdflkh sdfkjuhds fkjd kjhdf"},
{title: "Sub Item 2 xxx~ico1~fkjd kjhdf"}
]
},
{title: "Folder 3", isFolder: true, key: "folder3",
children: [
{title: "Sub Item 1~ico1~sdflkh sdfkjuhds fkjd kjhdf"},
{title: "Sub Item 2 xxx~ico1~fkjd kjhdf"}
]
},
{title: "Item 3"}
]
});
});
</script>
</head>
<body class="example">
<h1>Example: column simulation</h1>
<p class="description">
This sample shows, how titles could displayed as aligned columns.
</p>
<!-- Add a <div> element where the tree should appear: -->
<div id="tree"> </div>
<!-- Start_Exclude: This block is not part of the sample code -->
<hr>
<p class="sample-links no_code">
<a class="hideInsideFS" href="http://dynatree.googlecode.com">jquery.dynatree.js project home</a>
<a class="hideOutsideFS" href="#">Link to this page</a>
<a class="hideInsideFS" href="samples.html">Example Browser</a>
<a href="#" id="codeExample">View source code</a>
</p>
<pre id="sourceCode" class="prettyprint" style="display:none"></pre>
<!-- End_Exclude -->
</body>
</html>

View File

@@ -0,0 +1,98 @@
<?xml version="1.0" encoding="ISO-8859-1" ?>
<!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" xml:lang="en" lang="en">
<head>
<title>dynatree - temporary tests</title>
<script src="../jquery/jquery.js" type="text/javascript"></script>
<script src="../jquery/jquery-ui.custom.js" type="text/javascript"></script>
<script src="../jquery/jquery.cookie.js" type="text/javascript"></script>
<link href="../src/skin/ui.dynatree.css" rel="stylesheet" type="text/css">
<script src="../src/jquery.dynatree.js" type="text/javascript"></script>
<!-- Add code to initialize the tree when the document is loaded: -->
<script type='text/javascript'>
/* <![CDATA[ */
$(function(){
$("#tree").dynatree({
rootVisible: true,
rootCollapsible: false,
keyboard: true,
persist: true,
children: [
{title: "Node 1", expand: true, key: "_1",
children: [
{title: "Node 1.1" },
{title: "Node 1.2", isFolder: true, expand: true, key: "_12",
children: [
{title: "Node 1.2.1" },
{title: "Node 1.2.2", key: "_122",
children: [
{title: "Node 1.2.2.1" },
{title: "Node 1.2.2.2" },
{title: "Node 1.2.2.3" }
]
},
{title: "Node 1.2.3",
children: []
}
]
},
{title: "Node 1.3" }
]
},
{title: "Node 2" }
],
onSelect: function(dtnode) {
$("#echoSelected").text(dtnode.data.title);
//alert("You selected " + dtnode.data.title);
},
onLazyRead: function(dtnode) {
logMsg("Benchmarking mode='" + dtnode.data.mode + "' done.");
}
});
$("#tree2").dynatree({
onSelect: function(dtnode) {
$("#echoSelected").text(dtnode.data.title);
//alert("You selected " + dtnode.data.title);
}
});
$("#btnRemoveDiv").click(function(){
logMsg("removing %o", $("#tree"));
$("#tree").remove();
});
$("#btn50").click(function(){
$("#tree").dynatree("getRoot").append({title: 'i50', expand: true});
});
});
/* ]]> */
</script>
</head>
<body>
<p>This file is only temporarily used to reproduce issues.</p>
<p style="color: red;">Using doctype XHTML 1.0 Strict.</p>
<div id='tree'> </div>
<div>Selected node: <span id="echoSelected">-</span></div>
<div>Focused node: <span id="echoFocused">-</span></div>
<p>
<button id="btnRemoveDiv">Remove main div</button>
<button id="btn50">issue #50</button>
<button id="btnDiv">dynamic div issue</button>
</p>
<div id='tree2'>
<ul>
<li data="{title: 'node1'}">node1</li>
<li data="{title: 'node2'}">node2</li>
</ul>
</div>
<p><a href="http://dynatree.googlecode.com">jquery.dynatree.js</a></p>
</body>
</html>

View File

@@ -0,0 +1,80 @@
/*jslint node:true */
module.exports = function(grunt) {
// Project configuration.
grunt.initConfig({
pkg: "<json:package.json>",
// Project metadata, used by the <banner> directive.
meta: {
banner: "/*! <%= pkg.title || pkg.name %> - v<%= pkg.version %> - " +
"<%= grunt.template.today('yyyy-mm-dd') %>\n" +
"<%= pkg.homepage ? '* ' + pkg.homepage + '\n' : '' %>" +
"* Copyright (c) <%= grunt.template.today('yyyy') %> <%= pkg.author.name %>;" +
" Licensed <%= _.pluck(pkg.licenses, 'type').join(', ') %> */"
},
concat: {
dist: {
src: ["<banner:meta.banner>", "<file_strip_banner:src/<%= pkg.name %>.js>"],
// src: ["src/jquery.dynatree.js"],
dest: "dist/<%= pkg.name %>-<%= pkg.version %>.js"
}
},
min: {
dist: {
src: ["<banner:meta.banner>", "<config:concat.dist.dest>"],
dest: "dist/<%= pkg.name %>.min.js"
}
},
// qunit: {
// files: ["tests/unit/**/*.html"]
// },
lint: {
// beforeconcat: ["grunt.js", "src/**/*.js", "tests/**/*.js"],
beforeconcat: ["src/jquery.dynatree.js"],
// beforeconcat: ["grunt.js"],
// beforeconcat: ["grunt.js", "src/jquery.dynatree.js", "tests/**/*.js"],
afterconcat: ["<config:concat.dist.dest>"]
},
// watch: {
// files: "<config:lint.files>",
// tasks: "lint qunit"
// },
jshint: {
options: {
// Enforcing Options:
bitwise: true,
curly: true,
// forin: true,
eqeqeq: true,
immed: true,
latedef: true,
newcap: true,
noarg: true,
// noempty: true,
nonew: true,
// plusplus: true,
regexp: true,
// strict: true,
sub: true,
undef: true,
// Relaxing Options:
eqnull: false,
laxbreak: true,
// laxcomma: true,
smarttabs: false,
// globalstrict: true,
// Environments:
// node: true, // TODO: only for grunt.js and dynatree-server.json
browser: true
},
globals: {
jQuery: true
}
},
uglify: {
}
});
// Default task.
grunt.registerTask("default", "lint:beforeconcat concat lint:afterconcat min");
};

View File

@@ -0,0 +1,16 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title>Dynatree</title>
</head>
<body class="example">
<h1>dynatree.js</h1>
<ul>
<li><a href="doc/samples.html">Example Browser</a>
<li><a href="doc/dynatree-doc.html">Documentation</a>
<li><a href="http://dynatree.googlecode.com">Project home</a>
</ul>
</body>
</html>

View File

@@ -0,0 +1,27 @@
This folder contains copies of the required jQuery libraries for use with
Dynatree 1.0
Currently using
- jquery.js:
jQuery 1.7.1
- jquery-ui.custom.js:
jQuery UI 1.8.17 with all modules selected.
- jquery.min.js and jquery-ui.custom.min.js:
Minified versions of the above
Current versions are always available at
http://jqueryui.com/download
Include the required libs like this:
<script src='../jquery/jquery.js' type='text/javascript'></script>
<script src='../jquery/jquery-ui.custom.js' type='text/javascript'></script>
<script src='../jquery/jquery.cookie.js' type='text/javascript'></script>
Alternatively the current libs may be we included from CDNs, for example
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.js" type="text/javascript"></script>
<script src='../jquery/jquery.cookie.js' type='text/javascript'></script>

File diff suppressed because it is too large Load Diff

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,97 @@
/**
* Cookie plugin
*
* Copyright (c) 2006 Klaus Hartl (stilbuero.de)
* Dual licensed under the MIT and GPL licenses:
* http://www.opensource.org/licenses/mit-license.php
* http://www.gnu.org/licenses/gpl.html
*
*/
/**
* Create a cookie with the given name and value and other optional parameters.
*
* @example $.cookie('the_cookie', 'the_value');
* @desc Set the value of a cookie.
* @example $.cookie('the_cookie', 'the_value', { expires: 7, path: '/', domain: 'jquery.com', secure: true });
* @desc Create a cookie with all available options.
* @example $.cookie('the_cookie', 'the_value');
* @desc Create a session cookie.
* @example $.cookie('the_cookie', null);
* @desc Delete a cookie by passing null as value. Keep in mind that you have to use the same path and domain
* used when the cookie was set.
*
* @param String name The name of the cookie.
* @param String value The value of the cookie.
* @param Object options An object literal containing key/value pairs to provide optional cookie attributes.
* @option Number|Date expires Either an integer specifying the expiration date from now on in days or a Date object.
* If a negative value is specified (e.g. a date in the past), the cookie will be deleted.
* If set to null or omitted, the cookie will be a session cookie and will not be retained
* when the the browser exits.
* @option String path The value of the path atribute of the cookie (default: path of page that created the cookie).
* @option String domain The value of the domain attribute of the cookie (default: domain of page that created the cookie).
* @option Boolean secure If true, the secure attribute of the cookie will be set and the cookie transmission will
* require a secure protocol (like HTTPS).
* @type undefined
*
* @name $.cookie
* @cat Plugins/Cookie
* @author Klaus Hartl/klaus.hartl@stilbuero.de
*/
/**
* Get the value of a cookie with the given name.
*
* @example $.cookie('the_cookie');
* @desc Get the value of a cookie.
*
* @param String name The name of the cookie.
* @return The value of the cookie.
* @type String
*
* @name $.cookie
* @cat Plugins/Cookie
* @author Klaus Hartl/klaus.hartl@stilbuero.de
*/
jQuery.cookie = function(name, value, options) {
if (typeof value != 'undefined') { // name and value given, set cookie
options = options || {};
if (value === null) {
value = '';
options = $.extend({}, options); // clone object since it's unexpected behavior if the expired property were changed
options.expires = -1;
}
var expires = '';
if (options.expires && (typeof options.expires == 'number' || options.expires.toUTCString)) {
var date;
if (typeof options.expires == 'number') {
date = new Date();
date.setTime(date.getTime() + (options.expires * 24 * 60 * 60 * 1000));
} else {
date = options.expires;
}
expires = '; expires=' + date.toUTCString(); // use expires attribute, max-age is not supported by IE
}
// NOTE Needed to parenthesize options.path and options.domain
// in the following expressions, otherwise they evaluate to undefined
// in the packed version for some reason...
var path = options.path ? '; path=' + (options.path) : '';
var domain = options.domain ? '; domain=' + (options.domain) : '';
var secure = options.secure ? '; secure' : '';
document.cookie = [name, '=', encodeURIComponent(value), expires, path, domain, secure].join('');
} else { // only name given, get cookie
var cookieValue = null;
if (document.cookie && document.cookie != '') {
var cookies = document.cookie.split(';');
for (var i = 0; i < cookies.length; i++) {
var cookie = jQuery.trim(cookies[i]);
// Does this cookie string begin with the name we want?
if (cookie.substring(0, name.length + 1) == (name + '=')) {
cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
break;
}
}
}
return cookieValue;
}
};

9440
assets/plugins/dynatree/jquery/jquery.js vendored Normal file

File diff suppressed because it is too large Load Diff

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,32 @@
{
"name": "jquery.dynatree",
"title": "jQuery Dynatree Plugin",
"description": "Dynatree is a JavaScript dynamic tree view plugin for jQuery with support for persistence, keyboard, checkboxes, drag'n'drop, and lazy loading.",
"version": "1.2.4",
"homepage": "http://dynatree.googlecode.com/",
"author": {
"name": "Martin Wendt",
"url": "http://wwwendt.de/"
},
"repository": {
"type": "svn",
"url": "http://dynatree.googlecode.com/svn/trunk/"
},
"bugs": {
"url": "https://code.google.com/p/dynatree/issues/list"
},
"licenses": [
{
"type": "MIT",
"url": "https://code.google.com/p/dynatree/wiki/LicenseInfo"
},
{
"type": "GPL",
"url": "https://code.google.com/p/dynatree/wiki/LicenseInfo"
}
],
"dependencies": {
"jquery": "~1.4.2"
},
"keywords": []
}

View File

@@ -0,0 +1,278 @@
GNU GENERAL PUBLIC LICENSE
Version 2, June 1991
Copyright (C) 1989, 1991 Free Software Foundation, Inc.
51 Franklin Street, Fifth Floor, Boston, MA 02110-1301 USA
Everyone is permitted to copy and distribute verbatim copies
of this license document, but changing it is not allowed.
Preamble
The licenses for most software are designed to take away your
freedom to share and change it. By contrast, the GNU General Public
License is intended to guarantee your freedom to share and change free
software--to make sure the software is free for all its users. This
General Public License applies to most of the Free Software
Foundation's software and to any other program whose authors commit to
using it. (Some other Free Software Foundation software is covered by
the GNU Lesser General Public License instead.) You can apply it to
your programs, too.
When we speak of free software, we are referring to freedom, not
price. Our General Public Licenses are designed to make sure that you
have the freedom to distribute copies of free software (and charge for
this service if you wish), that you receive source code or can get it
if you want it, that you can change the software or use pieces of it
in new free programs; and that you know you can do these things.
To protect your rights, we need to make restrictions that forbid
anyone to deny you these rights or to ask you to surrender the rights.
These restrictions translate to certain responsibilities for you if you
distribute copies of the software, or if you modify it.
For example, if you distribute copies of such a program, whether
gratis or for a fee, you must give the recipients all the rights that
you have. You must make sure that they, too, receive or can get the
source code. And you must show them these terms so they know their
rights.
We protect your rights with two steps: (1) copyright the software, and
(2) offer you this license which gives you legal permission to copy,
distribute and/or modify the software.
Also, for each author's protection and ours, we want to make certain
that everyone understands that there is no warranty for this free
software. If the software is modified by someone else and passed on, we
want its recipients to know that what they have is not the original, so
that any problems introduced by others will not reflect on the original
authors' reputations.
Finally, any free program is threatened constantly by software
patents. We wish to avoid the danger that redistributors of a free
program will individually obtain patent licenses, in effect making the
program proprietary. To prevent this, we have made it clear that any
patent must be licensed for everyone's free use or not licensed at all.
The precise terms and conditions for copying, distribution and
modification follow.
GNU GENERAL PUBLIC LICENSE
TERMS AND CONDITIONS FOR COPYING, DISTRIBUTION AND MODIFICATION
0. This License applies to any program or other work which contains
a notice placed by the copyright holder saying it may be distributed
under the terms of this General Public License. The "Program", below,
refers to any such program or work, and a "work based on the Program"
means either the Program or any derivative work under copyright law:
that is to say, a work containing the Program or a portion of it,
either verbatim or with modifications and/or translated into another
language. (Hereinafter, translation is included without limitation in
the term "modification".) Each licensee is addressed as "you".
Activities other than copying, distribution and modification are not
covered by this License; they are outside its scope. The act of
running the Program is not restricted, and the output from the Program
is covered only if its contents constitute a work based on the
Program (independent of having been made by running the Program).
Whether that is true depends on what the Program does.
1. You may copy and distribute verbatim copies of the Program's
source code as you receive it, in any medium, provided that you
conspicuously and appropriately publish on each copy an appropriate
copyright notice and disclaimer of warranty; keep intact all the
notices that refer to this License and to the absence of any warranty;
and give any other recipients of the Program a copy of this License
along with the Program.
You may charge a fee for the physical act of transferring a copy, and
you may at your option offer warranty protection in exchange for a fee.
2. You may modify your copy or copies of the Program or any portion
of it, thus forming a work based on the Program, and copy and
distribute such modifications or work under the terms of Section 1
above, provided that you also meet all of these conditions:
a) You must cause the modified files to carry prominent notices
stating that you changed the files and the date of any change.
b) You must cause any work that you distribute or publish, that in
whole or in part contains or is derived from the Program or any
part thereof, to be licensed as a whole at no charge to all third
parties under the terms of this License.
c) If the modified program normally reads commands interactively
when run, you must cause it, when started running for such
interactive use in the most ordinary way, to print or display an
announcement including an appropriate copyright notice and a
notice that there is no warranty (or else, saying that you provide
a warranty) and that users may redistribute the program under
these conditions, and telling the user how to view a copy of this
License. (Exception: if the Program itself is interactive but
does not normally print such an announcement, your work based on
the Program is not required to print an announcement.)
These requirements apply to the modified work as a whole. If
identifiable sections of that work are not derived from the Program,
and can be reasonably considered independent and separate works in
themselves, then this License, and its terms, do not apply to those
sections when you distribute them as separate works. But when you
distribute the same sections as part of a whole which is a work based
on the Program, the distribution of the whole must be on the terms of
this License, whose permissions for other licensees extend to the
entire whole, and thus to each and every part regardless of who wrote it.
Thus, it is not the intent of this section to claim rights or contest
your rights to work written entirely by you; rather, the intent is to
exercise the right to control the distribution of derivative or
collective works based on the Program.
In addition, mere aggregation of another work not based on the Program
with the Program (or with a work based on the Program) on a volume of
a storage or distribution medium does not bring the other work under
the scope of this License.
3. You may copy and distribute the Program (or a work based on it,
under Section 2) in object code or executable form under the terms of
Sections 1 and 2 above provided that you also do one of the following:
a) Accompany it with the complete corresponding machine-readable
source code, which must be distributed under the terms of Sections
1 and 2 above on a medium customarily used for software interchange; or,
b) Accompany it with a written offer, valid for at least three
years, to give any third party, for a charge no more than your
cost of physically performing source distribution, a complete
machine-readable copy of the corresponding source code, to be
distributed under the terms of Sections 1 and 2 above on a medium
customarily used for software interchange; or,
c) Accompany it with the information you received as to the offer
to distribute corresponding source code. (This alternative is
allowed only for noncommercial distribution and only if you
received the program in object code or executable form with such
an offer, in accord with Subsection b above.)
The source code for a work means the preferred form of the work for
making modifications to it. For an executable work, complete source
code means all the source code for all modules it contains, plus any
associated interface definition files, plus the scripts used to
control compilation and installation of the executable. However, as a
special exception, the source code distributed need not include
anything that is normally distributed (in either source or binary
form) with the major components (compiler, kernel, and so on) of the
operating system on which the executable runs, unless that component
itself accompanies the executable.
If distribution of executable or object code is made by offering
access to copy from a designated place, then offering equivalent
access to copy the source code from the same place counts as
distribution of the source code, even though third parties are not
compelled to copy the source along with the object code.
4. You may not copy, modify, sublicense, or distribute the Program
except as expressly provided under this License. Any attempt
otherwise to copy, modify, sublicense or distribute the Program is
void, and will automatically terminate your rights under this License.
However, parties who have received copies, or rights, from you under
this License will not have their licenses terminated so long as such
parties remain in full compliance.
5. You are not required to accept this License, since you have not
signed it. However, nothing else grants you permission to modify or
distribute the Program or its derivative works. These actions are
prohibited by law if you do not accept this License. Therefore, by
modifying or distributing the Program (or any work based on the
Program), you indicate your acceptance of this License to do so, and
all its terms and conditions for copying, distributing or modifying
the Program or works based on it.
6. Each time you redistribute the Program (or any work based on the
Program), the recipient automatically receives a license from the
original licensor to copy, distribute or modify the Program subject to
these terms and conditions. You may not impose any further
restrictions on the recipients' exercise of the rights granted herein.
You are not responsible for enforcing compliance by third parties to
this License.
7. If, as a consequence of a court judgment or allegation of patent
infringement or for any other reason (not limited to patent issues),
conditions are imposed on you (whether by court order, agreement or
otherwise) that contradict the conditions of this License, they do not
excuse you from the conditions of this License. If you cannot
distribute so as to satisfy simultaneously your obligations under this
License and any other pertinent obligations, then as a consequence you
may not distribute the Program at all. For example, if a patent
license would not permit royalty-free redistribution of the Program by
all those who receive copies directly or indirectly through you, then
the only way you could satisfy both it and this License would be to
refrain entirely from distribution of the Program.
If any portion of this section is held invalid or unenforceable under
any particular circumstance, the balance of the section is intended to
apply and the section as a whole is intended to apply in other
circumstances.
It is not the purpose of this section to induce you to infringe any
patents or other property right claims or to contest validity of any
such claims; this section has the sole purpose of protecting the
integrity of the free software distribution system, which is
implemented by public license practices. Many people have made
generous contributions to the wide range of software distributed
through that system in reliance on consistent application of that
system; it is up to the author/donor to decide if he or she is willing
to distribute software through any other system and a licensee cannot
impose that choice.
This section is intended to make thoroughly clear what is believed to
be a consequence of the rest of this License.
8. If the distribution and/or use of the Program is restricted in
certain countries either by patents or by copyrighted interfaces, the
original copyright holder who places the Program under this License
may add an explicit geographical distribution limitation excluding
those countries, so that distribution is permitted only in or among
countries not thus excluded. In such case, this License incorporates
the limitation as if written in the body of this License.
9. The Free Software Foundation may publish revised and/or new versions
of the General Public License from time to time. Such new versions will
be similar in spirit to the present version, but may differ in detail to
address new problems or concerns.
Each version is given a distinguishing version number. If the Program
specifies a version number of this License which applies to it and "any
later version", you have the option of following the terms and conditions
either of that version or of any later version published by the Free
Software Foundation. If the Program does not specify a version number of
this License, you may choose any version ever published by the Free Software
Foundation.
10. If you wish to incorporate parts of the Program into other free
programs whose distribution conditions are different, write to the author
to ask for permission. For software which is copyrighted by the Free
Software Foundation, write to the Free Software Foundation; we sometimes
make exceptions for this. Our decision will be guided by the two goals
of preserving the free status of all derivatives of our free software and
of promoting the sharing and reuse of software generally.
NO WARRANTY
11. BECAUSE THE PROGRAM IS LICENSED FREE OF CHARGE, THERE IS NO WARRANTY
FOR THE PROGRAM, TO THE EXTENT PERMITTED BY APPLICABLE LAW. EXCEPT WHEN
OTHERWISE STATED IN WRITING THE COPYRIGHT HOLDERS AND/OR OTHER PARTIES
PROVIDE THE PROGRAM "AS IS" WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESSED
OR IMPLIED, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF
MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE. THE ENTIRE RISK AS
TO THE QUALITY AND PERFORMANCE OF THE PROGRAM IS WITH YOU. SHOULD THE
PROGRAM PROVE DEFECTIVE, YOU ASSUME THE COST OF ALL NECESSARY SERVICING,
REPAIR OR CORRECTION.
12. IN NO EVENT UNLESS REQUIRED BY APPLICABLE LAW OR AGREED TO IN WRITING
WILL ANY COPYRIGHT HOLDER, OR ANY OTHER PARTY WHO MAY MODIFY AND/OR
REDISTRIBUTE THE PROGRAM AS PERMITTED ABOVE, BE LIABLE TO YOU FOR DAMAGES,
INCLUDING ANY GENERAL, SPECIAL, INCIDENTAL OR CONSEQUENTIAL DAMAGES ARISING
OUT OF THE USE OR INABILITY TO USE THE PROGRAM (INCLUDING BUT NOT LIMITED
TO LOSS OF DATA OR DATA BEING RENDERED INACCURATE OR LOSSES SUSTAINED BY
YOU OR THIRD PARTIES OR A FAILURE OF THE PROGRAM TO OPERATE WITH ANY OTHER
PROGRAMS), EVEN IF SUCH HOLDER OR OTHER PARTY HAS BEEN ADVISED OF THE
POSSIBILITY OF SUCH DAMAGES.

Some files were not shown because too many files have changed in this diff Show More