自定义主题包示例

目录:

1. 描述

如下图所示，我们想把目录树放到顶部，而不是左侧，以此效果为例，来讲解自定义主题包API接口的使用方法：
222

2. theme.js

在总章节中介绍了自定义主题包由三个文件组成：theme.js、style.css和cover.png，其中theme.js里面保存了组件的自定义扩展。
故，首先新建一个theme.js文件，并将组件API接口构成里面的对五大部件自定义扩展的代码拷贝进去，如下图：
222
2.1 框架布局属性
上面效果图中左侧的目录树显示到顶部作为导航栏，即左侧的框架宽度变为0，那么就可以在config4frame配置中重新west属性，设置其宽度为0，代码如下：
  1.  //框架布局配置属性    
  2.  config4frame: {  
  3. west: {  
  4.              width: 0  
  5.          }  
  6.      
2.2 目录树组件配置
较之默认的平台主题，示例主题中顶部没有模板的搜索框，并且左侧目录树显示在顶部，故需要扩展初始化后事件，移掉搜索框，重新绘制目录树，初始化后事件代码如下：
  1.  //目录树组件配置属性    
  2.  config4MenuTree: {  
  3. onAfterInit: function () {}  
  4.      
移除搜索框
在初始化事件内添加如下代码：
  1. //移除搜索框  
  2.                 var self = this;  
  3.                 $('#fs-frame-search').remove();  
  4.                 var $reg = $('#fs-frame-reg');  
  5.                 if ($reg.length > 0) {  
  6.                     $reg.remove();  
  7.                 }  
绘制目录树
目录树从左侧移到顶部，即全部重新绘制目录，故需要使用到目录树节点请求接口，通过ajax拿到目录树及管理系统的各个节点，然后重新绘制，代码如下：
  1. $.ajax({  
  2.                     url: FR.servletURL + "?op=fs_main&cmd=module_getrootreports",  
  3.                     type: 'POST',  
  4.                     data: {id: -1},  
  5.                     success: function (res, status) {  
  6.                         var nodes = $.parseJSON(res);  
  7.                         //目录树节点获取成功之后，获取管理系统各个节点  
  8.                         $.ajax({  
  9.                             url: FR.servletURL + "?op=fs_main&cmd=getmoduleitems",  
  10.                             type: 'POST',  
  11.                             async: false,  
  12.                             data: {id: 1},  
  13.                             success: function(res){  
  14.                                 nodes.push($.parseJSON(res));  
  15.                             }  
  16.                         });  
  17.                         var $ul = $('<ul class="node-navi"/>').appendTo($('#fs-frame-header'));  
  18.                         $.each(nodes, function (index, root) {  
  19.                             var $node = $('<li class="node-navi-li"/>').appendTo($ul);  
  20.                             $('<div/>').text(root.text)  
  21.                                 .appendTo($node)  
  22.                                 .click(function () {  
  23.                                     if($node.hasClass('node-select')){  
  24.                                         return;  
  25.                                     }  
  26.                                     $ul.find('.node-select').removeClass('node-select');  
  27.                                     $node.addClass('node-select');  
  28.                                     var $dropdown = $(this).data('DATA');  
  29.                                     if (!$dropdown) {  
  30.                                         $dropdown = $('<div class="node-pane"/>').appendTo($node);  
  31.                                         $(this).data('DATA', $dropdown);  
  32.                                         var $pane = $('<div class="node-pane-inner"/>')  
  33.                                             .css({  
  34.                                                 'max-height': document.body.clientHeight - 90  
  35.                                             }).appendTo($dropdown);  
  36.                                         if (root.hasChildren && root.ChildNodes) {  
  37.                                             var $other = $('<div class="node-wrapper"/>').appendTo($pane);  
  38.                                             $.each(root.ChildNodes, function (index, child) {  
  39.                                                 if (child.hasChildren) {  
  40.                                                     var $w = $('<div class="node-wrapper"/>').appendTo($pane);  
  41.                                                     $('<div class="node-title"/>').text(child.text).appendTo($w);  
  42.                                                     var childs = [];  
  43.                                                     _collectAllChildNodes(child, childs);  
  44.                                                     $.each(childs, function (i, n) {  
  45.                                                         _createItem(n, $dropdown, $node).appendTo($w);  
  46.                                                     });  
  47.                                                 } else {  
  48.                                                     _createItem(child, $dropdown, $node).appendTo($other);  
  49.                                                 }  
  50.                                             });  
  51.                                         } else {  
  52.                                             return;  
  53.                                         }  
  54.                                     }  
  55.                                     $dropdown.fadeIn('fast');  
  56.                                     $(document).bind('mouseover.nodepane', function (e) {  
  57.                                         var $t = $(e.target);  
  58.                                         if ($t.closest('.node-pane').length <= 0) {  
  59.                                             $node.removeClass('node-select');  
  60.                                             $dropdown.fadeOut('fast');  
  61.                                             $(document).unbind('mouseover.nodepane');  
  62.                                         }  
  63.                                     });  
  64.                                 }  
  65.                             );  
  66.                         });  
  67.                     }  
  68.                 });  
故，将去除搜索框和绘制目录树代码添加到初始化后事件中即可。
其他三大部件没有进行修改，无需更改。
最后theme.js文件的代码如下：
  1. (function ($) {  
  2.     FS.THEME = $.extend(true, FS.THEME, {  
  3.         config4navigation: {  
  4.             onAfterInit: function () {  
  5.                 //移除搜索框  
  6.                 var self = this;  
  7.                 $('#fs-frame-search').remove();  
  8.                 var $reg = $('#fs-frame-reg');  
  9.                 if ($reg.length > 0) {  
  10.                     $reg.remove();  
  11.                 }  
  12.                 //获取目录树节点重新绘制顶部导航栏  
  13.                 $.ajax({  
  14.                     url: FR.servletURL + "?op=fs_main&cmd=module_getrootreports",  
  15.                     type: 'POST',  
  16.                     data: {id: -1},  
  17.                     success: function (res, status) {  
  18.                         var nodes = $.parseJSON(res);  
  19.                         //目录树节点获取成功之后，获取管理系统各个节点  
  20.                         $.ajax({  
  21.                             url: FR.servletURL + "?op=fs_main&cmd=getmoduleitems",  
  22.                             type: 'POST',  
  23.                             async: false,  
  24.                             data: {id: 1},  
  25.                             success: function(res){  
  26.                                 nodes.push($.parseJSON(res));  
  27.                             }  
  28.                         });  
  29.                         var $ul = $('<ul class="node-navi"/>').appendTo($('#fs-frame-header'));  
  30.                         $.each(nodes, function (index, root) {  
  31.                             var $node = $('<li class="node-navi-li"/>').appendTo($ul);  
  32.                             $('<div/>').text(root.text)  
  33.                                 .appendTo($node)  
  34.                                 .click(function () {  
  35.                                     if($node.hasClass('node-select')){  
  36.                                         return;  
  37.                                     }  
  38.                                     $ul.find('.node-select').removeClass('node-select');  
  39.                                     $node.addClass('node-select');  
  40.                                     var $dropdown = $(this).data('DATA');  
  41.                                     if (!$dropdown) {  
  42.                                         $dropdown = $('<div class="node-pane"/>').appendTo($node);  
  43.                                         $(this).data('DATA', $dropdown);  
  44.                                         var $pane = $('<div class="node-pane-inner"/>')  
  45.                                             .css({  
  46.                                                 'max-height': document.body.clientHeight - 90  
  47.                                             }).appendTo($dropdown);  
  48.                                         if (root.hasChildren && root.ChildNodes) {  
  49.                                             var $other = $('<div class="node-wrapper"/>').appendTo($pane);  
  50.                                             $.each(root.ChildNodes, function (index, child) {  
  51.                                                 if (child.hasChildren) {  
  52.                                                     var $w = $('<div class="node-wrapper"/>').appendTo($pane);  
  53.                                                     $('<div class="node-title"/>').text(child.text).appendTo($w);  
  54.                                                     var childs = [];  
  55.                                                     _collectAllChildNodes(child, childs);  
  56.                                                     $.each(childs, function (i, n) {  
  57.                                                         _createItem(n, $dropdown, $node).appendTo($w);  
  58.                                                     });  
  59.                                                 } else {  
  60.                                                     _createItem(child, $dropdown, $node).appendTo($other);  
  61.                                                 }  
  62.                                             });  
  63.                                         } else {  
  64.                                             return;  
  65.                                         }  
  66.                                     }  
  67.                                     $dropdown.fadeIn('fast');  
  68.                                     $(document).bind('mouseover.nodepane', function (e) {  
  69.                                         var $t = $(e.target);  
  70.                                         if ($t.closest('.node-pane').length <= 0) {  
  71.                                             $node.removeClass('node-select');  
  72.                                             $dropdown.fadeOut('fast');  
  73.                                             $(document).unbind('mouseover.nodepane');  
  74.                                         }  
  75.                                     });  
  76.                                 }  
  77.                             );  
  78.                         });  
  79.                     }  
  80.                 });  
  81.             }  
  82.         },  
  83.         config4frame: {  
  84.             west: {  
  85.                 width: 0  
  86.             }  
  87.         }  
  88.     });  
  89.     var _createItem = function (node, $pane, $node) {  
  90.         return $('<a href="#"/>').text(node.text)  
  91.             .click(function () {  
  92.                 FS.tabPane.addItem(node);  
  93.                 $node.removeClass('node-select');  
  94.                 $pane.hide();  
  95.                 $(document).unbind('mousedown.nodepane');  
  96.             });  
  97.     };  
  98.     var _collectAllChildNodes = function (node, childs) {  
  99.         var self = this;  
  100.         if (!node.ChildNodes) {  
  101.             return;  
  102.         }  
  103.         $.each(node.ChildNodes, function (index, child) {  
  104.             if (child.hasChildren) {  
  105.                 _collectAllChildNodes(child, childs);  
  106.             } else {  
  107.                 childs.push(child);  
  108.             }  
  109.         });  
  110.     };  
  111. })(jQuery);  

3. style.css

页面主体交互的过程扩展完成之后，需要对其中的一些样式进行修饰，故，新建style.css，对某些元素进行样式修饰，代码如下：
  1. .node-navi{    
  2.     position: relative;    
  3.     float: right;    
  4.     right: 30px;    
  5.     list-style: none;    
  6.     height: 60px;    
  7.     top: 0;    
  8. }    
  9.     
  10. .node-navi li{    
  11.     position: relative;    
  12.     float: left;    
  13.     left: 0;    
  14.     display: block;    
  15.     height: 60px;    
  16.     line-height: 60px;    
  17.     color: #fff;    
  18.     font-size: 14px;    
  19.     padding: 0 15px;    
  20.     cursor: pointer;    
  21. }    
  22.     
  23. .node-navi li:hover{    
  24.     color: #6fd3ff;    
  25. }    
  26.     
  27. .node-pane{    
  28.     position: absolute;    
  29.     top: 60px;    
  30.     left: 0;    
  31.     -webkit-border-radius: 0 0 3px 3px;    
  32.     -moz-border-radius: 0 0 3px 3px;    
  33.     z-Index: 10000;    
  34. }    
  35. .node-pane-inner{    
  36.     position: relative;    
  37.     _height: 200px;    
  38.     overflow-x: hidden;    
  39.     overflow-y: auto;    
  40.     background: rgb(41, 90, 148);    
  41.     background: rgba(41, 90, 148, 0.85);    
  42.     *width:200px;    
  43. }    
  44. .node-select{    
  45.     background: #295a94;    
  46. }    
  47.     
  48. .node-pane a, .node-title{    
  49.     position: relative;    
  50.     white-space: nowrap;    
  51.     text-overflow: ellipsis;    
  52.     overflow: hidden;    
  53.     display: block;    
  54.     min-width: 160px;    
  55.     _width:180px;    
  56.     height: 20px;    
  57.     line-height: 20px;    
  58.     font-size: 14px;    
  59.     color: white;    
  60.     padding: 3px 5px 3px 12px;    
  61.     cursor: pointer;    
  62. }    
  63.     
  64. .node-pane a:hover{    
  65.     background: rgb(41, 90, 148);    
  66. }    
  67. .node-title{    
  68.     padding: 5px 5px 5px 4px;    
  69.     cursor: default;    
  70.     color: #6fd3ff;    
  71.     font-weight: bold;    
  72. }    

4. cover.png

选择一张尺寸大小为240*170的图片作为选择主题时的背景图，并和上面两个文件一起放在同一个文件夹下，如下图：

FineReport制作了5个自定义主题包，里面包括了平台接口的各种应用，请点击主题包下载查看。
详情请点击：主题开发接口

附件列表


主题： 决策系统
标签： 暂无标签

文档内容仅供参考，如果你需要获取更多帮助，请咨询帆软技术支持
关于技术问题，您还可以通过帆软论坛获取帮助，论坛上有非常多的大神，有些水平比帆软工程师还要高哦。
若您还有其他非技术类问题，可以联系帆软传说哥（微信ID：frbiaoge）