用于ajax类型提示的,只显示一个。

只是给个思路而已,代码有很多不足。

4个参数,有2个是可选

调用

$.mTip('类型','显示内容',显示时间,回调函数)

类型:

0 为加载

1 为成功

2 为失败

3 为警告

显示时间:

为整数型

大于0,

小于0或非整数一直存在,不消失!

效果图:

渣渣效果一份:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>提示框</title>
<style type="text/css">
.msgbox_layer, .msgbox_layer .gtl_ico_succ, .msgbox_layer .gtl_ico_fail, .msgbox_layer .gtl_ico_hits, .msgbox_layer .gtl_ico_clear, .msgbox_layer .gtl_end {background-image: url("images/gb_tip_layer.png");background-repeat: no-repeat;color: #606060;display: inline-block;font-size: 14px;font-weight: bold;height: 54px;line-height: 54px;}
.msgbox_layer_wrap {left: 0;position: fixed;_position: absolute;_top: expression(documentElement.clientHeight/2 + documentElement.scrollTop + "px");text-align: center;top: 46%;width: 100%;z-index: 65533;}
.msgbox_layer {background-position: 0 -161px;background-repeat: repeat-x;margin: 0 auto;padding: 0 18px 0 9px;position: relative;}
.msgbox_layer .gtl_ico_succ {background-position: -6px 0;left: -45px;position: absolute;top: 0;width: 45px;}
.msgbox_layer .gtl_end {background-position: 0 0;position: absolute;right: -6px;top: 0;width: 6px;}
.msgbox_layer .gtl_ico_fail {background-position: -6px -108px;left: -45px;position: absolute;top: 0;width: 45px;}
.msgbox_layer .gtl_ico_hits {background-position: -6px -54px;left: -45px;position: absolute;top: 0;width: 45px;}
.msgbox_layer .gtl_ico_clear {background-position: -6px 0;left: -5px;position: absolute;top: 0;width: 5px;}
.msgbox_layer img {float: left;margin: 19px 10px 0 5px;width: 16px;height: 16px;}
.manhuaTip{ width:80px; height:40px; line-height:40px; text-align:center; border:1px #999999 solid; background:#82ce18; margin-right:50px; font-size:16px; font-weight:bold; letter-spacing:2px; cursor:pointer; color:#FFF; }
</style>
</head>
<body> <input type="button" value='加载中' id="demo">
<input type="button" value='成功' id="demo2">
<input type="button" value='失败' id="demo3">
<input type="button" value='警告' id="demo4"> <script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
$("#demo").click(function(){
$.mTip('0','加载中',0);
});
$("#demo2").click(function(){
$.mTip('1','成功',0);
});
$("#demo3").click(function(){
$.mTip('2','失败',0);
});
$("#demo4").click(function(){
$.mTip('3','警告',0);
}); function log(a){console.log(a)}
$.extend({
mTip:function(type,txt,time,callback){ if($("#mTip").length){
$("#mTip").remove();
} var arrayHTML = [
'<img alt="" src="data:images/loading.gif">',
'<span class="gtl_ico_succ"></span>',
'<span class="gtl_ico_fail"></span>',
'<span class="gtl_ico_hits"></span>'
];
var temp = type ? arrayHTML[type] : arrayHTML[0];
var html = '<div id="mTip" class="msgbox_layer_wrap"><span id="mode_tips_v2" style="z-index: 10000;" class="msgbox_layer"><span class="gtl_ico_clear"></span>';
html+= arrayHTML[type] + txt + '<span class="gtl_end"></span></span></div>';
$("body").append(html);
if(typeof time == 'number'){
if(time > 0){
setTimeout(function(){
$("#mTip").remove();
if(callback){
callback();
}
},time);
}else{
setTimeout(function(){
if(callback){
callback();
}
},100); }
}
}
}); </script>
</body>
</html>

下载地址:http://files.cnblogs.com/yyman001/mTip1.0.rar

jquery消息提示框的更多相关文章

  1. 基于jQuery消息提示框插件Tipso

    今天要分享的这款jQuery消息提示框插件名叫Tipso,它的特点是可以定义提示框的显示位置,以及动态改变提示框的提示内容,应该说是一款相当灵活的jQuery消息提示框插件.效果图如下: 在线预览   ...

  2. jQuery消息提示框插件Tipso

    在线演示 本地下载

  3. 强大的响应式jQuery消息通知框和信息提示框插件

    lobibox是一款功能很强大的jQuery消息通知框和信息提示框插件.这个插件分为两个部分:消息通知框和信息提示框.它能很好的结合Bootstrap使用. 信息提示框 lobibox的信息提示框能够 ...

  4. jQuery EasyUI 提示框(Messager)用法

    jQuery EasyUI 提示框(Messager)不仅强大,而且也不用任何的HTML代码,只需要按照<jQuery EasyUI框架使用文档>包含必要文件后,在$(function() ...

  5. JS~Boxy和JS模版实现一个标准的消息提示框

    面向对象的封装 面向对象一个入最重要的特性就是“封装”,将一些没有必要公开的方法和属性以特定的方式进行组装,使它对外只公开一个接口,外界在调用它时,不需要关注它实现的细节,而只要关注它的方法签名即可, ...

  6. 基于jquery的提示框JavaScript 插件,类Bootstrap

    目录 基于jquery的提示框JavaScript 插件,类Bootstrap 基于jquery的提示框JavaScript 插件,类Bootstrap 源码 github地址: https://gi ...

  7. (二)easyUI之消息提示框

    <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding= ...

  8. 自定义iOS 中推送消息 提示框

    看到标题你可能会觉得奇怪 推送消息提示框不是系统自己弹出来的吗? 为什么还要自己自定义呢? 因为项目需求是这样的:最近需要做 远程推送通知 和一个客服系统 包括店铺客服和官方客服两个模块 如果有新的消 ...

  9. Android第三方开源对话消息提示框:SweetAlertDialog(sweet-alert-dialog)

    Android第三方开源对话消息提示框:SweetAlertDialog(sweet-alert-dialog) Android第三方开源对话消息提示框:SweetAlertDialog(sweet- ...

随机推荐

  1. 每天一个linux命令(9):nl命令

    nl命令在linux系统中用来计算文件中行号.nl 可以将输出的文件内容自动的加上行号!其默认的结果与 cat -n 有点不太一样, nl 可以将行号做比较多的显示设计,包括位数与是否自动补齐 0 等 ...

  2. 软工实践练习——使用Git进行代码管理

    GITHUB上的预备活动: 注册 创建小组Organization,邀请组员进来 将代码库fork到小组Organization底下 下载并使用GIT: Git的安装 使用Git进行代码管理 1.从百 ...

  3. 使用background和background-image对CSS优先级造成影响

    在写一个关于背景图的CSS时候发现一个奇怪的现象, 原图: 如下代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitiona ...

  4. JAVA的整型与字符串相互转换

    1如何将字串 String 转换成整数 int? A. 有两个方法: 1). int i = Integer.parseInt([String]); 或 i = Integer.parseInt([S ...

  5. BZOJ-2186 沙拉公主的困惑 线性筛(筛筛筛)+线性推逆元

    2186: [Sdoi2008]沙拉公主的困惑 Time Limit: 10 Sec Memory Limit: 259 MB Submit: 2417 Solved: 803 [Submit][St ...

  6. 学习笔记--函数式线段树(主席树)(动态维护第K极值(树状数组套主席树))

    函数式线段树..资瓷 区间第K极值查询 似乎不过似乎划分树的效率更优于它,但是如果主席树套树状数组后,可以处理动态的第K极值.即资瓷插入删除,划分树则不同- 那么原理也比较易懂: 建造一棵线段树(权值 ...

  7. 最新版本的DBCP数据源配置

    弄了我一下午,把该加的包都加进去了还是没用,后来把DBCP的包打开来看看才发现路径不对.配置如下: <!-- 使用dbcp配置数据源 --> <bean id="dataS ...

  8. webkit模块介绍

    一.Webkit模块   用到的第三方库如下:   cairo 一个2D绘图库 casqt Unicode处理用的库,从QT中抽取部分代码形成的 expat 一个XML SAX解析器的库 freety ...

  9. MySQL逻辑备份与恢复

    备份:mysqldump -uroot -p yyzc department > /home/admin/yyzc_backup.sql 恢复:mysql -uroot -p yyzc < ...

  10. 怎样分析java线程堆栈日志

    注: 该文章的原文是由 Tae Jin Gu 编写,原文地址为 How to Analyze Java Thread Dumps 当有障碍,或者是一个基于 JAVA 的 WEB 应用运行的比预期慢的时 ...