banneralert.js插件模拟IOS7顶部或者底部弹窗通知效果

基本演示

$("body").showbanner({
	title : "lanrenzhijia.com",
	icon : "images/icon.png",
	content : "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent aliquet et purus non mattis. Curabitur bibendum magna at augue convallis, placerat luctus tellus faucibus."
});

图标

$("body").showbanner({
	title : "lanrenzhijia.com",
	content : "无图标横幅演示"
});

$("body").showbanner({
	title : "Chrome",
	icon : "images/chrome.png",
	content : "自定义图标横幅演示"
});

不显示把手

$("body").showbanner({
	title : "lanrenzhijia.com",
	icon : "images/icon.png",
	handle : false,
	content : "No handle"
});

把手的作用：点击后直接消除横幅，忽略持续时间设置。

声音

$("body").showbanner({
	title : "lanrenzhijia.com",
	icon : "images/icon.png",
	content : "带有声音的横幅",
	sound : "sounds/sms-received1.mp3"
});

此功能不支持IE8及更低版本的浏览器。

位置

$("body").showbanner({
	title : "lanrenzhijia.com",
	icon : "images/icon.png",
	content : "底部横幅演示",
	position : "bottom"
});

显示、停留与隐藏的持续时间

$("body").showbanner({
	title : "lanrenzhijia.com",
	icon : "images/icon.png",
	content : "无动画",
	show_duration : 0,
	hide_duration : 0
});

$("body").showbanner({
	title : "lanrenzhijia.com",
	icon : "images/icon.png",
	content : "200毫秒进入 持续时间1000毫秒 700毫秒退出",
	show_duration : 200,
	duration : 1000,
	hide_duration : 700
});

$("body").showbanner({
	title : "lanrenzhijia.com",
	icon : "images/icon.png",
	content : "匀速进入和匀速退出横幅",
	show_easing : "linear",
	hide_easing : "linear"
});

事件属性

$("body").showbanner({
	title : "lanrenzhijia.com",
	icon : "images/icon.png",
	content : "点这里",
	onClick : function(){
		alert("横幅点击事件测试");
	}
});

该事件在用户点击横幅后触发。

$("body").showbanner({
	title : "lanrenzhijia.com",
	icon : "images/icon.png",
	content : "请等待这条横幅消失",
	onHide : function(){
		alert("横幅已消失");
	}
});

该事件在横幅消失后触发。

通过附加class功能来自定义样式

$("body").showbanner({
	title : "lanrenzhijia.com",
	icon : "images/icon.png",
	content : "横幅样式演示",
	addclass : "mybannerstyle1"
});

Demo页面中的css写在demo.css中

点击这里展开/隐藏CSS部分

.banneralert.mybannerstyle1{
	background:#FFF;
	background:rgba(255,255,255,.85);
	border-bottom:1px solid #999;
}
.banneralert.mybannerstyle1 .bannertitlebar{
	color:#333;
}
.banneralert.mybannerstyle1 .bannericon{
	border-radius:50%;
	border:1px solid #999;
}
.banneralert.mybannerstyle1 .bannercontent{
	color:#333;
}
.banneralert.mybannerstyle1 .bannerhandle{
	background:#333;
	height:8px;
	width:30px;
	border-radius:50%;
}

$("body").showbanner({
	title : "lanrenzhijia.com",
	icon : "images/icon.png",
	content : "横幅样式演示2",
	addclass : "mybannerstyle2"
});

点击这里展开/隐藏CSS部分

.banneralert.mybannerstyle2{
	background-color: #444;
	background-color: rgba(68,68,68,.9);
	background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAG0lEQVQIW2NkYGA4A8QmQAwGjDAGNgGwSgwVAFVOAgV/1mwxAAAAAElFTkSuQmCC");
}
.banneralert.mybannerstyle2 .bannertitlebar{
	color:#CCC;
	text-align:center;
	font-size:16px;
}
.banneralert.mybannerstyle2 .bannercontent{
	color:#EEE;
	text-align:center;
	margin:5px auto;
	font-size:14px;
}
.banneralert.mybannerstyle2 .bannerhandle{
	background:none;
	width:30px;
	border:1px solid #999;
}

HTML

$("body").showbanner({
	title : "还可以在横幅上使用<i>HTML</i>",
	icon : "images/lanrenlogo.png",
	content : "HTML横幅演示<input value='文本框'><select><option>下拉选择框</option></select>\n<input type='button' value='按钮'>\n<font color='#FF0000'>颜色</font>",
	html: true
});

如果不声明HTML所有字符将直接显示，例如：

点击这里展开/隐藏未显示的部分

$("body").showbanner({
	title : "还可以在横幅上使用<i>HTML</i>",
	icon : "images/lanrenlogo.png",
	content : "HTML横幅演示<input value='文本框'><select><option>下拉选择框</option></select>\n<input type='button' value='按钮'>\n<font color='#FF0000'>颜色</font>"
});

选项说明

选项名称	默认值	描述
title		横幅的标题。
icon		横幅的图标。
content		横幅的内容。
handle	true	是否显示把手，把手的作用：点击后直接消除横幅，忽略持续时间设置。
addClass		要附加到横幅元素上的class，可用于自定义样式等，多个class请用空格分隔。
sound		横幅弹出时播放的声音。
position	top	横幅的位置，包含top（顶部）和bottom（底部）两个可用的值。
html	false	是否把标题和内容作为HTML添加到横幅元素上。
show_duration	400	横幅弹出动画的持续时间（单位：毫秒）。
show_easing	swing	横幅弹出动画的时间曲线，包含swing（缓动）和linear（匀速）两个可用的值。
duration	3000	横幅停留在页面上的时间（单位：毫秒）。
hide_duration	400	横幅收回动画的持续时间（单位：毫秒）。
hide_easing	swing	横幅收回动画的时间曲线，包含swing（缓动）和linear（匀速）两个可用的值。
onClick		回调函数，点击横幅时执行的脚本。
onHide		回调函数，横幅消失后执行的脚本。

用法

首先，在页面上引入jQuery，然后引入banneralert.js和banneralert.css两个文件。（或压缩版banneralert.min.js）

其中，banneralert.js是插件主要部分的js，banneralert.css中定义的是横幅的默认样式，可以根据需要进行编辑。
横幅的HTML结构是通过js动态添加到页面上的，所以不需要在页面上额外准备内容。

只需要运行$("body").showbanner(选项);即可，选项说明和示例在上文已经列出。

Banneralert.js 演示