<!DOCTYPE html>
<!--
Exemplo da fun??o javascript Summarize
-->
<html>
<head>
<meta charset="UTF-8">
<title>Exemplo Summarize JS</title>
</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>
<h2 data-summary>Como marcar as entradas do sum?rio na p?gina</h2>
<p>Para indicar um elemento como entrada do sum?rio, basta acrescentar o atributo HTML <code>data-summary</code>.</p>
<p>Se voc? colocar um valor para o atributo, por exemplo, <code>data-summary="Isto vai para o sum?rio"</code>, o valor do atributo ? o que aparecer? no sum?rio.</p>
<p>Voc? tamb?m pode colocar apenas <code>data-summary</code> ou <code>data-summary=""</code>. Neste caso, o sum?rio ir? exibir o conte?do da tag com o atributo.</p>
</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>
<section data-summary="CHANGELOG">
<h1>CHANGELOG</h1>
<dl>
<dt data-summary>Vers?o 1.1</dt>
<dd>Alterado para pegar o conte?do da tag se marcada somente com data-summary sem valor.</dd>
<dt data-summary>Vers?o 1.0</dt>
<dd>Vers?o inicial.</dd>
</dl>
</section>
</article>
<a href="#" style="position: fixed; bottom: 1em; right: 0; background-color: blue; color: white; padding: 0.5em;">Topo</a>
<script src="summarize.js"></script>
<script>
Summarize.init(
document.getElementById('page_content')
,document.getElementById('summary')
);
</script>
<script src="../domprocess/domprocess.js"></script>
<script>
DOMProcess.init(document.getElementById('summary'), function($root){
console.log($root.childNodes.length);
},function($node){
if($node.hasChildNodes()){
return true;
}else{
return false;
}
});
</script>
</body>
</html>
|
Download
