File: sample.html

Recommend this page to a friend!
  Classes of Everton da Rosa  >  JavaScript HTML Tree  >  sample.html  >  Download  
File: sample.html
Role: Example script
Content type: text/plain
Description: sample use
Class: JavaScript HTML Tree
Create a tree view of HTML elements inside another
Author: By
Last change:
Date: 4 years ago
Size: 3,678 bytes
 

Contents

Class file image Download
<!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>