Help:Lua/mw.html

出自滚动的天空Wiki

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标签。