mx3-皮肤引擎特性.docVIP

MX3 皮肤引擎特性 对应皮肤框架版本号: 1.0.11 文档版本: 1.0.0 阅读本文档需要一定的 HTML CSS 基础. 简述 Mx3 使用的界面引擎是基于 HTML 的轻量级渲染引擎. 修改 mx3 的界面与修改网页一样方便灵活. 此界面引擎基于 HTMLayout 开发, 关于 HTMLayout 的更多信息请访问以下网站: /htmlayout/main.whtm 相关演示可以下载 HTMLayout 的Demo文件包查看: /htmlayout/HTMLayoutDemo.zip (下载后解压. 启动 bin\browse.exe, 然后用它打开 html_samples 目录下的文件查看.) 界面引擎的结构 mx3的界面通过下面4个方面定义: HTML 定义界面的基础结构 CSS 样式 定义界面元素的表现 CSS 的 behavior 扩展属性 定义界面元素的基础交互行为 CSSS! 脚本 为界面提供简单的脚本控制能力 我们会在后面的内容中对它们逐一介绍. HTML支持 界面的 HTML 文件奠定了界面的基础层级和结构. mx3 的界面引擎的HTML 支持以HTML 4.0规范为基础, 在此基础上又扩展了一些特殊标记. 这里仅介绍mx3界面中用到的基本元素. 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 的元素都会被当作菜单项处理. mx3 界面中菜单的定义书写格式如下: menu id=MY_MENU !-- 一般的菜单项 -- liMenu Item/li !-- 带图标和快捷键标签的菜单项 -- li div class=icon/ Menu Item with Icon and Shortcut Label span mx-hotkey-label={command.id} /li !-- 横线分隔符 -- hr/ !-- 子菜单 -- li Sub Menu menu liSub Menu Item 1/li liSub Menu Item 2/li /menu /li !-- 带子菜单的命令 -- div class=split-button liMenu Item/li li class=arrow menu liChild Item 1/li liChild Item 2/li /menu /li /div /menu 其他扩展元素 还有很多其它的扩展元素, 因为在 mx3 的主界面中没有使用到, 因此在这里不做介绍. mx3的对话框界面中用到很多控件, 这些元素在内建的 base\control.css中定义. 主界面的皮肤文件中没有使用此css文件. HTMLayout 的 Demo 文件包中 html_samples\form\ 目录下有大部分控件的范例文件. (包括进度条, 日期选择框, 数字输入框等) CSS支持 mx3皮肤引擎的css支持以 css 2.1 为基准. 同时支持部分 css3 的属性和选择符. 在这里不再介绍css2.1标准支持的属性和选择符, 只对界面用到的扩展属性和选择符进行介绍. 扩展选择符支持 选择符 说明 div:not(:first-child) 非状态选择符. 范例为匹配所有不是第一个子元素的 div 元素. div[foo^=val] 匹配foo属性值以val开头的 div 元素. 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 匹配父元素里唯一