广州外贸网站建站/网络推广外包一年多少钱

述

Mx3 使用的界面引擎是基于 HTML 的轻量级渲染引擎(HTMLayout).

修改 HTMLayout 的界面与修改网页一样方便灵活.

此界面引擎基于 HTMLayout 开发, 关于 HTMLayout 的更多信息请访问以下网站:

相关演示可以下载 HTMLayout 的 Demo 文件包查看:

(下载后解压. 启动 bin\browse.exe, 然后用它打开 html_samples 目录下的文件查看.)

界面引擎的结构

HTMLayout 的界面通过下面 4 个方面定义:

・         HTML

定义界面的基础结构

・         CSS样式

定义界面元素的表现

・         CSS的 behavior扩展属性

定义界面元素的基础交互行为

・         CSSS!脚本

为界面提供简单的脚本控制能力

我们会在后面的内容中对它们逐一介绍.

HTML 支持

界面的 HTML 文件奠定了界面的基础层级和结构.

HTMLayout 界面引擎的 HTML 支持以 HTML 4.0 规范为基础, 在此基础上又扩展了一些特殊标记.

这里仅介绍 HTMLayout 界面中用到的基本元素.

标记

include 标记是一个扩展的特殊标记.

顾名思义, 就是引用并包含其他 htm 文件.

它有以下两种书写格式:

Missing: layout.htm

需要注意的是, 被引用的文件如果不在同级目录, 引用后里面的相对路径都会基于引用页的路径处理.

menu 标记被用于定义界面中的菜单.

这个标记产生的元素默认是隐藏的, 只有被 popup-menu 行为触发时才显示.

其他扩展元素

还有很多其它的扩展元素, 因为在 mx3 的主界面中没有使用到, 因此在这里不做介绍.

mx3 的对话框界面中用到很多控件, 这些元素在内建的 base\control.css 中定义.

主界面的皮肤文件中没有使用此 css 文件.

HTMLayout 的 Demo 文件包中 html_samples\form\ 目录下有大部分控件的范例文件.

(包括进度条, 日期选择框, 数字输入框等)

CSS 支持

HTMLayout 皮肤引擎的 css 支持以 css 2.1 为基准.

同时支持部分 css3 的属性和选择符.

在这里不再介绍 css2.1 标准支持的属性和选择符, 只对界面用到的扩展属性和选择符进行介绍.

扩展选择符支持

选择符

说明

div:not(:first-child)

“非”状态选择符.范例为匹配所有不是第一个子元素的 div 元素.

div[foo^=”val”]

匹配 foo 属性值以”val”开头的 siv 元素.

div[foo$=”val”]

匹配 foo 属性值以”val”结尾的 div 元素.

div[foo*=”val”]

匹配 foo 属性值中含有”val”字串的 div 元素.

tr:nth-child(An+B)

匹配父元素里以 A 个为一组的每组中的第 B 个 div 元素.

tr:nth-last-child(An+B)

匹配父元素里以 A 个为一组的每组中的倒数第 B 个 div 元素.

button:only-child

匹配父元素里唯一的 button 子元素.

input:only-of-type

匹配父元素里唯一使用了 input 标记的子元素.

a:focus

匹配拥有焦点的 a 元素.

a:tab-focus

匹配通过按 TAB 件获得焦点的 a 元素.

option:current

匹配一组元素中具有当前状态的 option 元素.

input:checked

匹配被选定的 input 元素. 用于具有 checkbox, radio, select 等行为的元素.

input:disabled

匹配被禁用的 input 元素.

input:read-only

匹配只读的 input 元素.

input:empty

匹配内容为空的 input 元素.

div:has-child

匹配只含有一个子元素的 div 元素.

div:has-children

匹配含有多个子元素的 div 元素.

menu:popup

匹配被作为弹出菜单或面板显示的 menu 元素.

button:owns-popup

匹配触发了弹出行为且弹出菜单或面板处于可见状态的 button 元素.

div:drop-target

匹配在拖放操作中可以接受被拖放对象的 div 元素.

div:drag-over

匹配在拖放操作中鼠标所处的可接受被拖放对象的 div 元素.

li:moving

匹配正以移动模式被拖放的 li 元素.

li:copying

匹配正以副本模式被拖放的 li 元素. (原元素的一个副本)

li:drag-source

匹配被拖放的源 li 元素.

li:drop-marker

匹配指示拖放目的位置的 li 元素. (原元素的一个副本)

扩展属性

文本相关

特殊字体

font: system;                                     /* 系统输入框字体 */

font: system-menu;                                /* 系统菜单字体 */

font: system-caption;                        /* 窗口标题字体 */

font: system-status;                           /* 状态栏 tooltip 的字体*/

文本选择区颜色

text-selection: #FFF #C00;           /* 格式: 前景色 背景色 */

文本过长截断

text-overflow: ellipsis;                      /* 省略号处理 */

此属性需配合 white-space: nowrap; 和 overflow: hidden; 使用.

特殊折行处理

text-wrap: unrestricted;                /* 允许截断换行. CSS3 里面为 text-wrap: avoid */

white-space: prewrap;                   /* 按多行文本输入框的折行方式处理文本 */

文本内容

content: “text here!”;                     /* 同  CSS3 */

布局

布局方向

direction: ltr;                        /* 从左到右布局 */

direction: rtl;                        /* 从右到左布局 */

自适应高度和自适应宽度

width: 50%%;

height: 100%%;

使用双百分号表示占用剩余空间的比例.

margin 和 padding 等属性也可以使用 %% 单位.

垂直/水平布局

flow: vertical;                        /* 将容器内部变为垂直布局. (标准的布局模式) */

flow: horizontal;                 /* 将容器内部变为横向布局. */

垂直/水平流式布局

flow: v-flow;                             /* 将容器内部变为垂直流式布局. */

flow: h-flow;                             /* 将容器内部变为水平流式布局. */

填充和背景

渐变色背景

background-color: red yellow blue yellow;   /* 格式: 上左颜色 上右颜色 下右颜色 下左颜色 */

这个渐变填充的实现与 CSS3 标准不同, 能实现的效果也有限.

保持长宽比拉伸

background: url(image.png) stretch keep-ratio;

仅能在 stretch 模式中使用.

切片贴图

background: url(bg.png) expand;

background-position: 6px 6px 6px 6px;

background-stretch: stretch-left stretch-middle stretch-right;

background 这行将 bg.png 指定为背景图, 并指定了贴图的模式为 expand (切图填充).

background-position 指定了切图的位置(按上右下左的顺序).

background-stretch 指定了切出来的图的拉伸方式. 可用的参数有:

stretch-left                         拉伸左中切块

stretch-middle                  拉伸正中切块

stretch-right                       拉伸右中切块

stretch-top                         拉伸上中切块

stretch-bottom                 拉伸下中切块

不写 background-stretch 则默认使用平铺贴图方式处理.

前景样式

foreground: red url(fg.png) no-repeat 50% 50%;

foreground-color: …

foreground-image: …

foreground-repeat: …

foreground-position: …

foreground-stretch: …

此属性的语法与 background 的对应属性相同. 也支持切片填充.

前景样式会覆盖在背景和元素的内容之上.

图像变换效果

foreground-image-transformation: colorize(#666);

background-image-transformation: contrast-brightness-gamma(0.5,0,0.5,1.2);

引擎支持对前景和背景图像的多种变换效果.

目前可用的变换效果有如下几种:

colorize(#FFCC00)                                                            颜色滤镜效果

contrast-brightness-gamma(0.5,0.5,1.5)                对比度,亮度,gamma 值调整. 对比度和亮度的中间值为 0.5.

color-schema(red,yellow,blue)                                 将图像的灰度色部分按给出的颜色(可以有多个)进行插值变换.

colorize() 常用于实现按钮图标的禁用状态.

contrast-brightness-gamma() 可用于鼠标悬停死的按钮图标变化.

边框

圆角边框

border-radius: 4px;

与 CSS3 规范相同.

光晕效果

outline: 1px glow #0CF 3px;

对 outline 样式的扩展.

格式: 宽度 glow 颜色 渐变偏移值.

如果被设置此样式的对象有前景/背景色或图像填充, 光晕的边缘会按背景的轮廓绘制.

阴影效果

outline: 1px glow #0CF 3px;

outline-shift: 3px;

在光晕效果的基础上增加 outline-shift 属性指定阴影的偏移位置.

动画效果

渐变效果

transition: blend;

渐变切换不同状态的样式效果.

适合用于制作按钮效果.

有一定的性能问题, 不建议大量使用.

自定义变换效果

transition: width(linear,400ms) height(linear,400ms);

transition: width(back-in,0.5s) background-color(back-in,0.5s,0.5s);

用指定的变换速率算法和时间控制指定的属性值变化.

在 HTMLayout 的 Demo 里面的 html_samples\transtions\ 目录下有相关的描述文档和示例.

交互相关扩展

对象的响应区域

hit-margin: 4px 5px 4px 8px;

将元素的交互范围扩大. (从元素的 border 算起)

格式同 margin 属性.

右键菜单

context-menu: selector(#ITEM_CONTEXT_MENU);

为元素指定对应的右键菜单.

鼠标拖放操作

.item {

draggable: only-move;                   /* 定义拖放的形式 */

}

.item-container {

drop: insert;                       /* 定义拖放结束时的处理方式 */

accept-drop: selector( .item );             /* 定义容器可接受的被拖放对象 */

}

draggable 有 4 个取值, 它决定了元素被拖放时的行为:

none     不可拖动

copy-move         复制并移动

only-copy            仅复制

only-move          仅移动

drop 也有 4 个取值, 它决定了放开鼠标后拖放的结果:

insert                    在鼠标位置插入

append                在最后面添加

prepend              在最前面添加

recycle                  删除

accept-drop 用通过 css 选择符决定了容器可以接受的被拖放对象范围.

在 HTMLayout 的 Demo 里面的 html_samples\drag-n-drop\ 目录下有相关示例.

行为属性

behavior: button;

通过 css 给元素附加特定的预定义的交互行为.

皮肤引擎内建有多种行为可供使用. 下面一节的内容将讨论 behavior 的使用.

behavior 行为属性

behavior 是界面引擎为了满足交互需求而扩展的特殊 css 属性.

通过为元素设定 behavior, 可以为几乎任意元素附加上交互行为, 从而将元素改造成具有特定功能的按钮,输入框等控件.

所有的 behavior 都是预先通过程序写好的.

示例分析

以下是 mx3 界面文件中 base\control.css 的一段 css :

/* checkbox button */a[type=”check”]{behavior: check;display: inline-block;

cursor: pointer;

margin: 2 0;

padding: 0 4 0 22;

min-width: 22px;

min-height: 18px;

line-height: 18px;

white-space: pre;

text-decoration:none;

background: url(images/check.png) no-repeat 0% 50%;

}

a[type=”check”]:checked{

background-image:url(images/checked.png);

}

默认情况下, 标记会作为链接处理.

而在这里, 我们通过给它指定 behavior: check; 为它附加了复选框的交互行为.

在使用时, 此元素会根据用户的点击, 修改自己的 :checked 状态. 从而改变自己的背景图像表现.

不同的 behavior, 在使用时会有不同的状态和相关的属性进行互动.

例如 behavior: menu; 会把附有该行为元素下的

下面的介绍中会简要的描述部分常用 behavior 和它们相关状态和属性.

常用 behavior 介绍

行为

简介

behavior: button;

按钮行为.附加了此行为的元素会具有标准的按钮行为.属性:・         value=”caption” –  按钮标题文本

状态:

・         :hover  –  悬停

・         :active  –  按下

・         :focus  –  获得焦点

・         :disabled  –  被禁用

behavior: clickable;

将元素变为可点击.附加了此行为的元素才能在点击后触发程序的消息.与 button 行为的唯一不同是具有此行为的元素不会获得焦点.状态:

・         :hover  –  悬停

・         :active  –  按下

・         :disabled  –  被禁用

behavior: check;

复选框行为.属性:・         checked  –  初始选定状态. 取值范围:  “true”, “false”, “undefined”(半选定状态).・         mixed  –  半选定状态.

状态:

・         :hover  –  悬停

・         :active  –  按下

・         :focus  –  获得焦点

・         :disabled  –  被禁用

使用中会出现比较复杂的复合状态, 例如:

input[type=”check”][mixed]:checked:disabled

behavior: radio;

单选框行为.属性:・         name=”group” –  用于区分单选框组(必须)・         value=”0″  –  对应选项的值

状态:

・         :hover  –  悬停

・         :active  –  按下

・         :focus  –  获得焦点

・         :disabled  –  被禁用

behavior: edit;

文本输入框行为.属性:・         value=“text” –  初始文本.・         size=”20″  –  元素的初始宽度.

・         maxlength=”12″  –  最大文本长度.

・         filter=“0~9” –  限制可输入的字符内容. 支持单个字符或字符范围.

”.@0~9a~zA~Z” –  允许输入所有字母和数字以及 . 和 @ 字符(email).

“^.,-”  –  允许输入除 . , – 之外的任意字符.  ^ 作为排斥标记使用.

・         novalue=“please input”  –  如果文本框为空, 则显示此属性指定的文本.

你可以通过 :empty 伪类来修改这个提示文本的样式.

状态:

・         :hover  –  悬停

・         :focus  –  获得焦点

・         :disabled  –  被禁用

・         :empty  –  内容为空

behavior: password;

密码框输入行为.属性和状态同 behavior: edit;额外的属性:・         password-char=“#”  –  指定密码提示字符为 #.

behavior: select;

下拉列表框行为.内部结构同 HTML 中的 元素用法.列表条目元素为 元素或具有 role=”option” 属性的元素.属性:

・         size=”8″  –  显示为多行选择列表框.

・         multiple   –  允许多选

・         multiple=”checks”  –  允许多选, 且每个条目前显示复选框.

状态:

・         option:current  –  当前选定的条目.

behavior: menu;

菜单行为.此行为定义了一个菜单元素.此元素中包含的

菜单元素被调用时, 它的父元素会被设置为调用它的元素.

behavior: menu-bar;

菜单栏行为.此行为与菜单的唯一不同.

behavior: popup-menu;

打开弹出菜单.具有该行为的元素在点击后会打开子元素中的第一个

・         align-popup=”top”  –  指定弹出菜单的位置. “top”, “left”, “right”, “bottom”(默认).

behavior: progress;

进度条行为.被绑定此行为的元素, 其前景图像会按比例拉伸,作为进度条绘制.属性:・         value=”5.1″  –  当前值. 可以是小数.

・         maxvalue=”100″  –  最大值. 可以是小数.

behavior: path;

路径缩略显示行为.将过长的路径显示为中间加省略号的缩略形式.例如:“

oot\test\appp123456\assets\scripts\character\max.dat” 显示为:

“

oot\test\appp123….\max.dat”

behavior: file-icon;

文件图标显示行为.如果没有指定大小. 此行为会提取最符合显示区域大小的图标显示.属性:・         filename=”test.exe”  –  获取指定可执行文件的图标

・         filename=”.doc”  –  获取指定扩展名的系统图标

・         filename=”.”  – 文件夹图标

・         filename=”..”  –  驱动器图标

・         filename=”\”  –  我的电脑图标

・         icon-size=”small”  –  图标大小. 可取值: “small”, ”large”. 默认为 “small”.

CSSS! 脚本

behavior 并不适合实现那些细碎却有没有通用性的交互操作.

这时我们就需要用 CSSS! 来解决问题了.

顾名思义,  CSSS! = CSS +Script, 它是写在 CSS 中的脚本.

它的语法其实很简单.

让我们看看下面这段 CSSS! 脚本:

.item {hover-on! :ele = $1( input.url ) ,ele:empty == true ?

(self.value = “empty”) #

(self.value = “filled”),

ele:hover = true,

self::width = ele.box-content-width(),

self.$(.icon) -> @(ele) ele::background = “#CCC” 实践证明：此处是错误的，应该用 rgb 函数，否则没效果。例如：background = rgb(255,0,0)

;

}

它的格式看起来就像是个扩展的 CSS 属性一样.

一些要注意的地方:

・         CSSS! 语句使用逗号”,”作为语句结束符.

・         CSSS! 中的字符串只能双引号标识, 不能使用单引号(“string”).

・         CSSS! 中使用关键字 self 表示当前对象.

截获事件

.item {hover-on! :ele = $1( input.url ) ,ele:empty == true ?

(self.value = “empty”) #

(self.value = “filled”),

ele:hover = true,

self::width = ele.box-content-width(),

self.$(.icon) -> @(ele) ele::background = “#CCC”

;

}

hover-on! 是我们的脚本要处理的事件标识.

当具有 .item 类的元素被鼠标悬停时, 会触发此事件并执行里面的代码.

下面是完整的事件支持列表:

事件

说明

hover-on!hover-off!

鼠标悬停/离开时触发

active-on!active-off!

鼠标按下/抬起时触发

click!

鼠标单击时触发

focus-on!focus-off!

获得/失去焦点时触发

key-on!key-off!

键盘的按键按下/抬起时触发通过 key-code() 函数获取按键信息.key-code() 获得的按键信息可能是一个用单引号包含的有效字符(‘a’, ‘4’, ‘$’)或是下列预定义值之一:’RETURN’, ‘LEFT’, ‘RIGHT’, ‘UP’, ‘DOWN’, ‘PRIOR’, ‘NEXT’, ‘TAB’, ‘HOME’, ‘END’, ‘DELETE’, ‘INSERT’, ‘BACK’

assigned!

所属的样式被应用到元素上时触发

value-changed!

元素的值发生变化时触发

validate!

表单提交前的数据验证事件

timer!

定时触发器配合 start-timer(ms) 和 stop-timer() 函数使用.start-timer(ms) 中的参数单位为毫秒.

animation-start!animation-step!animation-end!

动画控制事件 animation-start! 在调用了元素的 element.start-animation() 方法后触发.animation-step! 事件处理的最后必须返回一个整数(下次执行的间隔毫秒数). 例如: return 500;

如果 animation-step! 返回的是 return cancel; 则动画中止, 同时触发 animation-end! 事件.

size-changed!

元素大小发生改变时触发

获取元素

接下来看看事件处理的代码的第一句:

.item {hover-on! :ele= $1( input.url ) ,ele:empty == true ?

(self.value = “empty”) #

(self.value = “filled”),

ele:hover = true,

self::width = ele.box-content-width(),

self.$(.icon) -> @(ele) ele::background = “#CCC”

;

}

这是个赋值语句. $1() 函数根据参数 “input.url” 返回第一个匹配此 css 选择符的元素.

然后将这个元素的引用赋给 ele 变量.

这里要注意, CSSS! 的语句使用逗号 “,” 分割, 不是我们习惯的”;”.

在 CSSS! 中获取元素有如下几个函数可用:

事件

说明

$1(.item)

获取匹配 “.item” 的第一个元素

$(.item)

获取所有匹配 “.item” 的元素. 类似 AAuto中的 wbLayout.queryEles()函数

ele.$1(.item)

获取 ele 子元素中匹配”.item”的第一个元素

ele.$(.item)

获取 ele 子元素中匹配”.item”的所有元素类似 AAuto中的 ele.queryElements()函数

ele.$1p(.item)

获取父元素中匹配”.item”的最近的一个元素.

ele.$p(.item)

获取父元素中所有匹配”.item”的元素.

ele.parent()

获取父元素

ele.next()

获取同级的下一个元素

ele.previous()

获取同级的上一个元素

ele.child(3)ele.children()

获取第 3 个子元素. 参数范围 1 … ele.children().可以通过 ele.children() 获取子元素的数目.

访问元素的属性, 样式, 状态

.item {hover-on! :ele = $1( input.url ) ,ele:empty == true ?

(self.value = “empty”) #

(self.value = “filled”),

ele:hover = true,

self::width = ele.box-content-width(),

self.$(.icon) -> @(ele) ele::background = “#CCC”

;

}

代码中的三处展示了 3 种内容的访问方法:

语句

说明

ele:hover = false,ele:disabled = true,

通过”:”访问元素的状态.

在 AAuto中等价的写法是： ele.state.状态名 =状态值

ele.value = “string”,ele.name = “my_elem”,ele.disabled = true,ele.title = null,

通过”.”访问元素的属性值.

在 AAuto中等价的写法是： ele.属性名 =属性值注意部分属性值和状态是相互有关联的.

要删除一个属性, 只需要赋值 null 给它即可.

ele::width = 56px,ele::display = “none”,

通过”::”访问元素的 CSS 样式属性. 在 AAuto中等价的写法是： ele.style.样式名 =样式值

在 CSSS! 中有如下状态可在执行时使用:

状态

说明

ele:value

元素 DOM 节点的值.对于输入框这个值为输入的文本. 其他元素为内部的文本.

ele:index

元素在子元素的序号. 取值从 1 开始到 self.parent().children()

ele:hoverele:activeele:emptyele:readonlyele:disabled

ele:focusable

部分 CSSS!中常用的布尔型状态. (true/false)

访问元素的方法

.item {hover-on! :ele = $1( input.url ) ,ele:empty == true ?

(self.value = “empty”) #

(self.value = “filled”),

ele:hover = true,

self::width = ele.box-content-width(),

self.$(.icon) -> @(ele) ele::background = “#CCC”

;

}

这里的代码通过 .box-content-width() 函数获取元素当前的内容宽度.

元素有以下方法可供调用:

方法

说明

ele.start-timer(500)

开始触发元素的 timer! 事件. 参数为间隔的毫秒数.调用 ele.stop-timer() 或 return cancel; 可以结束触发.

ele.stop-timer()

停止触发 timer! 事件.

ele.scroll-to-view()

滚动页面, 保证元素可见.

ele.box–type–what()

这是个组合函数, 通过不同的 type 和 what 取值, 可以组合出多个函数.type 可取值:・         margin – 元素的 margin 框・         border – 元素的边框・         padding – 元素的 padding 框

・         content – 元素的内容框(内容的外轮廓).

・         inner – 元素的内部框

what 可取值:

・         left – 框的左坐标

・         right – 框的右坐标

・         top – 框的上坐标

・         bottom – 框的下坐标

・         width – 框的宽度

・         height – 框的高度

ele.x–what()ele.y–what()

获取元素的相对 x,y 坐标.what的取值可以是:・         parent – 相对于父元素的坐标值・         root – 相对于根元素()的坐标值・         view – 相对于当前窗口视图(window)的坐标值;

・         screen – 元素在屏幕上的绝对坐标

ele.start-animation()

开始元素动画.触发动画事件 animation-start! 和 animation-step!  在 return cancel 时触发 animation-end! 事件.

ele.text-width(“string”)

返回以当前元素样式显示时, 输入字符串 “string” 的宽度(以像素计算)

ele.min-intrinsic-width()ele.max-intrinsic-width()ele.min-intrinsic-height()ele.max-intrinsic-height()

获取元素的内容最小/最大宽高.

条件判断语句

.item {hover-on! :ele = $1( input.url ) ,ele:empty == true?

(self.value = “empty”)#

(self.value = “filled”),

ele:hover = true,

self::width = ele.box-content-width(),

self.$(.icon) -> @(ele) ele::background = “#CCC”

;

}

CSSS! 的条件判断语句格式很简单(类似 Javascript 或 AAuto 中 的 三元操作符 … ? … : … 组合，区别是用#号代替了冒号 ):

判断条件 ? (条件为真时的操作)

或者:

判断条件 ? (条件为真时的操作) # (条件为假时的操作)

一般分多行写更清晰点:

判断条件 ?

(条件为真时的操作) #

(条件为假时的操作)

操作的语句建议使用括号包起来, 避免解析出错.

作用类似于 AAuto 中的条件判断语句：

If( 判断条件 )[

条件为真时的操作

}

Else[

条件为假时的操作

}

函数

.item {hover-on! :ele = $1( input.url ) ,ele:empty == true ?

(self.value = “empty”) #

(self.value = “filled”),

ele:hover = true,

self::width = ele.box-content-width(),

self.$(.icon) ->@(ele) ele::background = “#CCC”

;

}

上面加红的部分其实是定义了一个匿名函数.

对于一般的函数, 定义的格式如下:

foo = @( a, b) c = a + b, return c

AAuto 中类似的定义函数的代码如下：

foo = function( a, b ){ c = a + b; return c; }

调用时使用  foo(12, 35) 即可.

枚举语句

.item {hover-on! :ele = $1( input.url ) ,ele:empty == true ?

(self.value = “empty”) #

(self.value = “filled”),

ele:hover = true,

self::width = ele.box-content-width(),

self.$(.icon) -> @(ele) ele::background = “#CCC”

;

}

上面红色的语句执行的结果是:

遍历当前鼠标悬停的 .item 元素内的所有 .icon 元素, 并将他们的背景设置为灰色.

枚举语句格式:

集合-> @(局部变量名)操作语句

AAuto 中类似的遍历集合的代码如下：       for 局部变量名 in 集合{

//其他操作语句 }

枚举通常被用于处理元素集合.

小结

CSSS! 作为基于 CSS 的扩展脚本, 有助于实现部分纯界面交互的操作控制.

在这里我们只能对它做简要的介绍.

更详细的 CSSS! 说明资料请访问: