JavaScript HTML Tree: Create a tree view of HTML elements inside another

Recommend this page to a friend!
     
  Info   Example   View files Files   Download Download   Reputation   Support forum   Blog    
Ratings Unique User Downloads Download Rankings
Not enough user ratingsTotal: 102 All time: 407 This week: 4Up
Version License JavaScript version Categories
html-tree 1.0GNU General Publi...5HTML, Language, Utilities and Tools, P...
Description 

Author

Everton da Rosa

This object can create a tree view of HTML elements inside another.

It takes a given HTML page element identifier and builds a tree view to show that contained elements with specific data attributes.

The elements in the tree view may appear collapsed or expanded according to a separate CSS stylesheet.

Picture of Everton da Rosa
  Performance   Level  
Name: Everton da Rosa <contact>
Classes: 7 packages by
Country: Brazil Brazil
Age: 43
All time rank: 506 in Brazil Brazil
Week rank: 6 Up1 in Brazil Brazil Up

Level 2 StarStar

 Innovation award
Innovation award
Nominee: 3x

Winner: 3x

Example

<!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>

  Files folder image Files (3)  
File Role Description
Accessible without login Plain text file htmltree.css Data styles for tree
Plain text file htmltree.js Class javascript class
Accessible without login Plain text file sample.html Example sample use

Downloadhtml-tree-2016-07-21.zip 3KB
Downloadhtml-tree-2016-07-21.tar.gz 3KB
 Version Control Unique User Downloads Download Rankings  
 0%
Total:102
This week:0
All time:407
This week:4Up

  Applications that use this package  
No pages of applications that use this class were specified.

Add link image If you know an application of this package, send a message to the author to add a link here.