Module:Wp/khw/HtmlBuilder/doc
This is the documentation page for Module:Wp/khw/HtmlBuilder
Module:HtmlBuilder is deprecated. Please see mw.html instead. |
یہ لوا ماڈیول 10,000,000 صفحات پر مستعمل ہے۔ بڑے پیمانے پر ٹوٹ پھوٹ اور سرور پر غیر ضروری دباؤ سے بچنے کے لیے اس ماڈیول میں درکار کسی بھی قسم کی تبدیلی کو پہلے اس کے /ریتخانے، /ثابتات . بعد ازاں اُن آزمودہ تبدیلیوں کو محض ایک ہی ترمیم سے اس صفحہ میں شامل کیا جا سکتا ہے۔ براہ کرم ان تبدیلیوں کو نافذ کرنے سے قبل تبادلۂ خیال صفحہ پر گفتگو کر لیں۔ |
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[edit source]
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[edit source]
To allow chaining, all methods return a reference to the builder, unless otherwise stated.
tag[edit source]
local div = builder.tag('div')
Appends a new child node to the builder, and returns an HtmlBuilder instance representing that new node.
done[edit source]
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[edit source]
builder = div.allDone()
Like .done()
, but traverses all the way to the root node of the tree and returns it.
wikitext[edit source]
div.wikitext('This is some [[Wp/khw/HtmlBuilder/example|example]] text.')
Appends some markup to the node. It may include plain text, wiki markup, and even HTML markup.
newline[edit source]
div.newline()
Appends a newline character to the node. Equivalent to .wikitext('\n')
.
attr[edit source]
div.attr('title', 'Attr value')
Set an HTML attribute on the node.
css[edit source]
div.css('color', '#f00')
Set a CSS property to be added to the node's style
attribute.
cssText[edit source]
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[edit source]
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[edit source]
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.