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

随机推荐

[整理] ES5 词法约定文档树状图
将ES5 词法说明整理为了树状图,方便查阅,请自行点开小图看大图:
OWIN-WebAPI-Windows Service
tks: https://github.com/danesparza/OWIN-WebAPI-Service add 2015 0717:http://kb.cnblogs.com/page/5092 ...
第五次课堂总结x
一.知识点: 1.while语句循环体语句: while语句里的表达式可以是任何合法的表达式,循环体则只可以表达一条语句. while的循环体语句需要能改变循环条件的真假条件. ...
myeclipse自动import
不管包什么的直接把代码全写出来再按 ctrl + shift +o 这是自动导包的前提是你写的代码是正确的
【SGU 104】Little shop of flowers
题意每个花按序号顺序放到窗口,不同窗口可有不同观赏值,所有花都要放上去,求最大观赏值和花的位置. 分析 dp,dp[i][j]表示前i朵花最后一朵在j位置的最大总观赏值. dp[i][j]=max( ...
解决Oracle忘记密码问题
在使用ORACLE的过程中,会出现各种各样的问题,各种各样的错误,其中ORA-12899就是前段时间我在将数据导入到我本地机器上的时候一直出现的问题.不过还好已经解决了这个问题,现在分享一下,解决方案 ...
easyVS
easyVS 详细说明点这里
UVA1220Party at Hali-Bula(树的最大独立集 + 唯一性判断)
http://acm.hust.edu.cn/vjudge/contest/view.action?cid=105116#problem/H 紫书P282 员工和直属老板只能选一个,最多选多少人思路 ...
关于updateElement接口
1.bool UpdateGameElement(const struct_game_element& ele, gs_dbs_user_info_op_req& db_req, :: ...
strstr()
char * __cdecl strstr ( const char * str1, const char * str2 ) { char *cp = (char *) str1; char *s1, ...

jquery消息提示框

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

随机推荐

热门专题