Skip to content
Snippets Groups Projects
Normal view Permalink
sample-configurator.html 6.11 KiB
Newer Older
  • Learn to ignore specific revisions
    • Laura Cappelli's avatar
    Insert file
    Laura Cappelli committed
    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 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 
    <!DOCTYPE html>
<html>
<head>
	<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
	<title>Fancytree - Configurator</title>

	<script src="//code.jquery.com/jquery-3.2.1.min.js"></script>
	<script src="//code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>

	<link href="../src/skin-win8/ui.fancytree.css" rel="stylesheet"">
	<script src="../src/jquery.fancytree.js"></script>
	<script src="../lib/jquery.configurator.js"></script>

	<!-- Start_Exclude: This block is not part of the sample code -->
	<script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js?autoload=true&amp;skin=sunburst"></script>
<!--
	<script src="https://google-code-prettify.googlecode.com/svn/loader/run_prettify.js?autoload=true&amp;skin=sons-of-obsidian"></script>
 -->
	<link href="sample.css" rel="stylesheet">
	<script src="sample.js"></script>
	<!-- End_Exclude -->

<style type="text/css">
	fieldset {
		border: 1px solid;
		padding: 2px;
		margin-left: 8px;
	}
	fieldset.tree {
		float: left;
	}
	div#tree{
		width: 400px;
	}
	ul.fancytree-container {
		border: none;
		max-height: 400px;
		overflow: auto;
	}
	fieldset.options {
	}
	div#options {
		padding: 2px;
		margin: 2px;
	}
	div#options ul {
		padding: 4px;
		margin: 0px;
		font-size: 90%;
	}
	div#options ul li {
		list-style-type: none;
	}
</style>

<!-- Add code to initialize the tree when the document is loaded: -->
<script type="text/javascript">

var OPT_LIST = [
	{name: "activeVisible", value: true,
	 hint: "Make sure, active nodes are visible (expanded)"},
	{name: "aria", value: true,
	 hint: "Enable WAI-ARIA support"},
	{name: "autoActivate", value: true,
	 hint: "Automatically activate a node when it is focused using keyboard"},
	{name: "autoCollapse", value: false,
	 hint: "Automatically collapse all siblings, when a node is expanded"},
	{name: "autoScroll", value: false,
	 hint: "Automatically scroll nodes into visible area"},
	{name: "clickFolderMode", value: [{name: "activate", value: 1},
									  {name: "expand", value: 2},
									  {name: "activate and expand", value: 3},
									  {name: "activate (dblclick expands)", value: 4, selected: true}],
	 hint: "1:activate, 2:expand, 3:activate and expand, 4:activate (dblclick expands)"},
	{name: "checkbox", value: false,
	 hint: "Show checkboxes"},
	{name: "debugLevel", value: [{name: "quiet", value: 0},
								 {name: "normal", value: 1},
								 {name: "debug", value: 2}],
	 hint: "0:quiet, 1:normal, 2:debug"},
	{name: "disabled", value: false,
	 hint: "Disable control"},
	{name: "focusOnSelect", value: false,
	 hint: "Set focus when node is checked by a mouse click"},
	{name: "escapeTitles", value: false,
	 hint: "Escape `node.title` content for display"},
	{name: "generateIds", value: false,
	 hint: "Generate id attributes like <span id='fancytree-id-KEY'>"},
	{name: "idPrefix", value: "ft_",
	 hint: "Used to generate node id´s like <span id='fancytree-id-<key>'>"},
	{name: "icon", value: true,
	 hint: "Display node icons"},
	{name: "keyboard", value: true,
	 hint: "Support keyboard navigation"},
	{name: "keyPathSeparator", value: "/",
	 hint: "Used by node.getKeyPath() and tree.loadKeyPath()"},
	{name: "minExpandLevel", value: 1,
	 hint: "1: root node is not collapsible"},
	{name: "quicksearch", value: false,
	 hint: "Navigate to next node by typing the first letters"},
	{name: "rtl", value: false,
	 hint: "Enable RTL (right-to-left) mode"},
	{name: "selectMode", value: [{name: "single", value: 1},
								 {name: "multi", value: 2, selected: true},
								 {name: "multi-hier", value: 3}],
	 hint: "1:single, 2:multi, 3:multi-hier"},
	{name: "tabindex", value: [{name: "tabbable", value: "0"},
							   {name: "focusable", value: "-1"},
							   {name: "off", value: ""}],
	 hint: "Whole tree behaves as one single control"},
	{name: "titlesTabbable", value: false,
	 hint: "Node titles can receive keyboard focus"},
	{name: "tooltip", value: false,
	 hint: "Use title as tooltip (also a callback could be specified)"}
	];


$(function(){

	// Attach the fancytree widget to an existing <div id="tree"> element
	// and pass the tree options as an argument to the fancytree() function:
	$("#tree").fancytree({
		source: {
			url: "ajax-tree-plain.json"
		},
		lazyLoad: function(event, data) {
			data.result = {url: "ajax-sub2.json"}
		}
	});
	// Attach configurator plugin
	$("#tree").configurator({
		pluginName: "fancytree",
		optionTarget: "div#options",
		sourceTarget: "pre#sourceCode",
		optionList: OPT_LIST,
		render: function(event, name, value){
//            var w = window.code_google_com_googleprettify;
			$("#sourceCode").removeClass("prettyprinted");
//            alert("change: " + name + "=" + value + "; " + PR.prettyPrint);
			PR.prettyPrint();
		}
	});
	$("input[name=showComments]").change(function(event){
		$("#tree").configurator("option", "showComments", $(this).is(":checked"));
	});
	$("input[name=hideDefaults]").change(function(event){
		$("#tree").configurator("option", "hideDefaults", $(this).is(":checked"));
	});

});
</script>
</head>

<body class="example">
	<h1>Fancytree Option Configurator</h1>
	<div class="description">
		Live preview of some Fancytree options.
	</div>
	<div>
		<label for="skinswitcher">Skin:</label> <select id="skinswitcher"></select>
	</div>
	<p>
		<fieldset class="tree">
			<legend>Sample Fancytree</legend>
			<div id="tree"> </div>
		</fieldset>
		<fieldset class="options">
			<legend>Widget Options</legend>
			<div id="options">OPTIONS</div>
		</fieldset>
	</p>

	<label><input name="showComments" type="checkbox" checked="checked"> Render hint comments</label>
	<label><input name="hideDefaults" type="checkbox"> Hide default settings</label>

	<!--?prettify linenums=false?-->
	<pre id="sourceCode" class="prettyprint">
	</pre>

	<!-- 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">jquery.fancytree.js 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>
	<!-- End_Exclude -->
</body>
</html>