PageRenderTime 57ms CodeModel.GetById 22ms RepoModel.GetById 1ms app.codeStats 0ms

/demo/sample-iframe.html

https://github.com/briscoeej/fancytree
HTML | 132 lines | 118 code | 8 blank | 6 comment | 0 complexity | 51baa2f3460bf51385c7917e86bfa1bf MD5 | raw file
    

  1. <!DOCTYPE html>
    2. 

  2. <html>
    3. 

  3. <head>
    4. 

  4. 	<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
    5. 

  5. 	<title>Fancytree - Example</title>
    6. 

  6. 

  7. 	<script src="../lib/jquery.js" type="text/javascript"></script>
    8. 

  8. 	<script src="../lib/jquery-ui.custom.js" type="text/javascript"></script>
    9. 

  9. 

  10. 	<link href="../src/skin-win7/ui.fancytree.css" rel="stylesheet" type="text/css">
    11. 

  11. 	<script src="../src/jquery.fancytree.js" type="text/javascript"></script>
    12. 

  12. 

  13. 	<!-- Start_Exclude: This block is not part of the sample code -->
    14. 

  14. 	<link href="../lib/prettify.css" rel="stylesheet">
    15. 

  15. 	<script src="../lib/prettify.js" type="text/javascript"></script>
    16. 

  16. 	<link href="sample.css" rel="stylesheet" type="text/css">
    17. 

  17. 	<script src="sample.js" type="text/javascript"></script>
    18. 

  18. 	<!-- End_Exclude -->
    19. 

  19. 

  20.    <style type="text/css">
    21. 

  21. 		#tree {
    22. 

  22. 			vertical-align: top;
    23. 

  23. 			width: 250px;
    24. 

  24. 		}
    25. 

  25. 		iframe {
    26. 

  26. 			border: 1px dotted gray;
    27. 

  27. 		}
    28. 

  28. 	</style>
    29. 

  29. 	<!-- Add code to initialize the tree when the document is loaded: -->
    30. 

  30. 	<script type="text/javascript">
    31. 

  31. 	$(function(){
    32. 

  32. 		// Attach the dynatree widget to an existing <div id="tree"> element
    33. 

  33. 		// and pass the tree options as an argument to the dynatree() function:
    34. 

  34. 		$("#tree").fancytree({
    35. 

  35. //          autoCollapse: true,
    36. 

  36. 			minExpandLevel: 1,
    37. 

  37. 			postinit: function(isReloading, isError) {
    38. 

  38. 				this.reactivate();
    39. 

  39. 			},
    40. 

  40. 			focus: function(event, data) {
    41. 

  41. 				// Auto-activate focused node after 2 seconds
    42. 

  42. 				data.node.scheduleAction("activate", 2000);
    43. 

  43. 			},
    44. 

  44. 			activate: function(event, data) {
    45. 

  45. 				var node = data.node;
    46. 

  46. 				// Use <a> href and target attributes to load the content:
    47. 

  47. 				if( node.data.href ){
    48. 

  48. 					// Open target
    49. 

  49. 					window.open(node.data.href, node.data.target);
    50. 

  50. 					// or open target in iframe
    51. 

  51. //                $("[name=contentFrame]").attr("src", node.data.href);
    52. 

  52. 				}
    53. 

  53. 			}
    54. 

  54. 		});
    55. 

  55. 	});
    56. 

  56. 	</script>
    57. 

  57. </head>
    58. 

  58. <body class="example">
    59. 

  59. 	<h1>Example: URL navigation and iframes</h1>
    60. 

  60. 	<p class="description">
    61. 

  61. 		This sample shows, how to use fancytree as a navigation menu.<br>
    62. 

  62. 		The tree initialization uses <code>&lt;a href='URL', target='TARGET'>title&lt;/a></code>
    63. 

  63. 		tags.<br>
    64. 

  64. 		The <code>activate</code> handler then uses <code>node.data.href</code>
    65. 

  65. 		to open the the pages in the embedded iframe.<br>
    66. 

  66. 		Note that the navigation will fallback to standard HTML links,
    67. 

  67. 		when JavaScript is disabled.<br>
    68. 

  68. 		A focused node will automatically be activated after 2 seconds (use the
    69. 

  69. 		keyboard to try this out).<br>
    70. 

  70. 		<br>
    71. 

  71. 		The [Toggle tree] button in the embedded welcome page also gives an example on
    72. 

  72. 		how to access a tree that exists outside the own frame.
    73. 

  73. 	</p>
    74. 

  74. 	<div>
    75. 

  75. 		<label for="skinswitcher">Skin:</label> <select id="skinswitcher"></select>
    76. 

  76. 	</div>
    77. 

  77. 

  78. 	<table>
    79. 

  79. 	<colgroup>
    80. 

  80. 		<col width="300px" valign="top">
    81. 

  81. 		<col width="90%">
    82. 

  82. 	</colgroup>
    83. 

  83. 	<tr>
    84. 

  84. 		<td valign="top">
    85. 

  85. 			<!-- Add a <div> element where the tree should appear: -->
    86. 

  86. 			<div id="tree">
    87. 

  87. 			<ul>
    88. 

  88. 				<li class="expanded folder">Search engines
    89. 

  89. 				<ul>
    90. 

  90. 					<li><a href="http://duckduckgo.com" target="contentFrame">DuckDuckGo</a>
    91. 

  91. 					<li><a href="http://duckduckgo.com" target="_self">DuckDuckGo (target='_self')</a>
    92. 

  92. 					<li><a href="http://duckduckgo.com" target="_top" title="This link replaces the current page">DuckDuckGo (target='_top')</a>
    93. 

  93. 					<li><a href="http://www.bing.com" target="contentFrame">Bing</a>
    94. 

  94. 					<li><a href="http://www.wolframalpha.com/" target="contentFrame">WolframAlpha</a>
    95. 

  95. 				</ul>
    96. 

  96. 				<li class="expanded folder">jQuery
    97. 

  97. 				<ul>
    98. 

  98. 					<li><a href="http://www.jquery.com/" target="contentFrame">jQuery</a>
    99. 

  99. 					<li><a href="http://ui.jquery.com/" target="contentFrame">jQuery UI</a>
    100. 

  100. 					<li><a href="http://api.jquery.com/" target="contentFrame">API browser</a>
    101. 

  101. 					<li><a href="http://wwwendt.de/tech/fancytree/doc/jsdoc/index.html" target="contentFrame">Fancytree</a>
    102. 

  102. 				</ul>
    103. 

  103. 				<li class="expanded folder">Misc
    104. 

  104. 				<ul>
    105. 

  105. 					<li><a href="sample-iframe-1.html" target="contentFrame">Welcome</a>
    106. 

  106. 				</ul>
    107. 

  107. 			</ul>
    108. 

  108. 			</div>
    109. 

  109. 		</td>
    110. 

  110. 

  111. 		<td>
    112. 

  112. 			<iframe src="sample-iframe-1.html" name="contentFrame" width="100%" height="500"
    113. 

  113. 					scrolling="yes" marginheight="0" marginwidth="0" frameborder="0">
    114. 

  114. 			  <p>Your browser does not support iframes</p>
    115. 

  115. 			</iframe>
    116. 

  116. 		</td>
    117. 

  117. 	</tr>
    118. 

  118. 	</table>
    119. 

  119. 

  120. 

  121. 	<!-- Start_Exclude: This block is not part of the sample code -->
    122. 

  122. 	<hr>
    123. 

  123. 	<p class="sample-links  no_code">
    124. 

  124. 		<a class="hideInsideFS" href="https://github.com/mar10/fancytree/">Fancytree project home</a>
    125. 

  125. 		<a class="hideOutsideFS" href="#">Link to this page</a>
    126. 

  126. 		<a class="hideInsideFS" href="index.html">Example Browser</a>
    127. 

  127. 		<a href="#" id="codeExample">View source code</a>
    128. 

  128. 	</p>
    129. 

  129. 	<pre id="sourceCode" class="prettyprint" style="display:none"></pre>
    130. 

  130. 	<!-- End_Exclude -->
    131. 

  131. </body>
    132. 

  132. </html>
    133. 

  133.