Skip to content
showToast
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
demo
dist
README.md

README.md

showToast

showToast 是一款移动端的Toast控件,可以在移动端展示Toast效果。

Demo>>

创建时间 2016-05-19 13:31

作者 @zoeblow

版本

  • V 1.0
  • 修改时间 :2016-05-19 13:31
  • 描述:创建showToast

  • V 1.1
  • 修改时间 :2016-06-01 13:57
  • 描述:添加一个参数,可以自定义Toast显示的时间

  • V 1.2
  • 修改时间 :2016-06-21 17:26
  • 描述:针对IOS系统调整Toast出现位置

  • V 1.3
  • 修改时间 :2016年10月31日15:02
  • 描述:增加显示toast 有小图标的功能 修改若干现实bug,修改了传参方式

  • V 1.4
  • 修改时间 :2018年1月31日10:14
  • 描述:更新demo

Js代码

var showToast=(function(){
    var instance=null;
        function show(obj){
            var that = this;
            that.obj = {
                timer : that.text,
                timer : that.timer || 1500,
            }
            if(!instance){
                var $container=$('<div class="showToast"><div class="showToastInner"><div class="showToastTips fieldTipBounceIn"><div class="showToastCon">'+obj.text+'</div></div></div></div>');
                $container.appendTo($("body"));
                instance=true;
                setTimeout(function(){
                    $container.remove();
                    instance=false;
                },obj.timer)
            }
        }
   
    return {
        show:show
    }
})();

调用方式

在html中引入zepto/jquery之后引入showToast.js 完成之后即可直接使用

<script type="text/javascript" src="script/zepto.min.js"></script>
<script type="text/javascript" src="script/showToast.js"></script>
<script>
    //调用没有小图标版本
    showToast.show({text:'这就是页面显示的文字喽',timer:2000})

    //调用没有小图标版本
    showToastImg.show({text:'这就是页面显示的文字喽',timer:2000,icon:'success'})
</script>

参数

参数 取值类型 默认值 描述
text String 必填 页面上显示的文字
timer Number 1500 滞留在页面上的时间
icon String null 显示图标的样式,可为空 可选值为"success,fail,error,busy"
You can’t perform that action at this time.