Модуль:HtmlBuilder/doc

Это страница документации Модуль:HtmlBuilder

Данный модуль устарел, не используйте его в статьях.

Существует новая, рекомендуемая к использованию схема: используйте mw.html.
Убедившись, что этот шаблон нигде не используется, пометьте его к удалению или самостоятельно удалите его, если вы являетесь администратором.

Копия английского модуля (от 06.04.2013)

Это экспериментальный модуль для построения HTML-разметки (например, инфобоксы, навигационные шаблоны), с помощью текучего интерфейса.

HtmlBuilder даёт возможность построить HTML-разметку и CSS-разметку созданием дерева узлов аналогичного Document Object Model. В результате получается код более понятный и совместимый, чем при просто конкатенации строк. Он предоставляет текучий интерфейс, которой должно быть знаком любому пользователю JQuery.

Содержание

1 Usage
2 Methods
- 2.1 tag
- 2.2 done
- 2.3 allDone
- 2.4 wikitext
- 2.5 newline
- 2.6 attr
- 2.7 css
- 2.8 cssText
- 2.9 addClass
3 Examples

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 [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

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.