Newer
Older
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title>Fancytree - Example</title>
<script src="../lib/jquery.js"></script>
<script src="../lib/jquery-ui.custom.js"></script>
<link href="../src/skin-win8/ui.fancytree.css" rel="stylesheet">
<script src="../src/jquery.fancytree.js"></script>
<!-- Start_Exclude: This block is not part of the sample code -->
<link href="../lib/prettify.css" rel="stylesheet">
<script src="../lib/prettify.js"></script>
<link href="sample.css" rel="stylesheet">
<script src="sample.js"></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").fancytree({
// autoCollapse: true,
minExpandLevel: 1,
postinit: function(isReloading, isError) {
this.reactivate();
},
focus: function(event, data) {
// Auto-activate focused node after 2 seconds
data.node.scheduleAction("activate", 2000);
},
activate: function(event, data) {
var node = data.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">
Use Fancytree as a navigation menu.
<br>
The tree initialization uses <code><a href='URL', target='TARGET'>title</a></code>
tags.<br>
The <code>activate</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>
A focused node will automatically be activated after 2 seconds (use the
keyboard to try this out).<br>
<br>
The <kbd>Toggle tree</kbd> button in the embedded welcome page also gives
an example on how to access a tree that exists outside the own frame.
</p>
<div>
<label for="skinswitcher">Skin:</label> <select id="skinswitcher"></select>
</div>
<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://duckduckgo.com" target="contentFrame">DuckDuckGo</a>
<li><a href="http://duckduckgo.com" target="_self">DuckDuckGo (target='_self')</a>
<li><a href="http://duckduckgo.com" target="_top" title="This link replaces the current page">DuckDuckGo (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://wwwendt.de/tech/fancytree/doc/jsdoc/index.html" target="contentFrame">Fancytree</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="https://github.com/mar10/fancytree/">Fancytree project home</a>
<a class="hideOutsideFS" href="#">Link to this page</a>
<a class="hideInsideFS" href="index.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>