【仅供内部供应商使用,不提供对外解答和培训】
...
内置Modern主题采用如下配置:
Code Block |
---|
{ 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 } } |
Code Block | ||||
---|---|---|---|---|
| ||||
.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; } |
Code Block | ||||
---|---|---|---|---|
| ||||
(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); |
效果图如下:
为了使用主题扩展接口,首先我们在theme.js里需要对FS.Plugin.CustomIcon配置进行扩展,theme.js的代码代码如下:
Code Block | ||||
---|---|---|---|---|
| ||||
(function($){ //主题配置属性 FS.THEME = $.extend(true, FS.THEME, { /**需要扩展的配置属性**/ }); //自定义图标需要扩展的接口 FS.Plugin.CustomIcon.push({ /*获取菜单节点的自定义图标*/ getMenuNodeCustomIcon: function (icon) { return null; }, /*添加自定义图标到图标列表*/ addCustomIconItem : function(configSetting){ }, /*删除之前选中的自定义图标*/ removePreCustomIconSelected : function(folders) { }, /*添加自定义图标到目录节点上*/ addItem2Folders : function(eachFolder, $folders) { }, /*初始化已经选中的自定义图标*/ initSelectedCustomIcon : function(selectedFolder) { }, /*获取自定义图标的附件ID*/ getCustomIconAttachID : function (folder) { return null; } }); })(jQuery); |
自定义图标的demo:
theme.js
Code Block | ||||||||
---|---|---|---|---|---|---|---|---|
| ||||||||
(function ($) { FS.Plugin.LookAndFeelSettings.push({ item: function(ctx) { return { title: FR.i18nText(""), content: $("<div />") }; }, action: function (tabPane) { } }); FS.THEME = $.extend(true, FS.THEME, { /**需要扩展的配置属性**/ }); FS.Plugin.CustomIcon.push({ getMenuNodeCustomIcon: function (icon) { /*这边定义了一个op,用于处理图标图片的文件读取和加载,不同的主题op不能相同,否则会有冲突!*/ /*这边定义了一个cmd=read_img,把png图标从文件中读入到内存以及缓存中*/ var config = { url: FR.servletURL + '?op=custom_icon&cmd=read_img', data: { id : icon } }; var attach = FS.Sync.ajax(config); var $icon = $('<span/>').addClass("fs-menu-icon"); /*这边定义了一个cmd=getattach,从缓存中获取之前读入的附件png图标,图片的文件名存入img的alt属性中,后续保存的时候也可以方便处理*/ var url = FR.servletURL + ('?op=custom_icon&cmd=get_attach&id=' + attach.attachid + '&isAdjust=false'); $('<img>').attr('src',url).attr('alt', attach.attachfile).addClass('fs-menu-node-icon').appendTo($icon); return $icon; }, removePreCustomIconSelected : function(folders) { //选择之前先删除之前的选择 var curFolder = $('.fs-icon-folder-item.selected .folder-icon', folders); $('.fs-icon-folder-item.selected .fs-folder-customIcon-selected', folders).remove(); curFolder.removeAttr('style'); }, addCustomIconItem : function(configSetting){ var self = configSetting; var config = { url: FR.servletURL + '?op=custom_icon&cmd=read_img', data: { id : '' } }; var completeFn = function (res, status) { var result = FR.jsonDecode(res.responseText); $.each(result, function(index, attach){ var $icon = $('<div class="fs-icon-item"/>').hover(function () { $(this).addClass('icon-hover'); }, function () { if (!$(this).hasClass('selected')) { $(this).removeClass('icon-hover'); } }).click(function () { self.selectIconItem($(this)); }); var url = FR.servletURL + ('?op=custom_icon&cmd=get_attach&id=' + attach.attachid + '&isAdjust=false'); $('<img>').attr('src', url).attr('alt', attach.attachfile).addClass('fs-customIcon-list-item').appendTo($icon); $icon.data('ENTRY', {text: attach,onSelect: function ($icon) { var curFolder = $('.fs-icon-folder-item.selected .folder-icon', self.$folders); //选择之前先删除之前的选择 $('.fs-icon-folder-item.selected .fs-folder-customIcon-selected', self.$folders).remove(); curFolder.removeAttr('style'); var url = $('.fs-customIcon-list-item', $icon).attr('src'); var altText = $('.fs-customIcon-list-item', $icon).attr('alt'); var img = $('<img>').attr('src',url).attr('alt', altText).addClass('fs-folder-customIcon-selected'); curFolder.attr('style', 'padding-left:0px').html(""); img.insertBefore($('.fs-icon-folder-item.selected .folder-icon', self.$folders)); }}); $icon.appendTo(self.$icons); }); }; FS.Async.ajax(config, completeFn); }, addItem2FolderNodes : function(eachFolder, $folders) { var config = { url: FR.servletURL + '?op=custom_icon&cmd=read_img', data: { id : eachFolder.value } }; var attach = FS.Sync.ajax(config); if(attach.attachid && attach.attachfile) { var url = FR.servletURL + ('?op=custom_icon&cmd=get_attach&id=' + attach.attachid + '&isAdjust=false'); $('<img>').attr('src', url).attr('alt', attach.attachfile).addClass('fs-folder-customIcon-selected').appendTo($folders); $('<i class="folder-icon"/>').attr('style', 'padding-left:0px').html("").appendTo($folders); } }, initSelectedCustomIcon : function(selectedFolder) { var altText = $('.fs-folder-customIcon-selected', selectedFolder).attr('alt'); $.each(FSCS.View.$icons.children(), function(i, folderIcon){ if (($('.fs-customIcon-list-item', folderIcon).attr('alt'))) { if (altText === ($('.fs-customIcon-list-item', folderIcon).attr('alt'))) { FSCS.View.selectIconItem(FSCS.View.$icons.children().eq(i)); } } }) }, getCustomIconAttachID : function (folder) { //寻找自定义的图标img的alt值 return ($('.fs-folder-customIcon-selected', $(folder)).attr('alt')); } }); })(jQuery); |
style.css
Code Block | ||||||||
---|---|---|---|---|---|---|---|---|
| ||||||||
.fs-menu-node-icon { width: 25px; height: 16px; } .fs-folder-customIcon-selected { width:25px; height:16px; padding-left:10px; } .fs-customIcon-list-item { width:80px; height:80px } |
对应的后台处理以及完整的代码见示例demo
View file | ||||
---|---|---|---|---|
|
效果图如下:
在编辑目录图标的下方可以识别指定目录下的png图片,然后加载进来,以供选择,图片的大小尺寸请自行调整(示例上是80*80)
系统配色主要有4种:高亮色、图标外框色、底栏色和文字色,可通过复写css来修改任意地方的样式或者配色
系统配色分别对应如下css样式:
Code Block | ||||
---|---|---|---|---|
| ||||
.fui-bsb{ background-color: @color; } .fui-bsc{ color: @color; } .fui-bsd{ border-color: @color; } |
Code Block | ||||
---|---|---|---|---|
| ||||
.fui-fhc{ color: @color; } .fui-fht{ text-shadow: 0 0 3px @color; } |
Code Block | ||||
---|---|---|---|---|
| ||||
.fui-seb{ background-color: @color; } |
Code Block | ||||
---|---|---|---|---|
| ||||
.fui-fbc{ color: @color; } .fui-fbt{ text-shadow: 0 0 1px @color; } |
请求 | 参数 |
---|---|
FR.servletURL + "?op=fs_main&cmd=getmoduleitems" | {id: -1} |
请求 | 参数 |
---|---|
FR.servletURL + "?op=fs_main&cmd=module_getrootreports" | {id: -1} |
请求 | 参数 | callback |
---|---|---|
FR.servletURL + "?op=fr_bi&cmd=get_folder_report_list" | {} | [{lastModify:1466402196217,pId:"-1","id":"1",text:"功能演示",value:"348602efbb80f686"}] |
请求 | 参数 | callback |
---|---|---|
FR.servletURL + "?op=fr_bi&cmd=add_report" | {reportName:'模板名', reportLocation: '我是模板文件夹的id', realTime: false} | {"reportId":23} |
请求 | 参数 | callback |
---|---|---|
FR.servletURL + "?op=fr_bi&cmd=init_dezi_pane&reportId=23&edit=_bi_edit_" |
请求 | 参数 | callback |
---|---|---|
FR.servletURL + "?op=fr_bi_configure&cmd=init_configure_pane" |
FS.loadModule(render, moduleName) 方法:根据模块名加载对应模块配置页面,用于集成独立页面 参数: render 渲染dom moduleName 模块名 例如:FS.loadModule($('<div/>').appendTo('body'), 'report');
集成并加载指定标签模块,模块名列表如下:
模块名 | 参数值 |
---|---|
报表管理 | report |
用户管理 | user |
权限管理 | privilege |
定时调度 | schedule |
系统管理 | sysmgr |
平台外观 | lookandfeel |
注册信息 | register |
系统监控 | monitor |
移动平台 | mobile |
注:必须先做单点登录,只有登录FS才有访问标签页的权限。
FS.signOut() 方法:注销当前登录的用户,并返回登录页面。 参数:无。