<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="htmltree.css">
<script src="htmltree.js"></script>
</head>
<body>
<!--
Esta implementa??o do HtmlTree se baseia na utiliza??o de uma estrutura
de dados, como se fosse um XML que indicar? como o tree view dever? ser
montado.
Esta estrutura ? formada com base em atributos, da seguinte forma:
- Um container (identificado por um atributo id)
- Nodes root identificados pelo atributo data-tree-root
- Nodes simples identificados pelo atributo data-tree-node
Al?m disso, existem outros atributos aplic?veis aos nodes root (data-tree-root)
que modificam a montagem do tree view:
- data-tree-open: determina se o node vai estar inicialmente expandido ou n?o;
- data-tree-group: determina se o node faz parte de um grupo ou n?o.
Grupos de nodes permitem que apenas um node esteja aberto por vez.
-->
<!--este ser? o container que receber? o tree view-->
<div id="tree1">
<!--cada um dos nodes que ser?o abertos/fechados devem conter o atributo data-tree-root, cujo valor ser? usadocomo r?tulo do node-->
<div data-tree-root="Item 1">
<!--os nodes que n?o podem ser aberto/fechados devem possuir o atributo data-tree-node e o conte?do do node ser? utilizado como r?tulo-->
<div data-tree-node>Item 1.1</div>
<div data-tree-node>Item 1.2</div>
<!--o atributo data-tree-open serve para indicar que aquele node e seus nodes superiores s?o abertos por padr?o-->
<div data-tree-root="Item 1.3" data-tree-open>
<div data-tree-node>Item 1.3.1</div>
<div data-tree-node>Item 1.3.2</div>
<div data-tree-node>Item 1.3.3</div>
</div>
</div>
<div data-tree-root="Item 2">
<div data-tree-node>Item 2.1</div>
<div data-tree-node>Item 2.2</div>
</div>
<!--
o atributo data-tree-group inclui o node em um grupo de nodes
na pr?tica, faz com que o node tenha um controle mediante input radio em vez de checkbox e tenha o atributo name definido para o conte?do de data-tree-group
isso far? com que apenas um node do grupo possa ser aberto por vez
-->
<div data-tree-root="Item 3" data-tree-group="grupo">
<div data-tree-node>Item 3.1</div>
<div data-tree-node>Item 3.2</div>
</div>
<div data-tree-root="Item 4" data-tree-group="grupo">
<div data-tree-node>Item 4.1</div>
<div data-tree-node>Item 4.2</div>
</div>
<div data-tree-root="Favoritos">
<!--dentro de um node simples (que n?o abre/fecha) voc? pode colocar o que quiser-->
<div data-tree-node>
<a href="http://helloworld.orgfree.com">Blog Hello World</a>
</div>
<div data-tree-node>
<a href="http://everton3x.orgfree.com">Everton da Rosa</a>
</div>
</div>
</div>
<script>
// aqui inicializamos o tree view. o resto ? por conta do javascript
html.tree.init('tree1');
</script>
</body>
</html>
|
Download
