jquery之右下角消息提示框

messager.js

(function (jQuery) {

    var window;

    var obj = new Object();

    obj.version = '@1.0';

    obj.title = '信息提示';

    obj.time = 4000;

    obj.anims = { 'type': 'slide', 'speed': 600 };

    obj.inits = function (title, text) {

        window = $('<div class="messager"><div class="messager-header"><div class="messager-close">×</div><div class="meaaager-title">'+title+'</div></div> <div class="messager-bottom"><div class="messager_content">'+text+'</div></div></div>')

        .appendTo('body')

        .hide();

        window.find('div.messager-close').click(function () {

            this.parentElement.parentElement.remove();

        });

    };

    obj.show = function (title, text, time) {

        if (title == 0 || !title) title = obj.title;

        obj.inits(title, text);

        if (time >= 0) obj.time = time;

        switch (this.anims.type) {

            case 'slide': window.slideDown(obj.anims.speed); break;

            case 'fade': window.fadeIn(obj.anims.speed); break;

            case 'show': window.show(obj.anims.speed); break;

            default: window.slideDown(obj.anims.speed); break;

        }

    };

    obj.anim = function (type, speed) {

        if (type != 0 && type) obj.anims.type = type;

        if (speed != 0 && speed) {

            switch (speed) {

                case 'slow':; break;

                case 'fast': obj.anims.speed = 200; break;

                case 'normal': obj.anims.speed = 400; break;

                default:

                    obj.anims.speed = speed;

            }

        }

    }

    jQuery.messager = obj;

    return jQuery;

})(jQuery);

messager.css

.messager

{

    position: absolute;

    background: #E0ECFF;

    border: 1px solid #95B8E7;

    z-index:;

    overflow: hidden;

    bottom: 0px;

    right: 0px;

    width: 200px;

    height: 100px;

}

.messager-header

{

    border:1px solid #fff;

    border-bottom:none;

    width:100%;

    font-size:12px;

    overflow:hidden;

    height:25px;

    color:#1f336b;

}

.messager-close

{

    float:right;

    padding:5px 0 5px 0;

    width:16px;

    color:red;

    font-size:12px;

    font-weight:bold;

    text-align:center;

    cursor:pointer;

    overflow:hidden;

}

.meaaager-title

{

    padding:5px 0 5px 5px;

    width:100px;

    text-align:left;

    overflow:hidden;

}

.messager-bottom

{

    padding-bottom:5px;

    border:1px solid #fff;

    border-top:none;

    width:100%;

    height:auto;

    font-size:12px;

}

.messager_content

{

    margin:0 5px 0 5px;

    border:#b9c9ef 1px solid;

    padding:10px 0 10px 5px;

    font-size:12px;

    width:183px;

    height:50px;

    color:#1f336b;

    text-align:left;

    overflow:hidden;

}

page

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="AlarmData.WebForm1" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

    <title></title>

    <link href="messager.css" rel="stylesheet" />

    <script type="text/javascript" src="jquery-1.7.1.js"></script>

    <script src="messager.js"></script>

    <script type="text/javascript">

        $(function () {

            $("#showMessagerNoClose").click(function () {

                $.messager.show('不会关闭的消息', '要自己点关闭的X才可以哦！', 0);

            });

        });

    </script>

</head>

<body>

    <form id="form1" runat="server">

    <div>

    <input type="button" id="showMessagerNoClose" value="不自动关闭消息" />

    </div>

    </form>

</body>

</html>

参考地址：http://www.cnblogs.com/linyijia/p/3467109.html

jquery之右下角消息提示框的更多相关文章

【WPF】屏幕右下角消息提示框
WPF做一个仿QQ的右下角消息提示窗,网上找到几个Demo后,选了一个比较好用的. 博客 http://blog.csdn.net/huangli321456/article/details/5052 ...
Jquery右下角消息提示框
找了好久,终于找到一个不错的提示框jquery,免费给大家一起用下吧(可是花了我很多积分哦),顺便重写了一下样式,原来的样式真的不敢恭维啊... 下载地址:http://files.cnblogs.c ...
jquery toastmessage （Jquery类似安卓消息提示框）
Do you wanna have some toasts ? jquery-toastmessage-plugin is a JQuery plugin which provides android ...
基于jQuery消息提示框插件Tipso
今天要分享的这款jQuery消息提示框插件名叫Tipso,它的特点是可以定义提示框的显示位置,以及动态改变提示框的提示内容,应该说是一款相当灵活的jQuery消息提示框插件.效果图如下: 在线预览 ...
JS~Boxy和JS模版实现一个标准的消息提示框
面向对象的封装面向对象一个入最重要的特性就是“封装”,将一些没有必要公开的方法和属性以特定的方式进行组装,使它对外只公开一个接口,外界在调用它时,不需要关注它实现的细节,而只要关注它的方法签名即可, ...
PowerShe 消息提示框测试
1. 使用powerShell 弹出一个简单的消息框,代码如下,创建test.ps1脚本文件. $ConfirmPreference = 'None' $ws = New-Object -ComObj ...
第一百九十六节，jQuery EasyUI，Tooltip(提示框)组件
jQuery EasyUI,Tooltip(提示框)组件学习要点: 1.加载方式 2.属性列表 3.事件列表 4.方法列表本节课重点了解 EasyUI 中 Tooltip(提示框)组件的使用方法, ...
wpf实现仿qq消息提示框
原文:wpf实现仿qq消息提示框版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/huangli321456/article/details/5052 ...
UWP中的消息提示框(二)
在UWP中的消息提示框(一)中介绍了一些常见的需要用户主动去干涉的一些消息提示框,接下来打算聊聊不需要用户主动去干涉的一些消息提示框.效果就是像双击退出的那种提示框. 先说说比较简单的吧,通过系统To ...

随机推荐

HDOJ（1348）二维凸包
Wall http://acm.hdu.edu.cn/showproblem.php?pid=1348 题目描述:有个国王想在他的城堡外面修围墙,围墙与城堡的最小距离为L,要求围墙长度最短.求围墙的长 ...
MarkDown初体验
初体验写在前面一周前第一次听说了MarkDown这个编辑器,通过它知道了LaTex,正好满足了我多年对网上博客里的公式简陋的表达的需求.起初,只是用到了LaTex公式这一个功能 , 对于主要文字的 ...
VC++ 实现文件与应用程序关联
日常工作中,doc文件直接双击后,就能启动word软件,并读取该文档的内容在软件中显示,这都得益于注册表的配置,我们的软件也需要实现这样的功能,该如何写注册表以及写入哪些内容呢?下面的两个函数就能实现 ...
MFC 对话框响应OnChar()
最近在写程序时,出现了对话框里面不接收键盘消息的情况,特别搜索了以下内容 MFC中对话框是不会直接响应OnChar和OnKeyDown消息的,会被其它控件拦截,测试时发现不会进入这两个函数,必须重定 ...
关于js中的for(var in)遍历属性报错问题
之前遇到过这个问题,但是没找到问题的所在,将for(var i in array){} 改成了for(var i ;i<array.length;i++)循环,但是今天又遇到了,mark一下错 ...
sql一个表中两个字段合并求和
sql一个表中两个字段,合并求和 SELECT SUM(字段a+'.'+字段b) as total from TABLE
Firefly安装ROS及ssh远程登录配置
一.在Linux firefly 3.10.0 上安装ROS-indigo 快捷键 CTRL + ALT + T 打开终端并安装ROS-indigo sudo sh -c 'echo "d ...
史航第12次作业&总结
作业1:找出最长的字符串 #include <stdio.h> #include <string.h> int main() { ],strings[][]; ; printf ...
spring mvc 4.3.2 + mybatis 3.4.1 + mysql 5.7.14 +shiro 幼儿园收费系统之动态组合条件查询
实际应用中,系统设计无法预料到用户最终的查询条件是怎样的.通常的做法是给出一些限制死的查询条件让用户查询.业务稍有改动,就要重新设计界面,增加查询字段等,费时费力. 比较好的做法是,除了常用的查询外, ...
mac升级后提示pod: command not found
问题:升级mac到10.12使用pod,提示pod: command not found 解决方法:sudo gem install -n /usr/local/bin cocoapods 如 ...

jquery之右下角消息提示框

jquery之右下角消息提示框的更多相关文章

随机推荐

热门专题