<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="http://ajax.aspnetcdn.com/ajax/modernizr/modernizr-2.8.3.js"></script>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script>
<!-- Ignite UI for jQuery Loader JavaScript File -->
<script src="http://cdn-na.infragistics.com/igniteui/2024.1/latest/js/infragistics.loader.js" type="text/javascript"></script>
</head>
<body>
<button id="transform">Instantiate Tree</button>
<div id="treeContainer">
<!--igTree target element-->
<div id="tree" class="list">
<ul>
<li>Countries
<ul>
<li>China</li>
<li>India</li>
<li>Japan</li>
<li>United Kingdom</li>
<li>United States</li>
</ul>
</li>
</ul>
</div>
</div>
<script>
$.ig.loader({
scriptPath: "http://cdn-na.infragistics.com/igniteui/2024.1/latest/js/",
cssPath: "http://cdn-na.infragistics.com/igniteui/2024.1/latest/css/",
resources: "igShared",
ready: function () {
//This button click triggers the tree to be created
$('#transform').on("click", function() {
CreateTree();
$(this)[0].disabled = true;
});
}
});
//By targetting the existing UL and LI elements,
//the tree is created using the attributes set on those elements
function CreateTree() {
$.ig.loader("igTree", function () {
$('#tree').igTree();
});
}
</script>
</body>
</html>
