Копия английского модуля (от 06.04.2013)
Это экспериментальный модуль для построения HTML-разметки (например, инфобоксы, навигационные шаблоны), с помощью
текучего интерфейса
.
HtmlBuilder даёт возможность построить HTML-разметку и CSS-разметку созданием дерева узлов аналогичного
Document Object Model
. В результате получается код более понятный и совместимый, чем при просто конкатенации строк. Он предоставляет
текучий интерфейс
, которой должно быть знаком любому пользователю
JQuery
.
Usage
First, you need to load the module:
local HtmlBuilder = require('Module:HtmlBuilder')
Next, create the root HtmlBuilder instance:
local builder = HtmlBuilder.create()
Then, you can build HTML using the methods of the HtmlBuilder instance, listed below.
Finally, get the resulting HTML markup as a string:
local s = tostring(builder)
Methods
To allow chaining, all methods return a reference to the builder, unless otherwise stated.
tag
local div = builder.tag('div')
Appends a new child node to the builder, and returns an HtmlBuilder instance representing that new node.
done
builder = div.done()
Returns the parent node under which the current node was created. Like
jQuery.end
, this is a convenience function to allow the construction of several child nodes to be chained together into a single statement.
allDone
builder = div.allDone()
Like
.done()
, but traverses all the way to the root node of the tree and returns it.
wikitext
div.wikitext('This is some [[example]] text.')
Appends some markup to the node. It may include plain text, wiki markup, and even HTML markup.
newline
div.newline()
Appends a newline character to the node. Equivalent to
.wikitext('\n')
.
attr
div.attr('title', 'Attr value')
Set an HTML attribute on the node.
css
div.css('color', '#f00')
Set a CSS property to be added to the node's
style
attribute.
cssText
div.cssText('color:#f00; font-size:1.5em')
Add some raw CSS to the node's
style
attribute. This is typically used when a template allows some CSS to be passed in as a parameter, such as the
liststyle
parameter of
{{
Navbox
}}
.
addClass
div.addClass('even')
Adds a class name to the node's
class
attribute. Spaces will be automatically added to delimit each added class name.
Examples
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>'
For more examples, please see the
test cases page
and the
test cases results
.