zoukankan      html  css  js  c++  java
  • Jquery 仿 android Toast效果

    JS代码如下:

    /**
     * 模仿android里面的Toast效果,主要是用于在不打断程序正常执行的情况下显示提示数据
     * @param config
     * @return
     */
    var Toast = function(config){
     this.context = config.context==null?$('body'):config.context;//上下文
     this.message = config.message;//显示内容
     this.time = config.time==null?3000:config.time;//持续时间
     this.left = config.left;//距容器左边的距离
     this.top = config.top;//距容器上方的距离
     this.init();
    }
    var msgEntity;
    Toast.prototype = {
     //初始化显示的位置内容等
     init : function(){
      $("#toastMessage").remove();
      //设置消息体
      var msgDIV = new Array();
      msgDIV.push('<div id="toastMessage">');
      msgDIV.push('<span>'+this.message+'</span>');
      msgDIV.push('</div>');
      msgEntity = $(msgDIV.join('')).appendTo(this.context);
      //设置消息样式
      var left = this.left == null ? this.context.width()/2-msgEntity.find('span').width()/2 : this.left;
      var top = this.top == null ? '20px' : this.top;
      msgEntity.css({position:'absolute',top:top,'z-index':'99',left:left,'background-color':'black',color:'white','font-size':'18px',padding:'10px',margin:'10px'});
      msgEntity.hide();
     },
     //显示动画
     show :function(){
      msgEntity.fadeIn(this.time/2);
      msgEntity.fadeOut(this.time/2);
     }
      
    }

    ====================调用方法:

    new Toast({context:$('body'),message:'Toast效果显示'}).show();

  • 相关阅读:
    ElasticSearch 2 (23)
    ElasticSearch 2 (22)
    微信小程序框架模板部署:mpvue2.x+typescript+webpack3.x
    mpvue添加对scss的支持
    mpvue 封装axios请求方法
    Vue中qs插件的使用
    在微信小程序中使用less/sass
    微信小程序封装request请求
    VSCode --tsc : 无法加载文件
    Vue项目中的RSA加解密
  • 原文地址:https://www.cnblogs.com/marsli/p/4011773.html
Copyright © 2011-2022 走看看