自定义样式之toast

如何以插件形式开发自定义toast样式，可查看样式自定义之toast样式插件示例

toast包格式

/com/fr/fs/plugin/customstyle/toast/[toast样式名]  (注：toast样式名建议使用非中文)
        |----style.css   //导入样式
        |----style.js      //导入脚本
        |----cover.png   //主题包封面( 建议尺寸240*88 )
		|----cover@2x.png//主题包封面（ MacOS专用，建议尺寸480*176 ）
        |----其他目录(包括需要使用到的一些自定义资源文件)

样式开放接口

toast样式开放了toast方法

toast方法重写

toast : function(message) {
	/*toast位置*/
	/*toast样式颜色*/
	/*toast动画效果*/
}

toast样式包开发

自定义样式toast包实为引入的外部js、css以及资源文件等。

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

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

内置的Drop_Down_B toast样式按如下代码改写方法：

Drop_Down_B toast样式包Demo:

style.css

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

style.js

function ($) {
    $.extend(FR.Msg, {
        toast: function(message){
            var $tabContent = $("div.fs-tab-content");
			/*要区分报表预览时的toast和平台上的toast的不同样式*/
            if($tabContent.length === 0){
                this.reportToast(message);
            }
            else{
                this.fsToast(message);
            }
        },
        fsToast: function(message){
            var toTop = -50;
            var $dv = $("div.fs-tab-content").children('div.customToast');
            $dv.css({
                opacity: 0
            });
            if ($dv.length === 0) {
                $dv = $("<div/>").addClass('customToast').css({
                    top: toTop
                }).appendTo("div.fs-tab-content");
            }
            $dv.text(message);
            $dv.show();
            $dv.animate({
                top: 0,
                opacity: 0.8
            }, 200);
            (function() {
                $dv.animate({
                    top: toTop,
                    opacity: 0
                }, 200);
            }).defer(3000);
            (function() {
                $dv.hide();
            }).defer(3200);
        },
        reportToast: function(message){
            var toTop = -50;
            var $dv = $("body").children('div.customToast');
            if ($dv.length === 0) {
                $dv = $("<div/>").addClass('customToast').css({
                    top: toTop
                }).appendTo("body");
            }
            $dv.text(message);
            $dv.animate({
                top: 0
            }, 200);
            (function() {
                $dv.animate({
                    top: toTop
                }, 200);
            }).defer(3000);
        }
    });
})(jQuery);

插件包内的plugin.xml

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>

效果图如下：

toast样式插件开发的注意点

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

Page tree

自定义样式之toast

toast样式包开发

toast样式插件开发的注意点