| Server IP : 74.208.127.88 / Your IP : 3.149.239.180 Web Server : Apache/2.4.41 (Ubuntu) System : Linux ubuntu 5.4.0-163-generic #180-Ubuntu SMP Tue Sep 5 13:21:23 UTC 2023 x86_64 User : www-data ( 33) PHP Version : 7.4.3-4ubuntu2.29 Disable Function : pcntl_alarm,pcntl_fork,pcntl_waitpid,pcntl_wait,pcntl_wifexited,pcntl_wifstopped,pcntl_wifsignaled,pcntl_wifcontinued,pcntl_wexitstatus,pcntl_wtermsig,pcntl_wstopsig,pcntl_signal,pcntl_signal_get_handler,pcntl_signal_dispatch,pcntl_get_last_error,pcntl_strerror,pcntl_sigprocmask,pcntl_sigwaitinfo,pcntl_sigtimedwait,pcntl_exec,pcntl_getpriority,pcntl_setpriority,pcntl_async_signals,pcntl_unshare, MySQL : OFF | cURL : ON | WGET : ON | Perl : ON | Python : OFF | Sudo : ON | Pkexec : ON Directory : /var/www/html/admin/assets/plugins/dynatree/doc/ |
Upload File : |
<!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 (<li> tag only).
<li><span>Using some <b>bold</b> markup in the text (<li><span> 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>