Icontem

File: sample.html

Recommend this page to a friend!
  Classes of Everton da Rosa  >  DOM Process  >  sample.html  >  Download  
File: sample.html
Role: Example script
Content type: text/plain
Description: An example
Class: DOM Process
Traverse the DOM tree and process elements
Author: By
Last change:
Date: 3 years ago
Size: 5,557 bytes
 

Contents

Class file image Download
<!DOCTYPE html>
<!--
Exemplo da fun??o javascript Summarize
-->
<html>
    <head>
        <meta charset="UTF-8">
        <title>Exemplo Summarize JS</title>
        
<!--        <style>
            #page_content *[data-summary]{
                content: attr('data-summary');
            }
        </style>-->
    </head>
    <body>
        <header>
            <h1>SummarizeJS</h1>
            <h3>Cria um sum?rio hier?rquico da p?gina de forma autom?tica.</h3>
        </header>
        <nav id="summary">
            <h2>Veja nesta p?gina</h2>
        </nav>
        
        <article id="page_content">
            <section>
                <h1 data-summary="Introdu??o">Introdu??o</h1>
                <p>SummarizeJS ? uma classe (a.k.a) Javascript para cria??o de sum?rios de p?gina hierarquizados de forma autom?tica, com base em marca??o de elementos index?veis.</p>
                <p>Para incluir um elemento no sumario, basta adicionar a sua tag html o atributo data-summary. O conte?do desse atributo ser? o t?tulo do elemento no sum?rio.</p>
                <p>O sum?rio ser? criado de forma hierarquizada, de acordo com a estrutura hier?rquica dos elementos index?veis.</p>
                <p>Por exemplo, os elementos inidex?veis que est?o dentro de outro elemento index?vel, ser?o mostrados nessa hierarquia dentro do sum?rio, sendo que elementos n?o marcados com data-summary ser?o completamente ignorados.</p>
                
            </section>
            
            <section>
                <h1 data-summary="Como usar">Como usar</h1>
                <p>O uso ? bastante f?cil: inclua o script <em>summarize.js</em> e chame o m?todo <code>Summarize.init($target, $destiny)</code></p>
                <p>Onde:</p>
                <dl>
                    <dt>$target</dt>
                    <dd>? um elemento DOM que ser? escaneado em busca dos elementos index?veis; e</dd>
                    
                    <dt>$destiny</dt>
                    <dd>? o elemento DOM que receber? o sum?rio.</dd>
                </dl>
            </section>
            
            <section  data-summary="Hierarquias">
                <h1>Hierarquias</h1>
                <p>Analise o c?idgo fonte deste trecho e veja como o SummarizeJS trabalha com as hierarquias do DOM.</p>
                
                <div data-summary="Sem hierarquia">
                    <h2>Sem hierarquia</h2>
                    <p>Esta lista aparecer? no sum?rio</p>
                    <ul>
                        <li data-summary="N?vel 1">N?vel 1</li>
                        <li data-summary="N?vel 1">N?vel 1</li>
                        <li data-summary="N?vel 1">N?vel 1</li>
                        <li data-summary="N?vel 1">N?vel 1</li>
                    </ul>
                </div>
                
                <div data-summary="Hierarquia">
                    <h2>Hierarquia</h2>
                    <p>Perceba que todos os elementos da hierarquia DOM s?o index?veis</p>
                    <p data-summary="Pai sem filhos">
                        Este ? um elemento de primeiro n?vel.
                    </p>
                    <div data-summary="Pai com filho"><!-- deve-se ter cuidado com o uso das tags apropriadas. Se em vez de div, usasse p, o filho n?o apareceria como filho, mas neste mesmo n?vel, poruqe p n?o admite um div como filho. N?o sei porque isso!-->
                        Este outro elemento de primeiro n?vel.
                        <div data-summary="Filho">Este ? um filho do elemento de primeiro n?vel</div>
                    </div>
                </div>
                
                <div data-summary="Hierarquia com itens n?o indexados">
                    <h2>Hierarquia</h2>
                    <p>Perceba que nem todos os elementos da hierarquia DOM s?o index?veis</p>
                    <p data-summary="Pai sem filhos">
                        Este ? um elemento de primeiro n?vel.
                    </p>
                    <div data-summary="Pai com filho">
                        Este outro elemento de primeiro n?vel.
                        <div data-summary="Filho">Este ? um filho do elemento de primeiro n?vel</div>
                    </div>
                    <div data-summary="Pai com filhos, mas nem todos indexados">
                        <div data-summary="Filho indexado">Filho indexado</div>
                        <div><!--este n?o aparecer? na hierarquia do sum?rio-->
                            <p>Este filho n?o aparece no sum?rio, s? o pr?ximo irm?o.</p><!--este n?o aparecer? na hierarquia do sum?rio-->
                            <div data-summary="Neto indexado">Filho n?o indexado, neto indexado, ent?o vai aparecer no mesmo n?vel de filho.</div>
                        </div>
                    </div>
                </div>
            </section>
            
            
        </article>
        
        <a href="#" style="position: fixed; bottom: 1em; right: 0; background-color: blue; color: white; padding: 0.5em;">Topo</a>

        <script src="domprocess.js"></script>
        <script>
        DOMProcess.init(document.getElementById('page_content'), function($root){
            console.log($root.childNodes.length);
        },function($node){
            if($node.hasChildNodes()){
                return true;
            }else{
                return false;
            }
        });
        </script>
    </body>
</html>