简述
Mx3 使用的界面引擎是基于 HTML 的轻量级渲染引擎(HTMLayout).
修改HTMLayout的界面与修改网页一样方便灵活.
此界面引擎基于 HTMLayout 开发, 关于 HTMLayout 的更多信息请访问以下网站:
http://www.terrainformatica.com/htmlayout/main.whtm
相关演示可以下载 HTMLayout 的Demo文件包查看:
http://www.terrainformatica.com/htmlayout/HTMLayoutDemo.zip
(下载后解压. 启动 binbrowse.exe, 然后用它打开 html_samples 目录下的文件查看.)
界面引擎的结构
HTMLayout的界面通过下面4个方面定义:
・ HTML
定义界面的基础结构
・ CSS 样式
定义界面元素的表现
・ CSS 的 behavior 扩展属性
定义界面元素的基础交互行为
・ CSSS! 脚本
为界面提供简单的脚本控制能力
我们会在后面的内容中对它们逐一介绍.
HTML支持
界面的 HTML 文件奠定了界面的基础层级和结构.
HTMLayout 界面引擎的HTML 支持以HTML 4.0规范为基础, 在此基础上又扩展了一些特殊标记.
这里仅介绍HTMLayout界面中用到的基本元素.
<include> 标记
include 标记是一个扩展的特殊标记.
顾名思义, 就是引用并包含其他 htm文件.
它有以下两种书写格式:
<!– 引用一个外部文件的内容 –><include src=”header.htm” /> <!– 引用一个外部文件的内容. 在找不到文件时显示 “Missing: layout.htm” –> <include src=”layout.htm”> Missing: layout.htm </include> |
|---|
需要注意的是, 被引用的文件如果不在同级目录, 引用后里面的相对路径都会基于引用页的路径处理.
<menu>标记
menu 标记被用于定义界面中的菜单.
这个标记产生的元素默认是隐藏的, 只有被 popup-menu 行为触发时才显示.
<menu> 元素内部的 <li> 和带有 role=”menu-item” 的元素都会被当作菜单项处理.
HTMLayout 界面中菜单的定义书写格式如下:
<menu id=”MY_MENU”><!– 一般的菜单项 –><li>Menu Item</li> <!– 带图标和快捷键标签的菜单项 –> <li> <div /> Menu Item with Icon and Shortcut Label <span mx-hotkey-label=”{command.id}”> </li> <!– 横线分隔符 –> <hr/> <!– 子菜单 –> <li> Sub Menu <menu> <li>Sub Menu Item 1</li> <li>Sub Menu Item 2</li> </menu> </li> <!– 带子菜单的命令 –> <div > <li>Menu Item</li> <li > <menu> <li>Child Item 1</li> <li>Child Item 2</li> </menu> </li> </div> </menu> |
|---|
其他扩展元素
还有很多其它的扩展元素, 因为在 mx3 的主界面中没有使用到, 因此在这里不做介绍.
mx3的对话框界面中用到很多控件, 这些元素在内建的 basecontrol.css中定义.
主界面的皮肤文件中没有使用此css文件.
HTMLayout 的 Demo 文件包中 html_samplesform 目录下有大部分控件的范例文件.
(包括进度条, 日期选择框, 数字输入框等)
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_samplestranstions 目录下有相关的描述文档和示例.
交互相关扩展
对象的响应区域
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_samplesdrag-n-drop 目录下有相关示例.
网站上有对此的详细介绍: http://www.terrainformatica.com/wiki/h-smile/drag-n-drop
行为属性
behavior: button;
通过 css 给元素附加特定的预定义的交互行为.
皮肤引擎内建有多种行为可供使用. 下面一节的内容将讨论 behavior 的使用.
behavior 行为属性
behavior 是界面引擎为了满足交互需求而扩展的特殊css属性.
通过为元素设定 behavior, 可以为几乎任意元素附加上交互行为, 从而将元素改造成具有特定功能的按钮,输入框等控件.
所有的behavior 都是预先通过程序写好的.
示例分析
以下是mx3界面文件中 basecontrol.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); } |
|---|
默认情况下, <a> 标记会作为链接处理.
而在这里, 我们通过给它指定 behavior: check; 为它附加了复选框的交互行为.
在使用时, 此元素会根据用户的点击, 修改自己的 :checked 状态. 从而改变自己的背景图像表现.
不同的 behavior, 在使用时会有不同的状态和相关的属性进行互动.
例如 behavior: menu; 会把附有该行为元素下的 <li> 元素或设置了 role=”menu-item” 属性的元素当作菜单项.
下面的介绍中会简要的描述部分常用 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中的 <select>元素用法.列表条目元素为 <option> 元素或具有 role=”option” 属性的元素. 属性: ・ size=”8″ – 显示为多行选择列表框. ・ multiple – 允许多选 ・ multiple=”checks” – 允许多选, 且每个条目前显示复选框. 状态: ・ option:current – 当前选定的条目. |
behavior: menu; | 菜单行为.此行为定义了一个菜单元素.此元素中包含的 <li> 元素和具有 role=”menu-item” 属性的元素会被当作菜单项对待. 鼠标悬停的菜单项元素会被赋予 :current 状态. 菜单元素被调用时, 它的父元素会被设置为调用它的元素. |
behavior: menu-bar; | 菜单栏行为.此行为与菜单的唯一不同. |
behavior: popup-menu; | 打开弹出菜单.具有该行为的元素在点击后会打开子元素中的第一个 <menu> 或<popup>元素作为菜单. 如果有设置 menu 属性, 则打开其中css选择符对应的元素.属性: ・ menu=”#MENU_ID” – 指定要弹出的菜单元素. 取值为css选择符. ・ align-popup=”top” – 指定弹出菜单的位置. “top”, “left”, “right”, “bottom”(默认). |
behavior: progress; | 进度条行为.被绑定此行为的元素, 其前景图像会按比例拉伸,作为进度条绘制.属性: ・ value=”5.1″ – 当前值. 可以是小数. ・ maxvalue=”100″ – 最大值. 可以是小数. |
behavior: path; | 路径缩略显示行为.将过长的路径显示为中间加省略号的缩略形式.例如: “roottestappp123456assetsscriptscharactermax.dat” 显示为: “roottestappp123….max.dat” |
behavior: file-icon; | 文件图标显示行为.如果没有指定大小. 此行为会提取最符合显示区域大小的图标显示.属性: ・ filename=”test.exe” – 获取指定可执行文件的图标 ・ filename=”.doc” – 获取指定扩展名的系统图标 ・ filename=”.” – 文件夹图标 ・ filename=”..” – 驱动器图标 ・ filename=”\” – 我的电脑图标 ・ icon-size=”small” – 图标大小. 可取值: “small”, ”large”. 默认为 “small”. |
- ”.@0~9a~zA~Z” – 允许输入所有字母和数字以及 . 和 @ 字符(email).
- “^.,-” – 允许输入除 . , – 之外的任意字符. ^ 作为排斥标记使用.
・ novalue=“please input” – 如果文本框为空, 则显示此属性指定的文本.
- 你可以通过 :empty 伪类来修改这个提示文本的样式.
状态: ・ :hover – 悬停 ・ :focus – 获得焦点 ・ :disabled – 被禁用 ・ :empty – 内容为空 behavior: password; 密码框输入行为.属性和状态同 behavior: edit;额外的属性: ・ password-char=“#” – 指定密码提示字符为 #. behavior: select; 下拉列表框行为.内部结构同 HTML中的 <select>元素用法.列表条目元素为 <option> 元素或具有 role=”option” 属性的元素. 属性: ・ size=”8″ – 显示为多行选择列表框. ・ multiple – 允许多选 ・ multiple=”checks” – 允许多选, 且每个条目前显示复选框. 状态: ・ option:current – 当前选定的条目. behavior: menu; 菜单行为.此行为定义了一个菜单元素.此元素中包含的 <li> 元素和具有 role=”menu-item” 属性的元素会被当作菜单项对待. 鼠标悬停的菜单项元素会被赋予 :current 状态. 菜单元素被调用时, 它的父元素会被设置为调用它的元素. behavior: menu-bar; 菜单栏行为.此行为与菜单的唯一不同. behavior: popup-menu; 打开弹出菜单.具有该行为的元素在点击后会打开子元素中的第一个 <menu> 或<popup>元素作为菜单. 如果有设置 menu 属性, 则打开其中css选择符对应的元素.属性: ・ menu=”#MENU_ID” – 指定要弹出的菜单元素. 取值为css选择符. ・ align-popup=”top” – 指定弹出菜单的位置. “top”, “left”, “right”, “bottom”(默认). behavior: progress; 进度条行为.被绑定此行为的元素, 其前景图像会按比例拉伸,作为进度条绘制.属性: ・ value=”5.1″ – 当前值. 可以是小数. ・ maxvalue=”100″ – 最大值. 可以是小数. behavior: path; 路径缩略显示行为.将过长的路径显示为中间加省略号的缩略形式.例如: “roottestappp123456assetsscriptscharactermax.dat” 显示为: “roottestappp123….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:readonly ele: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 – 相对于根元素(<html>)的坐标值 ・ 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! 说明资料请访问:
http://www.terrainformatica.com/htmlayout/csss!.whtm
