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();

Jquery 仿 android Toast效果的更多相关文章

  1. Android Toast效果设置

    Android Toast效果设置 Toast是Android中用来显示显示信息的一种机制,和Dialog不一样的是,Toast是没有焦点的,而且Toast显示的时间有限,过一定的时间就会自动消失.总 ...

  2. Android Toast效果

    Android Toast效果是一种提醒方式,在程序中使用一些短小的信息通知用户,过一会儿会自动消失,实现如下: FirstActivity.java package org.elvalad.acti ...

  3. jquery 仿windows10菜单效果下载

    http://www.kuitao8.com/20150923/4079.shtml jquery 仿windows10菜单效果下载

  4. jQuery仿Android锁屏图案应用插件

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  5. JS仿Android Toast提示效果

    注:这个需要jquery文件来提示支持,所以需要先调用Jquery. <script type="text/javascript" src="js/jquery.j ...

  6. jQuery仿3D旋转木马效果插件(带索引按钮)

    项目中需要用到旋转木马效果,但是我在网上找的插件,基本都是不带按钮或者只是带前后按钮的,而项目要求的是带索引按钮,也就是说有3张图片轮播,对应的要有3个小按钮,点击按钮,对应的图片位于中间位置.于是就 ...

  7. jQuery仿Android锁屏图案应用

    在线演示 本地下载

  8. jquery 仿手机屏幕切换界面效果

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  9. jquery仿淘宝规格颜色选择效果

    jquery实现的仿淘宝规格颜色选择效果源代码如下 jquery仿淘宝规格颜色选择效果 -收缩HTML代码 运行代码 [如果运行无效果,请自行将源代码保存为html文件运行] <script t ...

随机推荐

  1. Fedora 安装gcc gcc-c++

    Fedora本身没有自带gcc 和 g++编译器,所以需要我们自己去安装,步骤如下: 1.切换到root用户(或者跳过这个步骤,直接在下面命令前面加上 sudo) su root 2.安装gcc yu ...

  2. postgresql pgsql最新版安装指南及数据存储路径更改及主从配置

    postgresql pgsql最新版安装指南及数据存储路径更改及主从配置 安装指南 首先在apt的list添加你当前系统版本对应的apt列表 目前官网有16.04,14.04,12.04 分别对应下 ...

  3. Android基础学习第二篇—Activity

    写在前面的话: 1. 最近在自学Android,也是边看书边写一些Demo,由于知识点越来越多,脑子越来越记不清楚,所以打算写成读书笔记,供以后查看,也算是把自己学到所理解的东西写出来,献丑,如有不对 ...

  4. Problem with "AnyConnect was not able to establish connection to the specified secure gateway."

    Cisco的VPN客户端最近报"AnyConnect was not able to establish connection to the specified secure gateway ...

  5. i春秋url地址编码问题

    i春秋学院是国内比较知名的安全培训平台,前段时间看了下网站,顺便手工简单测试常见的XSS,发现网站搜索功能比较有意思. 其实是对用户输入的内容HTML编码和URL编码的处理方式在这里不合理,提交到乌云 ...

  6. 当年只会C# 所以写C++就成这样了! log4cplus -> log4net

    属实C++不会. 目前帮朋友弄个小项目需要小折腾一下. c# 一直采用 log4net ,c++的呢,找找有个log4cplus  知识有限,做个通用类吧.别把精力放在这里. 动手创建个静态类. 为了 ...

  7. 两个select 左右添加,上下移动

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  8. border-radius四个值的问题

    我们都知道border-radius后面如果是4个值的话,依次代表的是左上角.右上角.右下角.左下角. 但是这样写呢:border-radius:10px 20px 30px 40px/50px 40 ...

  9. jquery轮播图详解,40行代码即可简单解决。

    我在两个月以前没有接触过html,css,jquery,javascript.今天我却在这里分享一篇技术贴,可能在技术大牛面前我的文章漏洞百出,也请斧正. 可以看出来,无论是div+css布局还是jq ...

  10. 浩瀚科技 定制现场无线手持打印PDA手持终端扫描条码开单解决方案

    PDA通过扫描商品条码移动开单,实现便携式办公,伴随式销售,是深圳市浩瀚技术有限公司的一款最新安卓微POS产品,PDA能通过WIFI无线局域网.GPRS互联网直接与主机电脑连接,让公司业务人员能随时随 ...