Page History

...

为了使用toast接口，首先我们在style.js里需要对FR.Msg配置进行扩展，具体代码如下：

Code Block
(function ($) { $.extend(FR.Msg, { toast: function(message){ /需要重写的toast方法/ } }); })(jQuery);

...

Drop_Down_B toast样式包Demo:

Code Block

title	style.css
collapse	true

.customToast {
    -webkit-box-shadow: rgba(0, 0, 0, 0.296875) 0px 1px 2px;
    background: #01b0f4;
    filter: alpha(opacity=90);
    -moz-opacity:0.9;
    opacity: 0.9;
    color: #FFFFFF;
    cursor: pointer;
    font-size: 13px;
    font-family: "PingFang SC", "Microsoft YaHei", "Myriad Pro", "OpenSans", Verdana, sans-serif;
    font-weight: bold;
    padding: 10px 20px 10px 20px;
    position: absolute;
    _position: absolute;
    line-height: 30px;
    width: 100%;
    z-index: 5;
    text-align: center
}

Code Block

title	themestyle.js
collapse	true

(function ($) {
   FS.THEME = $.extend(true, FS.THEMEFR.Msg, {
        config4navigationtoast: function(message){
            var onAfterInit:$tabContent function= $() {"div.fs-tab-content");
			/*要区分报表预览时的toast和平台上的toast的不同样式*/
               var self = this;if($tabContent.length === 0){
               $('#fs-frame-search').remove( this.reportToast(message);
            }
   var $reg = $('#fs-frame-reg');
      else{
         if ($reg.length > 0) {
   this.fsToast(message);
            }
    $reg.remove();
    },
           }fsToast: function(message){
            var toTop  $.ajax({= -50;
            var $dv      url: FR.servletURL + "?op=fs_main&cmd=module_getrootreports",= $("div.fs-tab-content").children('div.customToast');
            $dv.css({
       type: 'POST',
        opacity: 0
          data: {id: -1},);
            if ($dv.length      success: function (res, status=== 0) {
                       var nodes$dv = $.parseJSON(res);("<div/>").addClass('customToast').css({
                    top: toTop
  $.ajax({
              }).appendTo("div.fs-tab-content");
             url: FR.servletURL + "?op=fs_main&cmd=getmoduleitems",}
            $dv.text(message);
              type: 'POST',
$dv.show();
            $dv.animate({
                asynctop: false0,
                opacity: 0.8
          data: {id: 1}, 200);
            (function() {
               success: function$dv.animate(res){
                    top: toTop,
           nodes.push($.parseJSON(res));
         opacity: 0
                }, 200);
            }).defer(3000);
            });(function() {
                $dv.hide();
       var  $ul = $('<ul class="node-navi"/>' }).appendTo($('#fs-frame-header')defer(3200);
        },
               $.each(nodes, function (index, root) reportToast: function(message){
            var toTop = -50;
            var $node$dv = $('<li class="node-navi-li"/>').appendTo($ul);
"body").children('div.customToast');
            if ($dv.length === 0) {
                $dv = $('"<div/>").addClass('customToast').text(root.text)
css({
                    top: toTop
                }).appendTo($node"body");
            }
            $dv.text(message);
            $dv.clickanimate(function{
  () {
             top: 0
            }, 200);
        if($node.hasClass('node-select'))    (function() {
                $dv.animate({
                       return;top: toTop
                   }, 200);
                }}).defer(3000);
        }
                           $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);

效果图如下：

Image Removed

系统配色

系统配色主要有4种：高亮色、图标外框色、底栏色和文字色，可通过复写css来修改任意地方的样式或者配色

Image Removed

颜色1——高亮色。“收藏”“消息”“个人中心”三个图标选中状态及tab选中项提亮色，
颜色2——图标外框色。导航栏图标外围色；
颜色3——底栏色。左侧导航栏激活项背景色以及Tab栏背景颜色；
颜色4——文字色。字体颜色。

系统配色分别对应如下css样式：

Code Block

language	css
title	高亮色

.fui-bsb{
  background-color: @color;
}
.fui-bsc{
  color: @color;
}
.fui-bsd{
  border-color: @color;
}

Code Block

language	css
title	图标外框色

.fui-fhc{
  color: @color;
}
.fui-fht{
  text-shadow: 0 0 3px @color;
}

Code Block

language	css
title	底栏色

.fui-seb{
  background-color: @color;
}

Code Block

language	css
title	文字色

.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}

标签页单独集成

FS.loadModule(render, moduleName)
方法：根据模块名加载对应模块配置页面，用于集成独立页面
参数： render 渲染dom
      moduleName 模块名
例如：FS.loadModule($('<div/>').appendTo('body'), 'report');

集成并加载指定标签模块，模块名列表如下：

模块名	参数值
报表管理	report
用户管理	user
权限管理	privilege
定时调度	schedule
系统管理	sysmgr
平台外观	lookandfeel
注册信息	register
系统监控	monitor
移动平台	mobile

注: 必须先做单点登录，只有登录FS才有访问标签页的权限。

});
})(jQuery);

插件包内的plugin.xml

Code Block

title	plugin.xml

/*除了上述的style.js等文件，不需要实现其他接口*/
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<plugin>
	<id>com.fr.fs.plugin.customstyle.toast.[(defined toast name)]</id>
	<name><![CDATA[(plugin name)]]></name>
	<active>yes</active>
	<version>1.0</version>
	<env-version>8.0</env-version>
	<jartime>2015-01-07</jartime>
	<vendor>[(author name)]]</vendor>
	<description><![CDATA[(plugin description)]]></description>
	<change-notes><![CDATA[无]]></change-notes>
</plugin>

效果图如下：

Image Added

toast样式插件开发的注意点

以下是在插件开发过程中需要注意的
(1) Default, Drop_Down_B, Popup_Right_B为保留字段，请不要以此为自定义样式名。
(2) 插件的包名为 com.fr.fs.plugin.customstyle.toast.[toast样式名（建议英文）]
(3) 平台上设置的toast样式名，最后会设置在resources目录下的customstyle.xml中

用户注销

FS.signOut() 方法：注销当前登录的用户，并返回登录页面。参数：无。

Page tree

Versions Compared

Old Version 1

New Version 2

Key

系统配色

请求接口

标签页单独集成

toast样式插件开发的注意点

用户注销