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 ...
随机推荐
- ConCurrent in Practice小记 （3）
ConCurrent in Practice小记 (3) 高级同步技巧 Semaphore Semaphore信号量,据说是Dijkstra大神发明的.内部维护一个许可集(Permits Set),用 ...
- MongoDB-JAVA-Driver 3.2版本常用代码全整理(4) - 地理空间索引
MongoDB的3.x版本Java驱动相对2.x做了全新的设计,类库和使用方法上有很大区别.例如用Document替换BasicDBObject.通过Builders类构建Bson替代直接输入$命令等 ...
- socket-自我总结（2）
这里总结下一个服务端与多个客户端之间的通信. 先看demo: #/usr/bin/env python #_*_coding:utf-8_*_ __author__ = 'ganzl' import ...
- 使用 Entity Framework Core 时，通过代码自动 Migration
一 介绍 在使用 Entity Framework Core (下面就叫 EF Core 吧)进行开发时,如果模型有变动,我们要在用 EF Core 提供的命令行工具进行手工迁移,然后再运行程序.但是 ...
- jquery的hide()和show()
jquery用hide()和show()函数来控制html元素的显示和隐藏. hide()和show()都可以带参数的,hide(1000)表示隐藏所需的时间为1秒.此外还可以用slow,fast参数 ...
- 纯css来画图-border应用
基础知识: Css画图大部分是使用了css中的border来绘画图形,那首先我们就来看下border的基础知识,至于其他的遇到了再讲吧! Border的基础知识: 一般我们这样简写: border: ...
- 关于readdir返回值中struct dirent.d_type的取值有关问题（转）
关于readdir返回值中struct dirent.d_type的取值问题 原网页链接 http://www.gnu.org/software/libc/manual/html_node/Direc ...
- linux 系统服务
此文涉及的命令:service.chkconfig. 概念 daemon 的主要分类 stand_alone:此 daemon 可以自行单独启动服务 属性:daemon 启动并加载到内存后就一直占用内 ...
- 转载：shell脚本之sed使用----替换、变量、转义字符
sed替换的基本语法为:----s后面跟的是分隔符,原字符串可使用.*这种正则表达式进行整行替换 代码如下: sed 's/原字符串/替换字符串/' 单引号里面,s表示替换,三根斜线中间是替换的样式, ...
- 转：union和union all的区别
Union因为要进行重复值扫描,所以效率低.如果合并没有刻意要删除重复行,那么就使用Union All 两个要联合的SQL语句 字段个数必须一样,而且字段类型要“相容”(一致): 如果我们需要将两个 ...