ajax实现消息提示框,jquery消息提示框

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

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

4个参数，有2个是可选

调用

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

类型：

0 为加载

1 为成功

2 为失败

3 为警告

显示时间：

为整数型

大于0，

小于0或非整数一直存在，不消失！

效果图：

渣渣效果一份：

提示框

.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; }

$("#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 = [

'',

'',

'',

''

];

var temp = type ? arrayHTML[type] : arrayHTML[0];

var html = '

';

html+= arrayHTML[type] + txt + '

';

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

}

}

}

});

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

基于jQuery消息提示框插件Tipso

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

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

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

jQuery EasyUI 提示框(Messager)用法

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

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

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

基于jquery的提示框JavaScript 插件，类Bootstrap

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

(二)easyUI之消息提示框

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

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

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

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

随机推荐

DropDownList 下拉框选择改变，促发事件和防全局刷新(记录)

代码:

Python基础-day2

1.Python模块python 中导入模块使用import语法格式:import module_name示例1: 导入os模块system('dir')列出当前目录下的所有文件 # _*_ codi ...

JS移动端滑屏事件

来看看在pc上面的几个事件:onmousedown,onmousemove,onmouseup 我相信大家对这几个事件一定不陌生,第一个onmousedown表示鼠标按下,第二个onmousemove ...

WebGoat学习——跨站请求伪造(Cross Site Request Forgery (CSRF))

跨站请求伪造(Cross Site Request Forgery (CSRF)) 跨站请求伪造(Cross Site Request Forgery (CSRF))也被称为:one click at ...

android开发中如何结束所有的activity

每一个activity都有自己的生命周期,被打开了最终就要被关闭. 四种结束当前的activity方法 //关闭当前activity方法一 finish(); //关闭当前界面方法二 android. ...

ECshop 每个数据库表结构说明

ecs_account_log // 用户账目日志表 ecs_activity // 活动表(代码,名称,开始,结束,描述) ecs_ad // 广告表(位置,类型,名称,链接,图片,开始,结束,广告 ...

MINA的session.close

现象:客户端session.close之后,并没有提出,客户端程序一直hold在那里: 解决:调用了session.getService().dispose(false)方法后,客户端程序完成了退出 ...

用Jquery 仿VS 样式的 导航栏插件

在开发B/S 项目过程中,根据主界面设计要求,需要做一个类似VS 左边工具栏样式的菜单导航栏,在网上搜索无果后,于是决定自已做一个. 由于前台用JQuery开发, 想到网上很多人用JQuery做插件, ...

Zeroc Ice Slice语言使用 HelloWorld

Slice介绍         为了开发多语言支持的RPC服务,需要一种中立的新语言来定义这个服务接口,以便各个编程语言能够准确无误地理解和翻译接口,为此Ice设计了Slice语言.Ice开发的第一步 ...

软件工程(FZU2015) 赛季得分榜，第9回合

SE_FZU目录:1 2 3 4 5 6 7 8 9 10 11 12 13 积分规则 积分制: 作业为10分制,练习为3分制:alpha30分: 团队项目分=团队得分+个人贡献分 个人贡献分: 个人 ...