mx3-皮肤系参考文档.docVIP

MX3 皮肤系统参考文档 对应皮肤框架版本号: 1.0.12 文档版本: 1.1.15 简述 Mx3 使用的界面引擎是基于 HTML 的轻量级渲染引擎. 修改 mx3 的界面与修改网页一样方便灵活. 在一般 CSS 支持的基础上, mx3 的界面库还支持更多扩展的效果和功能. 默认皮肤结构说明 软件自带的界面文件包的结构如下: skin3.ini 内建皮肤的定义文件. /base/ 基础样式 定义了全局共享的各种基本控件的样式. /icons/ 全局共享的默认图标 /main/ 默认皮肤目录 (现代风) /main.classic/ 经典皮肤目录 其他目录 内建界面的定义文件 * 默认皮肤里面只有 /main/ 目录可以通过皮肤包修改. 以下是默认皮肤的结构表: /main/ 主界面文件夹 /main/index.htm /main/index.css 主界面入口. 定义对各种基础样式文件的引用. 一般皮肤不建议替换. /main/layout.htm /main/layout.css 主界面布局. 可用通过此文件调整各个界面块的位置. /main/skin.css 供简单自定义用的 css 文件. 默认为空. 此文件在皮肤所有 css 文件的最后加载, 可以方便地重新定义已有的样式. 大部分简单的皮肤样式替换可以通过修改此文件实现. /main/window.css /main/menu.css /main/toolbar.css 用于改写基础css样式的额外文件. 基础css样式位于程序自带皮肤资源的 /base/ 目录内. /main/constants.css 界面内引用到的常数定义. 一般不要修改. /main/images/ 主界面图像 可以替换或是添加皮肤用到的图像. /main/navbar/ 导航栏 /main/navbar/index.htm /main/navbar/index.css 导航栏基础布局 /main/navbar/buttons.htm /main/navbar/buttons.css /main/navbar/buttons.menu.htm /main/navbar/buttons.menu.css 导航栏按钮及所依赖的菜单 /main/tabbar/ 标签栏 /main/favbar/ 收藏栏 /main/statusbar/ 状态栏 /main/objects/ 特殊界面对象文件夹 /main/objects/avatar.htm /main/objects/avatar.css 头像的皮肤定义文件. /main/main-menu/ 主菜单 (不建议修改, 避免版本更新后功能缺失.) /main/sidebar/ 侧边栏 main.classic 目录内的文件结构与 main 目录相同. 皮肤文件的处理机制 Mx3的皮肤文件采取同名替换机制处理. 主程序用皮肤包中的同名文件覆盖内置的皮肤文件, 整合成最后的皮肤内容. 这种方式能给皮肤制作者提供从简单到复杂的各层次皮肤支持. 皮肤作者可以只替换部分图标或是配色, 也可以替换掉整个mx3的界面. 例如: 用户皮肤包内文件 内置皮肤文件 合并后得到的皮肤内容 skin3.ini skin3.ini skin3.ini (替换为用户皮肤内容) preview.jpg preview.jpg preview.jpg 未提供 thumbnail.jpg thumbnail.jpg /main/index.htm /main/index.htm /main/index.htm /main/skin.css /main/skin.css /main/skin.css /main/images/big_logo.png (额外文件) 无对应文件 /main/images/big_logo.png 未提供 /main/layout.htm /main/layout.htm 皮肤包的内容 因为皮肤系统的灵活性, 所以每个皮肤包中除了 skin.ini 之外没有固定文件. 一个简单修改样式的皮肤可以只含有: skin3.ini 皮肤定义文件 /main/skin.css 皮肤的自定义 css 文件 一个只修改了界面图像的皮肤可以只含有: skin3.ini 皮肤定义文件 preview.jpg 预览图像 thumbnail.jpg 缩略图 /main/images/*.* 修改过的图标图像文件 一个彻底修改整个界面且有两套界面样式的皮肤含有: skin3.ini 皮肤定义文件 preview.jpg 预览图像 thumbnail.j