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: {
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]
}
//注释：
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: {
width: 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:;
}
.node-navi li{
position: relative;
float: left;
left:;
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:;
-webkit-border-radius: 0 0 3px 3px;
-moz-border-radius: 0 0 3px 3px;
z-Index:;
}
.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;
}