Modul:HtmlBuilder/doc
Kaca ieu téh dokuméntasi ti kaca Modul:HtmlBuilder.
Module:HtmlBuilder is deprecated. Please use mw.html instead. |
Ieu citakan dipaké dina 10,000,000 kaca. Pikeun nyegah gangguan nu gedé tur beban server nu teu perlu, parobahan kana ieu citakan kudu diuji heula dina sub kaca /kotrétan atawa /kasus uji, atawa dina rohangan pamaké anjeun. Parobahan nu geus diuji satuluyna bisa ditambahkeun kana ieu kaca ukur dina saéditan. Mangga sawalakeun satiap parobahan dina kaca sawala saméméh nerapkeunanan. |
Ieu modul jadi subjék keur protéksi kaca. Mangrupa hiji modul nu kacida katingalina alatan dipaké ku kacida lobana kaca, atawa kacida mindengna diganti. Ku sabab vandalisme atawa kasalahan-kasalahan bakal mangaruhan loba kaca, tur kusabab éditan sapélé ogé bisa nyababkeun beban substansial kana server, ieu kaca diprotéksi tina éditan. |
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 a list of codes that are 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.
Note: This module is deprecated in favour of mw.html.
Usage édit
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 édit
To allow chaining, all methods return a reference to the builder, unless otherwise stated.
tag édit
local div = builder.tag('div')
Appends a new child node to the builder, and returns an HtmlBuilder instance representing that new node.
done édit
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 édit
builder = div.allDone()
Like .done()
, but traverses all the way to the root node of the tree and returns it.
wikitext édit
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 édit
div.newline()
Appends a newline character to the node. Equivalent to .wikitext('\n')
.
attr édit
div.attr('title', 'Attr value')
Set an HTML attribute on the node.
css édit
div.css('color', '#f00')
Set a CSS property to be added to the node's style
attribute.
cssText édit
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 édit
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 édit
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.