Árvores Interativas jsTree é um plugin jQuery, que fornece árvores interativas . É absolutamente livre, de código aberto e distribuído sob a licença MIT . jsTree é facilmente extensível, themable e configurável, suporta fontes de dados HTML e JSON e AJAX. É suportado por todos os navegadores modernos, bem como IE8.
(O Código abaixo está pronto para uso)
<head>
<title>JQuery Plugins - Navegação em Árvores</title>
<script type= "text/javascript" src= "/js/jquery-1.10.2.js"></script>
<link rel="stylesheet" type="text/css"
href="js/plugins/jquery.treeview/jquery.treeview.css" />
<script type= "text/javascript"
src= "js/plugins/jquery.treeview/jquery.treeview"></script>
<script>
$(function(){
$("#browser").treeview();
});
</script>
</head>
<body>
No Html:
<ul class="filetree treeview" id="browser">
<li class="collapsable"><div class="hitarea collapsable-hitarea"></div>
<span class="folder">Folder 1</span>
<ul>
<li class="last"></span class="file">Item 1.1</span></li>
</ul>
</li>
<li class="collapsable"><lidiv class="hitarea collapsable-hitarea">
</div><span class="folder">Folder 2</span>
<ul>
<li class="collapsable"><div class="hitarea collapsable-hitarea"></div><
<span class="folder">Subfolder 2.1</span>
<ul id="folder21">
<li><span class="file">File 2.1.1</span></li>
<li class="last"><span class="file">File 2.1.2</span></li>
</ul>
</li>
<li class="last"><span class="file">File 2.2</span></li>
</ul>
</li>
<li class="closed expandable"><div class="hitarea closed-hitarea expandable-hitarea">
</div>
<ul style="display: none;">
<li class="last"><span class="file">File 3.1</span></li>
</ul>
</li>
<li class="collapsable"><div class="hitarea collapsable-hitarea"></div>
<span class="folder">Folder 3 (closed at start)</span>
<ul>
<li class="last"><span class="file">File 4</span></li>
</ul>
</li>
</body>
</html>