Help:Lua/mw.html

来自滚动的天空Wiki

mw.html是MediaWiki的一个Lua库,可用于高效且简便地创建HTML,并面向对象使用。使用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标签。