mx3-皮肤系统参考文档.doc
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.iniskin3.iniskin3.ini (替换为用户皮肤内容)preview.jpgpreview.jpgpreview.jpg未提供thumbnail.jpgthumbnail.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.jpg缩略图/main/*.*主界面定义文件/skin.xxx/*.*其它样式的主界面定义文件皮肤定义文件 skin3.ini此文件必须保存为 Unicode 编码格式.下面是一个皮肤定义文件的范例. 绿色文字为注释和说明:/*/ BEGIN OF FILE/=/ 皮肤信息节/ 必须/=skin/ 皮肤定义框架的版本号/ 必须/ 用于初步检查皮肤是否符合程序运行要求/ 必须与皮肤制作时使用的框架版本相对应./ 赋值超过程序支持的版本号也将被视为无效./ 此版本号可以通过查阅皮肤系统参考文档获得./ 格式为: 数字.数字.数字 例如: 1.0.0_def=1.0.0/ 皮肤的唯一标识/ 必须/ 用于更新检查等/ 可以通过在线工具生成.guid=2b8c867a-eb96-4f30-94e6-f752c612054a/ 皮肤的版本号/ 必须/ 用于更新检查等/ 格式为: 数字.数字.数字 例如: 1.0.0version=1.0.0/ 作者/ 可选/ 用于显示的皮肤作者字符串/ 对于多语言环境, 可以用语言代码指定字符串 (见下例的 authorzh)author=Somebodyauthorzh=某人/ 邮件地址/ 可选/ 如果提供, 将显示联系的邮件地址email=somebody / 网站地址/ 可选/ 如果提供, 将显示网站地址website= / 授权/ 可选/ 如果提供, 将显示授权信息license = Creative Commons Attribution-NonCommercial 3.0/=/ 样式列表/ 必须/ 默认样式使用 main 作为id./=styles/ 样式定义/ 可选/ 格式: 样式ID = * / 默认的 main 样式条目必须存在.main = */ 其他样式条目classic = */=/ 默认样式的定义/ 必须/=style-main/ 样式名称/ 必须name=My Skinnamezh=我的皮肤/ 缩略图/ 必须/ 支持 JPG 和 PNG 格式/ 图像尺寸不小于 100x100thumbnail=thumbnail.jpg/ 此样式基于的内建皮肤/ 可选/ 默认使用内建的现代皮肤./ 可取值: modern(现代风), classic(传统风)baseStyle=modern/ 此样式的基准目录/ 可选/ 默认使用 main 目录/ 多个样式可以使用相同的基准目录 (方便制作只替换背景或局部元素的子样式)mainFolder = main/ 此样式的入口HTML文件/ 可选/ 默认使用指定目录下的 index.htmmainFile = index.htm/ 强制使用无边框窗口模式/ 可选/ 程序的默认行为是开启了 aero 效果的系统上显示 aero 窗体作为背景./ 不支持 aero 的系统上调用此模式, 使用自定义的窗体作为背景./ 通过设置此选项可以强制使用无边框窗口模式./ 取值: 0(默认) 或 1winFrameless= 0/ 隐藏窗口控制按钮/ 可选/ 通过修改此设置可以去掉窗口上的最小化/最大化/关闭按钮/ 取值: 0(默认) 或 1noWindowControls = 0/=/ 其他样式的定义/ section 命名规则: “style-“+样式ID/ 必须/=style-classicname = Classic Testnamezh = 经典测试thumbnail = thumbnail.classic.jpgpreview = preview.classic.jpgmainFolder = mainmainFile = index.classic.htmnoWindowFrame = 1noWindowControls = 1/ END OF FILE/*皮肤文件的格式和内容皮肤文件的类型主要是 HTML 文件及其附属的 CSS 文件和图像文件.HTML 文件编码为 UTF-8. 内容与一般 HTML 文件相同.· 支持用 <include>嵌入其它文件内容.· 支持更多扩展的HTML标记 <button> <menu>等.完整的扩展功能列表请参考“mx3-皮肤引擎特性”文档.CSS 文件编码为 UTF-8. 内容与一般 CSS文件相同.· 支持自定义元素的交互行为: behavior: button; 将元素定义为按钮.· 支持扩展的布局模式: flow: horizontal; 让 div 等元素水平排列.· 支持扩展的单位: width: 50%; 表示占用剩余横向空间的一半.· 支持扩展的效果: background-position, background-image-transformation 等. · 支持CSSS!脚本控制.完整的扩展功能列表请参考“mx3-皮肤引擎特性”文档.图像文件目前支持的文件格式有:JPG, GIF, PNG, APNG(动画PNG文件).多语言支持在皮肤中, 语言字符串以 $标记$ 形式出现.在程序运行时, 会将此类字串自动替换为相应的语言文本.多语言支持只处理皮肤中的 htm 文件.一般建议对照内置的皮肤进行修改, 不要删除其中的语言字符串标记.完整的字串列表请查看 mx3安装目录下的 Languageen.ini示例:<div class=”alert-text”>$UserLoggedIn$</div>皮肤与界面之间的交互扩展属性为了实现一些特殊效果. Mx3的界面库相对与 html 而言, 还增加了部分扩展属性.扩展属性说明image-stretch-quality="high"绑定此属性的元素, foreground-image 出现拉伸时会以高精度算法处理, 避免出现锯齿.特殊对象Mx3 的界面元素中有一部分行为由主程序直接控制的元素.此类元素分为两类:· 具有特定交互行为的元素. 例如可拖放整个窗口的标题栏等.· 用于容纳程序生成内容的容器元素. 例如标签栏等.绑定后的具体行为请阅读下面列表的说明.此类元素的绑定通过 mx-object 属性进行. 一个元素可以绑定多个特殊对象标记.注意: 如果同时绑定多个写入内容的标记, 会造成功能不正常.示例:<div class=”win-title” mx-object=”win.caption win.gripper” />以上元素的行为将像windows标题栏一样.特殊对象说明特殊行为win.gripper绑定了此类型的元素在鼠标拖动时可以移动窗口.popup.stay在用户触发一个点击操作后, 不隐藏弹出菜单和浮动面板全局对象win.caption窗口标题.元素的innerText会被填入标题文本.标题格式为: 页面标题 - 傲游产品名 版本号win.controlButtonZone窗口控制按钮区域的高和宽会设置到此元素的 width 和 height 属性上.win.maximize最大化按钮标记.程序用于处理最大化/还原操作的tooltipui.statusBar程序用于调整大小ui.tabBar程序用于调整大小mx.name程序标题.填入元素的innerText.mx.version程序版本号.填入元素的innerText.status.message状态栏信息容器.用户账户user.name用户名.填入元素的innerText.user.email用户邮箱.填入元素的 innerTextuser.avatar头像图片元素. foreground-image 会被替换为用户头像.user.avatarContainer头像标记.主界面的气泡提示会根据此元素位置弹出.user.levelMark用户等级对象.基本HTML结构:<div mx-object=”user.levelMark” title=”升级时间说明”><div class=”star” level=”3” / ><div class=”star” level=”3” / ><div class=”star” level=”2” / ><div class=”star” level=”1” / ></div>标签tabbar.container标签栏容器. 唯一.标签条目会被填入到innerHTML中. 内部元素结构:<div class="tab"><div class="icon><div class="text">Maxthon Lite</div><div class="close" /></div>tab.list标签列表条目容器.标签条目会被填入到innerHTML中.内部元素结构:<li><div class="icon"/> Text</div>页面page.icon当前页面的站点图标程序会设置foreground-image 更改图标.page.title当前页面的标题.元素的innerText会被填入标题文本. page.container页面容器. 唯一.会在此容器的内容区域中绘制页面内容.地址栏addressBox.input地址栏文本框.必须为 <text> 元素.程序读写此元素的value作为当前页面地址.addressBox.wrapper地址栏输入框容器. 必须存在.地址栏下拉列表的父对象. 地址栏下拉列表与它的左边缘对齐.addressBox.iconTray地址栏后部放置功能图标的占位符.addressBox.siteSafety地址栏后部的安全提示按钮.page.switchEngineButton切换引擎按钮对象.用于在自动切换和鼠标悬停时,定位提示气泡. Feed 相关feed.discoveryIcon发现新 Feed 的提示图标(地址栏 addressBox.iconTray 内).feed.discoveryList发现的 Feed 列表容器.文件嗅探fileSniffer.notifyIcon地址栏的文件嗅探提示图标搜索栏searchBox.input搜索栏文本框.必须为 <text> 元素.程序读写此元素的value作为搜索关键字.search.engineList搜索引擎选择列表容器搜索引擎条目会被填入到innerHTML中.内部元素结构: <li type="radio">Search Engine</div>search.icon当前默认搜索引擎图标.程序会设置 foreground-image 更改图标.历史history.restoreLast恢复上一关闭页面按钮.用于定位弹出提示.history.navList前进/后退历史列表条目容器.页面条目会被填入到innerHTML中.内部元素结构 :<li><div class="icon"/> Page </div>history.recentList撤销列表条目容器页面条目会被填入到innerHTML中.内部元素结构 :<li><div class="icon"/> Page </div>收藏fav.menuButton激活收藏菜单的按钮.程序会在特定快捷键按下时触发此按钮的单击行为.fav.rootFolderMenu收藏菜单容器收藏条目会被附加到它里面的fav.listPlaceholder 对象之后.条目元素结构 :<li><div class="icon" /> Fav Item </li>fav.folderMenu收藏文件夹子菜单的模版. 必须为 <menu/> 类型的元素.程序会自动根据此模版生成子菜单.收藏条目会被附加到它里面的fav.listPlaceholder 对象之后.fav.listPlaceholder收藏菜单内容插入位置标记.收藏的条目会附加在此标记之后.<div mx-object="fav.listPlaceholder" />favbar.moreButton收藏栏条目过多时出现的小箭头.点击展开菜单显示未完全的内容.溢出的条目会被填入 #MX-MORE-FAV-LIST.favbar.moreList收藏栏条目过多时, 放置溢出条目的容器.唯一.收藏条目会被附加到它里面的fav.listPlaceholder 对象之后.内部元素结构 :<!-目录 -><div class="item dropdown"> <div class="icon" /> <div class="text"> Fav Folder </div></div><!-收藏条目 -><div class="item dropdown"> <div class="icon" /> <div class="text"> Fav Item </div></div>弹窗和广告拦截popupBlocker.count当前页面拦截到的弹窗数目.数目会被填入innerText.popupBlocker.list拦截到的弹窗列表容器最近10个弹窗条目会被填入innerHTML.内部元素结构 :<li><div class="icon"/>Title or URL</li>adHunter.count当前页面被拦截的广告数目.数目会被填入innerText.缩放zoom.factor缩放比例容器.当前页面的缩放比例文本会被填入innerText.zoom.slider页面缩放滑动条.类型必须为 inputtype="hslider" 或 inputtype="vslider".程序会读写其 value 进行页面缩放.其它skin.list皮肤菜单条目容器.皮肤条目会被填入innerHTML.内部元素结构:<li type=”radio”>Skin Name</li>proxy.list代理菜单内容.代理服务器条目会被填入innerHTML中.内部元素结构:<li type=”radio”>Proxy Name</li>language.list语言菜单容器.语言条目会被填入innerHTML.内部元素结构 :<li>Language Name</li>encoding.list页面编码菜单容器.编码条目会被填入innerHTML.内部元素结构 :<li>Encoding Name</li>命令触发器Mx3 采用侦听界面元素的自定义属性 mx-click=”命令” 来触发命令. 每个元素只能绑定一个命令.绑定此属性的元素必须绑定 behavior: button; 或 behavior: menu-item; 的CSS属性. 否则无法触发命令.默认绑定了行为的元素:· <button> 和 <input type=”button”>元素默认绑定 behavior: button; 行为.· <menu> 元素中的 <li> 默认绑定behavior: menu-item; 行为.鼠标右键点击元素则采用自定义属性 mx-right-click=”命令” 来触发.双击元素采用自定义属性 mx-dbclick=”命令” 来触发.命令的快捷键文本可以通过在元素上添加自定义属性 mx-hotkey-label=”命令” 来指定输出.程序会根据命令的快捷键绑定情况将对应的文本填入元素的 innerText.如果一个命令设置有多个快捷键, 那么最简单的组合会被填入. (例如一个命令被同时绑定快捷键 F2 和 Ctrl+N, 那么界面上输出的只有 F2)示例:<div style=”behavior: button;” mx-click=”page.setHome”>$set_as_homepage$<span mx-hotkey-label=”page.setHome” /></div>目前支持的命令列表:* 标记了 K 的条目是可以绑定快捷键的条目.* 快捷键中标记有锁的条目不能更改和替代.* 快捷键中标记有全局的条目需要在系统级别可用.命令默认快捷键说明地址栏相关 addressBox.focusKF6Alt+D将焦点切换到地址栏addressBox.goK转到网址或搜索地址栏为空时, 此命令无效.addressBox.searchK搜索地址栏内输入的内容地址栏为空时, 此命令无效.addressBox.showListKF4显示地址栏下拉列表搜索框相关 searchBox.focusKCtrl+E将焦点切换到搜索栏searchBox.go执行搜索搜索栏为空时, 此命令以空字串执行搜索.标签相关 tab.newKCtrl+TCtrl+N新建标签tab.nextKF2Ctrl+Left激活后一个标签tab.previousKF3Ctrl+RightCtrl+Tab激活前一个标签tab.activate( index )激活指定的标签页.参数 index 取值: 从 0 开始的页面索引.*主要内部使用tab.close关闭标签 *用于标签右键菜单tab.closeCurrentKCtrl+WCtrl+F4关闭当前标签tab.closeAllK关闭所有标签tab.closeOtherKCtrl+Shift+W关闭其它标签tab.closeLeftK关闭左侧的标签tab.closeRightK关闭右侧的标签浏览相关 nav.homeKAlt+Home首页nav.pasteAndGoKCtrl+Shift+N粘贴并打开nav.pasteAndSearchK粘贴并搜索nav.refreshKF5Ctrl+R刷新nav.refreshAllKShift+F5刷新所有标签nav.forceRefreshKCtrl+F5完全刷新. 无视缓存状态和设置.nav.stopKEsc停止nav.stopAllKShift+Esc停止所有标签页面相关 page.findKCtrl+F页面内查找page.saveKCtrl+S另存为对内建页面(收藏,历史,快速拨号等), 此命令无效.page.saveAsImageK保存页面为图像page.saveAsAppK保存页面为应用page.printKCtrl+P打印page.printPreviewK打印预览page.copyUrlK复制URLpage.copyTitleAndUrlK复制页面标题和URLpage.setHomePageK设置当前页面为首页page.switchEngineK切换浏览引擎对内建页面(收藏,历史,快速拨号等), 此命令无效.page.viewSourceK查看源代码page.setEncoding( charset )设置当前页面的编码特殊参数: · auto - 自动选择page.muteK静音当前页面page.upKPageUp上翻一页page.downKPageDown下翻一页page.topKCtrl+Home滚动到页面顶部page.bottomKCtrl+End滚动到页面底部页面缩放 zoom.inKCtrl+Ctrl+=放大当前页面zoom.outKCtrl+-缩小当前页面zoom.actualKCtrl+0设置当前页面缩放比例为100%历史相关 history.backKBackspaceAlt+Right后退history.forwardKAlt+Left前进history.go( index )转到页面前进/后退历史的指定位置.参数 index 取值: 从 0 开始的历史索引.传入错误或超出范围的参数时, 此命令无效.history.restoreLastKAlt+Z重新打开上一个关闭的页面history.clearRecentListK清除最近关闭页面历史列表history.openClearDialogKCtrl+Shift+Del打开清除历史对话框history.openKCtrl+H打开历史收藏内容相关 fav.openManagerKCtrl+Shift+B打开收藏管理器fav.addAllK添加所有页面到收藏fav.item.addKCtrl+D添加当前页面到收藏fav.item.addToFolder添加当前页面到指定收藏目录fav.item.open打开收藏条目fav.item.edit编辑收藏条目fav.item.delete删除收藏条目fav.item.copyUrl复制收藏条目URLfav.item.copyTitleAndUrl复制收藏条目标题和URLfav.item.replace将条目替换为当前页面fav.item.toggleMostFav切换最爱收藏fav.folder.add添加收藏目录fav.folder.edit编辑收藏目录fav.folder.delete删除收藏目录fav.folder.openAll打开收藏目录下所有条目fav.folder.newFolder新建子文件夹fav.folder.sortByTitle按标题排序收藏目录内容fav.folder.toGroup转换为快捷组fav.group.open打开快捷组fav.group.edit编辑快捷组(仅名称和位置)fav.group.delete删除快捷组fav.group.toFolder转换为文件夹广告过滤 adHunter.toggleK启用/禁用广告猎手对内建页面(收藏,历史,快速拨号等), 此命令无效.adHunter.toggleRuleSubscription切换是否订阅广告规则adHunter.editRuleK编辑广告过滤规则对内建页面(收藏,历史,快速拨号等), 此命令无效.adHunter.enterClickMode进入点选屏蔽模式对内建页面(收藏,历史,快速拨号等), 此命令无效.adHunter.showLogK查看过滤日志popupBlocker.toggleK启用/禁用弹窗过滤智能填表magicFill.saveK智能填表, 保存当前表单magicFill.fillK智能填表, 填写当前页面的表单下载downloader.openKCtrl+J打开下载管理器downloader.addTaskK添加一个新下载任务截图snapScreen.regionK区域截图snapScreen.pageK页面截图 (不询问保存位置)翻译translate.run执行默认的翻译行为translate.selectedTextK翻译选定的文字translate.pageK翻译整个页面选项option.open打开选项.option.open( section )打开指定的选项页面.可以用参数指定选项中的特定页面:· General : 常规选项· SearchEngine : 搜索引擎管理· Tab : 标签设置· MouseGesture : 鼠标手势· MagicFill : 智能填表· SmartBox : 智能地址栏· Display : 显示/其它· Advanced : 高级选项开发工具devtools.openKCtrl+Shift+I开发者工具对内建页面(收藏,历史,快速拨号等), 此命令无效.全局命令 cmd.helpKF1帮助cmd.visitWebsite访问官方网站cmd.visitForum访问官方论坛cmd.sendFeedback发送反馈 (转向论坛)cmd.checkUpdate检查更新cmd.about关于cmd.exitAlt+F4锁退出程序(强制)与是否最小化到任务栏等其它选项无关cmd.setProxy( proxyID )设置代理服务器内置参数: none, iecmd.setFavBarRootFolder设置收藏栏展示的目录cmd.showSiteSafetyInfo显示站点安全提示气泡cmd.openImportExportDialog打开导入导出对话框界面 ui.fullScreenKF11全屏幕ui.splitScreenKF10拆分屏幕ui.customize打开自定义界面对话框ui.setSkin( skinId )设置皮肤参数 skinID :· modern : 现代皮肤· classic : 经典皮肤· 其它皮肤使用内建ID处理.ui.setLanguage( languageId )设置语言内置参数: defaultui.to
