前言

创作者们在新增 UI.Text 类别时，此类别会将所有字一起管理，但是如果我们想要时做出例如画重点(更改底色)诸如此类需要将字分开看的动作时，会特别麻烦，因此，为了处理上述问题，我新增了一个类别UI.Content特别处理这类的问题。

在使用此类别前，请先加入这些:

https://github.com/quack12765/Content.UI

---

使用此类别，你必须累积过使用 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的颜色有些可能和程式设定的不同，因为我途中有更改让读者比较好分辨区块，所以请别介意！

最后谢谢各位拨冗观看