【心得】自製 Lua class : UI.Content 分享 (請使用電腦觀看)

前言

創作者們在添加 UI.Text 類別時,此類別會將所有字一起管理,但是如果我們想要時做出例如畫重點(更改底色)諸如此類需要將字分開看的動作時,會特別麻煩,因此,為了處理上述問題,我添加了一個類別UI.Content特別處理這類的問題。


在使用此類別前,請先加入這些:

使用此類別,你必須累積過使用 HTML, CSS刻網頁的經驗。


API
UI.Content

Method :
function UI.Content:Create(arg)
function UI.Content:AddDiv(arg)
function UI.Content:Set(class, arg)
function UI.Content:Hide(class)
function UI.Content:Show(class)

說明
function UI.Content:Create(arg)
Parameters:
(table) arg = {
int x
int y
int width
int height
}

創建一個content,裡面將擁有許多自訂的DIV,所有的DIV結構如下圖 :


Content: 字元的位置。
Padding: content區塊與border的距離。
Border: 邊框。
Margin: 邊框與外界的距離。

function UI.Content:AddDiv(arg)


Parameters:
(table) arg = {
string class (optional)  此DIV的class名稱。
        string display (optional) (default “inline”)  此DIV的位置擺放方法。
        string position (optional) (default “static”)  此DIV的位置顯示方法。
        string text (optional)  此DIV的文本。
        string font_align (optional) (default “left”)  此DIV的文本對齊(“left”, “right”, “center”)模式。
        int width (optional) (default 0)  此DIV的長度。
        int height (optional) (default 0)  此DIV的寬度。
        int top (optional) (default 0)  此DIV與上方的距離。
        int left (optional) (default 0)  此DIV與左方的距離。
        int margin (optional) (default 0)  此DIV的margin大小。
        int margin_top (optional) (default 0)  此DIV上方的margin大小。
        int margin_bottom (optional) (default 0)  此DIV下方的margin大小。
        int margin_left (optional) (default 0)  此DIV左邊的margin大小。
        int margin_right (optional) (default 0)  此DIV右邊的margin大小。
        int padding (optional) (default 0)  此DIV的padding大小。
        int padding_top (optional) (default 0)  此DIV上方的padding大小。
        int padding_bottom (optional) (default 0)  此DIV下方的padding大小。
        int padding_left (optional) (default 0)  此DIV左邊的padding大小。
        int padding_right (optional) (default 0)  此DIV右邊的padding大小。
        int border (optional) (default 0)  此DIV邊框大小。
        table border_color (optional) (default nil)  此DIV邊框顏色。
        string font_size (optional) (default “small”)  此DIV內的字體大小(“small”, “medium”, “large”, “verylarge”)。
        table font_color (optional) (default nil)  此DIV內的字體顏色。
        table background_color (optional) (default nil)  此DIV背景顏色。
}

添加一個DIV。
arg裡面的display and position後面再提。

function UI.Content:Set(class, arg)


Parameters:
(string)class: 欲修改的DIV名稱。
(table) arg : 上述之設置檔。

設置指定class名稱的DIV。
(class如果輸入”*”,代表修改全局。)

function UI.Content:Show(class)

function UI.Content:Hide(class)

指定class的DIV顯示/關閉。
(class如果輸入”*”,代表修改全局。)

補充說明

1.設置檔的display有兩種模式:

“inline” : 此DIV應該擺在前者的後方
“block” : 此DIV應該換行擺放。


2.設置檔的position有三種模式:

“static” : 代表此DIV正常顯示
“relative” : 代表此DIV在本該出現之處偏移,但不會更改到他原本應該出現的位置。
“absolute” : 代表此DIV無視所有規則,直接按照該content的絕對位置擺放。

3.當同時出現 margin 和 margin_top 時,先以有方向性的優先。

實例

此例中,我創建了一個Content,然後在裡面放了一個DIV。DIV的邊框為10px,然後放在此Content的第一個位置中。


接下來,我添加第二個。

第二個DIV的display預設為”inline”,因此,他應該出現在第一個DIV的後方。


接下來,我創建第三個,然後試著換行,因此,應該把第三個DIV的display設置為”block”。



它應該換行。



接下來,我想設置DIV的margin,然後希望所有的DIV都會更改



如願以償的,所有的DIV都把自己與外界隔開10px。


最後,我想再創建一個DIV,裡面開始寫字了,並且,我希望這些字離左邊的border有50px的距離,然後整個DIV距離上方有50px,因此我們可以這樣寫 :


結果:



結語

這類別BUG應該會蠻多的,但正常使用應該是沒有問題,如果有問題就別用了吧XD
另外上面幾張圖有些DIV的顏色有些可能和程序設置的不同,因為我途中有更改讓讀者比較好分辨區塊,所以請別介意!


最後謝謝各位撥冗觀看
本文來自網路,不代表3樓貓立場,轉載請註明出處:https://www.3loumao.org/9382.html?variant=zh-tw
返回頂部