html 流式布局 置顶,HTML 的轻量级渲染引擎(HTMLayout)特性说明文档

述

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 行为触发时才显示.

• 和带有 role=”menu-item” 的元素都会被当作菜单项处理.

  HTMLayout 界面中菜单的定义书写格式如下:

  • Menu Item

  • Menu Item with Icon and Shortcut Label

  • Sub Menu

    • Sub Menu Item 1
    • Sub Menu Item 2
• Menu Item
• • Child Item 1
  • Child Item 2

其他扩展元素

还有很多其它的扩展元素, 因为在 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;