Diferencia entre revisiones de «Módulo:HtmlBuilder/doc»
(Reverted 1 edit by 68.28.155.117 (talk). (TW)) |
|||
Línea 25: | Línea 25: | ||
===done=== | ===done=== | ||
− | <code>builder | + | <code>builder = div.done()</code> |
+ | Returns the parent node under which the current node was created. Like [http://api.jquery.com/end/ jQuery.end], this is a convenience function to allow the construction of several child nodes to be chained together into a single statement. | ||
+ | |||
+ | ===allDone=== | ||
+ | <code>builder = div.allDone()</code> | ||
+ | Like <code>.done()</code>, but traverses all the way to the root node of the tree and returns it. | ||
+ | |||
+ | ===wikitext=== | ||
+ | <code><nowiki>div.wikitext('This is some [[example]] text.')</nowiki></code> | ||
+ | Appends some markup to the node. It may include plain text, wiki markup, and even HTML markup. | ||
+ | |||
+ | ===newline=== | ||
+ | <code>div.newline()</code> | ||
+ | Appends a newline character to the node. Equivalent to <code>.wikitext('\n')</code>. | ||
+ | |||
+ | ===attr=== | ||
+ | <code>div.attr('title', 'Attr value')</code> | ||
+ | Set an HTML attribute on the node. | ||
+ | |||
+ | ===css=== | ||
+ | <code>div.css('color', '#f00')</code> | ||
+ | Set a CSS property to be added to the node's <code>style</code> attribute. | ||
+ | |||
+ | ===cssText=== | ||
+ | <code>div.cssText('color:#f00; font-size:1.5em')</code> | ||
+ | Add some raw CSS to the node's <code>style</code> attribute. This is typically used when a template allows some CSS to be passed in as a parameter, such as the <code>liststyle</code> parameter of {{tl|Navbox}}. | ||
+ | |||
+ | ===addClass=== | ||
+ | <code>div.addClass('even')</code> | ||
+ | Adds a class name to the node's <code>class</code> attribute. Spaces will be automatically added to delimit each added class name. | ||
+ | |||
+ | == Examples == | ||
+ | |||
+ | <syntaxhighlight lang="lua"> | ||
+ | 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>' | ||
+ | </syntaxhighlight> | ||
+ | |||
+ | |||
+ | For more examples, please see the [[Module:HtmlBuilder/testcases|test cases page]] and the [[Module talk:HtmlBuilder/testcases|test cases results]]. |
Revisión del 21:33 3 jun 2013
HtmlBuilder provides a way to construct complex HTML and CSS markup by creating a tree of nodes, similar to the Document Object Model. The result is code that is more comprehensible and maintainable than if you simply concatenated strings together. It offers a fluent interface that should look familiar to any user of jQuery.
Contenido
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
<syntaxhighlight lang="lua"> 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 sit amet</syntaxhighlight>
For more examples, please see the test cases page and the test cases results.