jquery消息提示框
用于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消息提示框的更多相关文章
- 基于jQuery消息提示框插件Tipso
今天要分享的这款jQuery消息提示框插件名叫Tipso,它的特点是可以定义提示框的显示位置,以及动态改变提示框的提示内容,应该说是一款相当灵活的jQuery消息提示框插件.效果图如下: 在线预览 ...
- jQuery消息提示框插件Tipso
在线演示 本地下载
- 强大的响应式jQuery消息通知框和信息提示框插件
lobibox是一款功能很强大的jQuery消息通知框和信息提示框插件.这个插件分为两个部分:消息通知框和信息提示框.它能很好的结合Bootstrap使用. 信息提示框 lobibox的信息提示框能够 ...
- jQuery EasyUI 提示框(Messager)用法
jQuery EasyUI 提示框(Messager)不仅强大,而且也不用任何的HTML代码,只需要按照<jQuery EasyUI框架使用文档>包含必要文件后,在$(function() ...
- JS~Boxy和JS模版实现一个标准的消息提示框
面向对象的封装 面向对象一个入最重要的特性就是“封装”,将一些没有必要公开的方法和属性以特定的方式进行组装,使它对外只公开一个接口,外界在调用它时,不需要关注它实现的细节,而只要关注它的方法签名即可, ...
- 基于jquery的提示框JavaScript 插件,类Bootstrap
目录 基于jquery的提示框JavaScript 插件,类Bootstrap 基于jquery的提示框JavaScript 插件,类Bootstrap 源码 github地址: https://gi ...
- (二)easyUI之消息提示框
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding= ...
- 自定义iOS 中推送消息 提示框
看到标题你可能会觉得奇怪 推送消息提示框不是系统自己弹出来的吗? 为什么还要自己自定义呢? 因为项目需求是这样的:最近需要做 远程推送通知 和一个客服系统 包括店铺客服和官方客服两个模块 如果有新的消 ...
- Android第三方开源对话消息提示框:SweetAlertDialog(sweet-alert-dialog)
Android第三方开源对话消息提示框:SweetAlertDialog(sweet-alert-dialog) Android第三方开源对话消息提示框:SweetAlertDialog(sweet- ...
随机推荐
- 每天一个linux命令(9):nl命令
nl命令在linux系统中用来计算文件中行号.nl 可以将输出的文件内容自动的加上行号!其默认的结果与 cat -n 有点不太一样, nl 可以将行号做比较多的显示设计,包括位数与是否自动补齐 0 等 ...
- 软工实践练习——使用Git进行代码管理
GITHUB上的预备活动: 注册 创建小组Organization,邀请组员进来 将代码库fork到小组Organization底下 下载并使用GIT: Git的安装 使用Git进行代码管理 1.从百 ...
- 使用background和background-image对CSS优先级造成影响
在写一个关于背景图的CSS时候发现一个奇怪的现象, 原图: 如下代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitiona ...
- JAVA的整型与字符串相互转换
1如何将字串 String 转换成整数 int? A. 有两个方法: 1). int i = Integer.parseInt([String]); 或 i = Integer.parseInt([S ...
- BZOJ-2186 沙拉公主的困惑 线性筛(筛筛筛)+线性推逆元
2186: [Sdoi2008]沙拉公主的困惑 Time Limit: 10 Sec Memory Limit: 259 MB Submit: 2417 Solved: 803 [Submit][St ...
- 学习笔记--函数式线段树(主席树)(动态维护第K极值(树状数组套主席树))
函数式线段树..资瓷 区间第K极值查询 似乎不过似乎划分树的效率更优于它,但是如果主席树套树状数组后,可以处理动态的第K极值.即资瓷插入删除,划分树则不同- 那么原理也比较易懂: 建造一棵线段树(权值 ...
- 最新版本的DBCP数据源配置
弄了我一下午,把该加的包都加进去了还是没用,后来把DBCP的包打开来看看才发现路径不对.配置如下: <!-- 使用dbcp配置数据源 --> <bean id="dataS ...
- webkit模块介绍
一.Webkit模块 用到的第三方库如下: cairo 一个2D绘图库 casqt Unicode处理用的库,从QT中抽取部分代码形成的 expat 一个XML SAX解析器的库 freety ...
- MySQL逻辑备份与恢复
备份:mysqldump -uroot -p yyzc department > /home/admin/yyzc_backup.sql 恢复:mysql -uroot -p yyzc < ...
- 怎样分析java线程堆栈日志
注: 该文章的原文是由 Tae Jin Gu 编写,原文地址为 How to Analyze Java Thread Dumps 当有障碍,或者是一个基于 JAVA 的 WEB 应用运行的比预期慢的时 ...