Help:Lua/mw.html

mw.html是MediaWiki的一个Lua库，可用于高效且简便地创建HTML，并面向对象使用（类似于jQuery）。使用mw.html.create函数创建一个新的mw.html对象。

create

mw.html.create(tagName, args)创建一个新的mw.html对象，其为一个标签名称为tagName的元素。tagName可以是空字符串或者nil，这样就会创建一个新的空白mw.html对象。

args是可选的表，可以有以下字段：

• args.selfClosing：强制当前标签自我闭合，即使mw.html不认可其自我闭合
• args.parent：当前mw.html实例的上级对象（用于内部使用）

例如：

local div = mw.html.create "div"

方法

mw.html对象可以有以下方法。注：用例中的html表示一个mw.html对象。如非特别说明，下面这些方法调用后均返回修改后的mw.html对象自身，以便于链式调用。

node

html:node(builder)

向当前的mw.html实例附加mw.html(builder)节点。如果传递nil，那么函数不做任何事。(builder)节点是要创建的HTML元素的种类的字符串代表。

wikitext

html:wikitext(text1, text2, ...)

给mw.html对象加上维基文本字符串。可以是一个，也可以是多个。注意遇到第一个nil项就会停。

text1、text2……不能是标签对象。将子节点添加到mw.html对象应当使用#node方法，或直接使用#tag方法创建子节点。

newline

html:newline()

给mw.html对象加新行。

tag

html:tag(tagName, args)

给mw.html对象添加一个新的节点，其标签名称为tagName，返回代表这个新的节点的mw.html实例。args参数和mw.html.create的参数是一样的。

注意：该方法返回的是新的mw.html对象。例如：

local tbl = mw.html.create "table"  -- 不要命名为table，以避免与table库重名
  :addClass "wikitable"
local tr1 = tbl:tag "tr"
local td1 = tr1:tag "td"
  :wikitext "第一格"
local td2 = tr1:tag "td"
  :wikitext "第二格"
local td3 = tr1:tag "td"
  :wikitext "第三格"

通过该方法创建的子节点，可以调用#done方法以返回上一级节点。例如：

local tbl = mw.html.create "table"
  :addClass 'wikitable'
  :tag 'tr'
    :tag 'td'
      :wikitext "第一格"
    :done()
    :tag 'td'
      :wikitext "第二格"
    :done()
    :tag 'td'
      :wikitext "第三格"
    :done()
  :done()

这样将所有的节点就串成了一句，十分简便，当然这样的局限性在于语句不够灵活，也没有将子节点存储为局部变量。

attr

html:attr(name, value)或html:attr(t)（其中t是一个表）。

将节点的HTML对象的name属性的值设为value。也可以选择使用表，其键值对即为属性名称-值对。

第一种形式中，如果值为nil，会导致这个给定名称的已被设置的属性设为未被设置。

例如：

div
  :attr('data-usage', 'The usage of div')
  :attr('lang', 'zh-sg')

getAttr

html:getAttr(name)

返回已经通过html:attr()设置的属性name的值。

addClass

html:addClass(class)

给节点添加一个类。可以多次添加。如果参数为nil，则无效。

例如：

div:addClass "content-div nomobile"

css

html:css(name, value)或html:css(t)（其中t为表）

使用给定的name和value给节点设置CSS属性。也可以选择使用表，其键值对即为CSS名称-值对。第一种形式中，如果值为nil，会导致这个给定名称的已被设置的CSS设为未被设置。

例如：

div
  :css('color', 'red')
  :css('border', '1px solid currentColor')
  :css('font-size', 'small')

或

div:css {
  color = 'red',
  border = '1px solid currentColor',
  ['font-size'] = 'small'
}

cssText

html:cssText(css)

给节点的属性添加一些纯css文本。如果参数为nil，则无效。

例如：

div:cssText 'color:red; border:1px solid currentColor; font-size:small'

done

html:done()

返回当前节点被创建时所在的上级节点（parent node)。类似于jQuery.end，这样可以允许方便地创建多个子节点，并串成一个语句。

allDone

html:allDone()

类似于html:done()，但是会遍历直到树节点的根部再返回。

注意

• Lua中缩进是会被忽视的，但建议根据代码逻辑调整缩进以方便阅读：
  • 对所有写在同一对象后的方法增加一缩进。
  • 每调用一次:tag方法并链式调用时增加一即缩进。
  • 每调用:done方法返回上级节点并链式调用时，减少一缩进。

local div = mw.html.create("div")
   :addClass("foo")
   :tag("span")
        :css("color","#114514")
        :wikitext("bar")
        :done() -- 如果这里不调用done，则赋值给div的将会是这个span标签。