Módulo:HtmlBuilder/doc

Esta é uma subpágina de documentação para o Módulo:HtmlBuilder.
Ela contém informações sobre o seu uso, categorias, bem como todo o conteúdo que não faz parte do módulo original.

Descrição editar

O HtmlBuilder fornece uma maneira de construir marcação complexa em HTML e CSS criando uma árvore de nós, parecida com o Modelo de Objeto de Documentos (DOM). O resultado é uma lista de códigos que são mais compreensíveis e fáceis de manter do que se fosse simplesmente feita a concatenação de strings umas com as outras. Ele oferece uma interface fluída que deve parecer familiar a qualquer usuário de jQuery.

Uso editar

Primeiro, é preciso carregar o módulo:

local HtmlBuilder = require('Module:HtmlBuilder')

Em seguida, crie a instância raiz do HtmlBuilder:

local builder = HtmlBuilder.create()

Depois, você pode construir HTML utilizando os métodos da instância do HtmlBuilder, listados abaixo.

Finalmente, obtenha a marcação HTML resultante em forma de string:

local s = tostring(builder)

Métodos editar

To allow chaining, all methods return a reference to the builder, unless otherwise stated.

tag editar

local div = builder.tag('div') Appends a new child node to the builder, and returns an HtmlBuilder instance representing that new node.

done editar

builder = div.done() Retorna o nó pai sob o qual foi criado o nó atual. Tal como jQuery.end, este é uma função de conveniência para possibilitar o encadeamento da construção de vários nós filhos em uma única declaração.

allDone editar

builder = div.allDone() Como .done(), mas percorre todo o caminho até o nó raiz da árvore e então retorna-o.

wikitext editar

div.wikitext('This is some [[example]] text.') Adiciona alguma marcação ao nó. Ela pode incluir texto simples, código wiki, e até mesmo código HTML.

newline editar

div.newline() Adiciona um caractere de nova linha ao nó. Equivalente a .wikitext('\n').

attr editar

div.attr('title', 'Attr value') Define um atributo HTML no nó.

css editar

div.css('color', '#f00') Define uma propriedade CSS a ser inserida no atributo style do nó.

cssText editar

div.cssText('color:#f00; font-size:1.5em') Adiciona um código em sintaxe CSS ao atributo style do nó. Isso geralmente é utilizado quando uma predefinição permite que seja passado CSS como parâmetro, tal como o parâmetro liststyle da {{Navbox}}.

addClass editar

div.addClass('even') Inclui o nome de uma classe no atributo class do nó. Os espaços que delimitam o nome de cada classe são inseridos automaticamente.

Exemplos editar

local HtmlBuilder = require('Module:HtmlBuilder')

local root = HtmlBuilder.create()

root
    .wikitext('Lorem ')
    .tag('span')
        .css('color', 'red')
        .attr('title', 'ipsum dolor')
        .wikitext('sit amet')
        .done()
    .tag('div')
        .wikitext('consectetur adipisicing')

local s = tostring(root)
-- s = 'Lorem <span style="color:red;" title="ipsum dolor">sit amet</span><div>consectetur adipisicing</div>'

Para mais exemplo, por favor veja

a página de testes em inglês e os resultados dos testes.