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

随机推荐

转：xampp-php5.6下安装memcached.exe
1.下载PHP对应版本的php_memcache.dll,我的PHP 5.6.3 所以下载 ,根据phpinfo输出的信息来找出匹配的版本: (1)看 Compiler,的后缀,一般带有vc11的字样 ...
BootStrap基本控件
简介 BootStrap是一个用于快速开发web应用程序和网站的前端框架. BootStrap是基于HTML, CSS, JavaScript. BootStrap是由Twitter的Mark Ott ...
ANdroid5.0不能隐式启动service，必须显示，解决办法，加服务端包名
Intent intent = new Intent(); intent.setAction("com.viaembedded.veonvif.RemoteService");// ...
Linux驱动学习之什么是驱动？
一.什么是驱动? 1: 驱动一词的字面意思 2: 物理上的驱动 3: 硬件中的驱动 4: linux内核驱动.软件层面上的驱动广义上是指:这一段代码操作了硬件去动,所以这一段代码就叫硬件的驱动程序. ...
Linux设备驱动模型之I2C总线
一.I2C子系统总体架构 1.三大组成部分 (1)I2C核心(i2c-core):I2C核心提供了I2C总线驱动(适配器)和设备驱动的注册.注销方法,提供了与具体硬件无关的I2C读写函数. (2)I2 ...
S5PV210的电阻触摸屏&ADC控制器
一.ADC与触摸屏控制器结构框图 1.S5PV210一共支持10路模拟输入,分别为AIN0-AIN9.其中AIN0和AIN1是只做模拟输入的,AIN2-AIN9分别可以支持2个电阻式触摸屏,所以这个就 ...
PHP中的特殊符号
<?php 注解符号: // 单行注解 /* */ 多行注解引号的使用 ' ' 单引号,没有任何意义,不经任何处理直接拿过来; " "双引号,php动态处理然后输出,一般用 ...
spark 特殊函数
private var seed: Long = System.nanoTime()//返回最准确的可用系统计时器的当前值,以毫微秒为单位 require(storageLevel != Storag ...
Git命令学习摘要
1.git init --初始化git项目 2.git status --查看项目的状态 3.git add filename --添加文件到项目 4.git diff filename --查看工 ...
MySQL 安装和启动服务，“本地计算机上的 MySQL 服务启动后停止。某些服务在未由其他服务或程序使用时将自动停止。”
MySQL 安装和启动服务,以及遇到的问题 MySQL版本: mysql-5.7.13-winx64.zip (免安装,解压放到程序文件夹即可,比如 C:\Program Files\mysql-5. ...

jquery之右下角消息提示框

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

随机推荐

热门专题