Diferencia entre revisiones de «Módulo:HtmlBuilder/doc»
(add) |
(expand documentation) |
||
| (No se muestran 7 ediciones intermedias de 2 usuarios) | |||
| Línea 1: | Línea 1: | ||
| − | + | 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]]. | |
== Usage == | == Usage == | ||
| − | + | First, you need to load the module: | |
<code>local HtmlBuilder = require('Module:HtmlBuilder')</code> | <code>local HtmlBuilder = require('Module:HtmlBuilder')</code> | ||
| − | + | Next, create the root HtmlBuilder instance: | |
| − | + | <code>local builder = HtmlBuilder.create()</code> | |
| − | + | ||
| − | + | Then, you can build HTML using the methods of the HtmlBuilder instance, listed below. | |
| − | + | ||
| − | + | Finally, get the resulting HTML markup as a string: | |
| − | + | ||
| − | + | <code>local s = tostring(builder)</code> | |
| − | + | ||
| + | == Methods == | ||
| + | To allow chaining, all methods return a reference to the builder, unless otherwise stated. | ||
| + | |||
| + | ===tag=== | ||
| + | <code>local div = builder.tag('div')</code> | ||
| + | Appends a new child node to the builder, and returns an HtmlBuilder instance representing that new node. | ||
| + | |||
| + | ===done=== | ||
| + | <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 == | == Examples == | ||
For examples, please see the [[Module:HtmlBuilder/testcases|test cases page]] and the [[Module talk:HtmlBuilder/testcases|test cases results]]. | For examples, please see the [[Module:HtmlBuilder/testcases|test cases page]] and the [[Module talk:HtmlBuilder/testcases|test cases results]]. | ||
Revisión del 21:38 3 abr 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
For examples, please see the test cases page and the test cases results.
