【仅供内部供应商使用,不提供对外解答和培训】
【仅供内部供应商使用,不提供对外解答和培训】
概要:一个主题的美观度是由大背景图片+主题配色+主题包三大部分共同决定的。整体配色主要由背景图片和配色决定,这些可以在决策平台-管理系统-平台外观里自己配置;整体的交互和布局主要是由主题包来完成的,代码写的越多,可以变化的东西也越多,当然背景图片和主题配色可以都通过开放的API来在主题包的代码中来修改,并不局限于平台外观配置。
fs-theme-[主题名] (注:主题名建议使用非中文) |----style.css //导入样式 |----theme.js //导入脚本 |----cover.png //主题包封面( 建议尺寸240*170 ) |----其他目录(包括需要使用到的一些自定义资源文件)
注:使用主题包导入功能的时候,只需要直接将上面所有文件打成zip包导入即可,不要对主题包根目录进行打包(zip包不需要包含“fs-theme-[主题名]”这个文件夹,只需包含其下的style.css、theme.js等文件即可),zip包名即为该主题的名字。zip包导入成功之后,会自动解压到 WebReport/WEB-INF/resources/fstheme/ 目录下、生成一个主题文件夹,文件夹名为“fs-theme-[zip文件名]”。
框架中总共有5大组件,分别是框架布局,目录树组件,多tab组件,Navigation组件和Gallery组件。
主题总配置:
{ isCustom: true, //是否是自定义主题 name: 'myTheme', //主题名称 //框架布局配置属性 config4frame: {}, //Navigation配置属性 config4navigation: {}, //目录树组件配置属性 config4MenuTree: {}, //多tab组件配置属性 config4tabPane: {} }
框架布局配置属性:
config4frame = { resizable: false, //是否可以拖拽分割线调整左右区域的大小 //上区域 north: { height: 80 //上方导航栏高度设置(不设置默认60px) visible: true //是否可见 }, //下区域 south: { visible: false //是否可见 }, //左区域 west: { width: 220 //宽度 }, //右区域 east: {} }
目录树组件配置属性:
config4MenuTree = { region: 'west', //默认所在区域 onBeforeInit: null, //初始化前事件,参数:[element] onAfterInit: null, //初始化后事件,参数:[element] onDataFilter: null, //节点数据过滤事件,参数:[node, childNodes] onBeforeNodeClick: null, //函数,节点点击前事件,参数: [node, $node, $li] onNodeClick: null, //函数,节点点击事件,参数: [node, $node, $li] onAfterNodeClick: null, //函数,节点点击后事件,参数: [node, $node, $li] onBeforeNodeCreate: null, //函数,节点创建前事件,参数:[node, $node, $li] onNodeCreate: null, //函数,节点创建事件,参数:[node, $node, $li] onAfterNodeCreate: null, //函数,节点创建后事件,参数:[node, $node, $li] onBeforeNodeExpand: null, //函数,节点展开前事件,参数:[node, $node, $li] onNodeExpand: null, //函数,节点展开事件,参数:[node, $node, $li] onAfterNodeExpand: null, //函数,节点展开后事件,参数:[node, $node, $li] onBeforeNodeCollapse: null, //函数,节点收起前事件,参数:[node, $node, $li] onNodeCollapse: null, //函数,节点收起事件,参数:[node, $node, $li] onAfterNodeCollapse: null, //函数,节点收起后事件,参数:[node, $node, $li] onBeforeDisplayNodes: null, //函数,节点展示前事件,参数:[node, $node, $li] onDisplayNodes: null, //函数,节点展示事件,参数:[node, $node, $li] onAfterDisplayNodes: null //函数,节点展示后事件,参数:[node, $node, $li] }
参数说明: 1. node - 节点对象 node = { text: '日报', //entry名 id: '213', //entry id isexpand: false, //是否展开 hasChildren: true, //是否具有子节点 ChildNodes: [], //子节点数组 isModule: false, //是否是标签页节点 level: 1 //树深度,从0计数 } 2. $node - 节点的DOM对象 3. $li - 节点所处的父层DOM对象
多tab组件配置属性:
config4tabPane = { region: 'east', //默认所在区域 style: 'alpha', //内置样式,包括alpha和bravo两种选择 tabWidth: 150, //单个tab标签的最大宽度 isCollapsible: true, //是否可以收起 hasHomepageBtn: false, //是否有主页按钮 onCreateTab: null, //函数,创建Tab标签时的操作,可修改标签样式(全局),参数:[$tab, entry] onSelectTab: null, //函数,选中每个Tab页面时的操作,可修改内容(全局),参数:[$tab, $content, entry] onCloseTab: null, //函数,关闭每个Tab页面时的操作(全局),参数:[$tab, $content, entry] afterLoadTab: null, //函数,加载每个Tab页面时的操作(全局),参数:[$tab, $content, entry] }
开放方法: 1. FS.tabPane.addItem(item) 方法: 向多tab组件里添加并打开一个tab,如果tab已经存在,则直接选中;若不存在,则添加并选中。 参数: item {JSON} item = { text: 'newTab', //必须, tab标签名 id: '213', //entry id src: 'http://www.finereport.com', //可选,正文内容为链接,iframe嵌入 onCreate: null, //函数,创建Tab标签时的操作,可修改标签样式,参数:[$tab, entry] onSelect: null, //函数,选中每个Tab页面时的操作,可修改内容,参数:[$tab, $content, entry] onClose: null, //函数,关闭每个Tab页面时的操作,参数:[$tab, $content, entry] afterLoad: null, //函数,加载每个Tab页面时的操作,参数:[$tab, $content, entry] }
config4navigation = { onBeforeInit: null, //初始化前事件 onAfterInit: null //初始化后事件 }
config4Gallery: { region: null //默认所在区域 }
自定义主题包实为引入的外部js、css以及资源文件等。
为了使用主题接口,首先我们在theme.js里需要对FS.Theme配置进行扩展,具体代码如下:
(function ($) { FS.THEME = $.extend(true, FS.THEME, { /**需要扩展的配置属性**/ }); })(jQuery);
内置Classic主题采用默认配置:
{ config4frame: { resizable: true, //上区域 north: { visible: true //是否可见 }, //下区域 south: { visible: false //是否可见 }, //左区域 west: { width: 230 //宽度 }, //右区域 east: {} }, config4Gallery: { region: null }, config4MenuTree: { region: 'west' }, config4tabPane: { region: 'east', style: 'bravo', isCollapsible: false, hasHomepageBtn: true }, config4navigation: { onBeforeInit: null, onAfterInit: null } }
内置Modern主题采用如下配置:
{ config4frame: { resizable: false, south: { visible: true } }, config4Gallery: { region: 'east' }, config4MenuTree: { onNodeExpand: function (node, $node, $parent) { return node.level !== 0; }, onNodeClick: function (node, $node, $parent) { $('#fs-frame-wrapper') .empty(); return false; } }, config4tabPane: { style: 'alpha', region: 'south', isCollapsible: true, hasHomepageBtn: false } }