FineReport数据决策系统中自定义主题包API接口由5大部件组成：框架布局、目录树组件、多tab组件、Navigation组件和Gallery组件。
首先，对theme.js进行总体配置:
(function ($) { FS.THEME = $.extend(true, FS.THEME, { /**需要扩展的配置属性**/ }); })(jQuery);
自定义对五大部件进行定义扩展：
(function ($) { FS.THEME = $.extend(true, FS.THEME, { /**需要扩展的配置属性**/ { //框架布局配置属性 config4frame: {}, //目录树组件配置属性 config4MenuTree: {}, //多tab组件配置属性 config4tabPane: {}, //Navigation配置属性 config4navigation: {}, //Gallery配置属性 config4Gallery: {} } }); })(jQuery);
框架布局配置属性：
config4frame = { resizable: false, //是否可以拖拽分割线调整左右区域的大小 //上区域 north: { visible: true //是否可见 }, //下区域 south: { visible: false //是否可见 }, //左区域 west: { 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] }
//注释：
node：节点对象；
$node：节点的DOM对象；
$li：节点所处的父层DOM对象。
获取管理系统各节点的URL为：FR.servletURL + "?op=fs_main&cmd=getmoduleitems"，参数为{id: -1}；
获取目录树节点的URL为：FR.servletURL + "?op=fs_main&cmd=module_getrootreports"，参数为{id: 1}。
多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] }
Navigation配置属性：
config4navigation = { onBeforeInit: null, //初始化前事件 onAfterInit: null //初始化后事件 }
Gallery配置属性：
config4Gallery: { region: null //默认所在区域 }
系统配色
更改style.cc文件如下：
高亮色:
.fui-bsb{ background-color: @color; } .fui-bsc{ color: @color; } .fui-bsd{ border-color: @color; }
图标外框色：
.fui-fhc{ color: @color; } .fui-fht{ text-shadow: 0 0 3px @color; }
底栏色：
.fui-seb{ background-color: @color; }
文字色：
.fui-fbc{ color: @color; } .fui-fbt{ text-shadow: 0 0 1px @color;
自定义主题包实例
theme.js：
(function ($) { FS.THEME = $.extend(true, FS.THEME, { config4navigation: { onAfterInit: function () { //移除搜索框 var self = this; $('#fs-frame-search').remove(); var $reg = $('#fs-frame-reg'); if ($reg.length > 0) { $reg.remove(); } //获取目录树节点重新绘制顶部导航栏 $.ajax({ url: FR.servletURL + "?op=fs_main&cmd=module_getrootreports", type: 'POST', data: {id: -1}, success: function (res, status) { var nodes = $.parseJSON(res); //目录树节点获取成功之后，获取管理系统各个节点 $.ajax({ url: FR.servletURL + "?op=fs_main&cmd=getmoduleitems", type: 'POST', async: false, data: {id: 1}, success: function(res){ nodes.push($.parseJSON(res)); } }); var $ul = $('<ul class="node-navi"/>').appendTo($('#fs-frame-header')); $.each(nodes, function (index, root) { var $node = $('<li class="node-navi-li"/>').appendTo($ul); $('<div/>').text(root.text) .appendTo($node) .click(function () { if($node.hasClass('node-select')){ return; } $ul.find('.node-select').removeClass('node-select'); $node.addClass('node-select'); var $dropdown = $(this).data('DATA'); if (!$dropdown) { $dropdown = $('<div class="node-pane"/>').appendTo($node); $(this).data('DATA', $dropdown); var $pane = $('<div class="node-pane-inner"/>') .css({ 'max-height': document.body.clientHeight - 90 }).appendTo($dropdown); if (root.hasChildren && root.ChildNodes) { var $other = $('<div class="node-wrapper"/>').appendTo($pane); $.each(root.ChildNodes, function (index, child) { if (child.hasChildren) { var $w = $('<div class="node-wrapper"/>').appendTo($pane); $('<div class="node-title"/>').text(child.text).appendTo($w); var childs = []; _collectAllChildNodes(child, childs); $.each(childs, function (i, n) { _createItem(n, $dropdown, $node).appendTo($w); }); } else { _createItem(child, $dropdown, $node).appendTo($other); } }); } else { return; } } $dropdown.fadeIn('fast'); $(document).bind('mouseover.nodepane', function (e) { var $t = $(e.target); if ($t.closest('.node-pane').length <= 0) { $node.removeClass('node-select'); $dropdown.fadeOut('fast'); $(document).unbind('mouseover.nodepane'); } }); } ); }); } }); } }, config4frame: { west: { 0 } } }); var _createItem = function (node, $pane, $node) { return $('<a href="#"/>').text(node.text) .click(function () { FS.tabPane.addItem(node); $node.removeClass('node-select'); $pane.hide(); $(document).unbind('mousedown.nodepane'); }); }; var _collectAllChildNodes = function (node, childs) { var self = this; if (!node.ChildNodes) { return; } $.each(node.ChildNodes, function (index, child) { if (child.hasChildren) { _collectAllChildNodes(child, childs); } else { childs.push(child); } }); }; })(jQuery);
style.css:
.node-navi{ position: relative; float: right; right: 30px; list-style: none; height: 60px; top: 0; } .node-navi li{ position: relative; float: left; left: 0; display: block; height: 60px; line-height: 60px; color: #fff; font-size: 14px; padding: 0 15px; cursor: pointer; } .node-navi li:hover{ color: #6fd3ff; } .node-pane{ position: absolute; top: 60px; left: 0; -webkit-border-radius: 0 0 3px 3px; -moz-border-radius: 0 0 3px 3px; z-Index: 10000; } .node-pane-inner{ position: relative; _height: 200px; overflow-x: hidden; overflow-y: auto; background: rgb(41, 90, 148); background: rgba(41, 90, 148, 0.85); *width:200px; } .node-select{ background: #295a94; } .node-pane a, .node-title{ position: relative; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; display: block; min-width: 160px; _width:180px; height: 20px; line-height: 20px; font-size: 14px; color: white; padding: 3px 5px 3px 12px; cursor: pointer; } .node-pane a:hover{ background: rgb(41, 90, 148); } .node-title{ padding: 5px 5px 5px 4px; cursor: default; color: #6fd3ff; font-weight: bold; }