Banner.js demo

基本演示

$("body").showbanner({

	title : "jq22.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 : "jq22.com",

	content : "无图标横幅演示"

});

$("body").showbanner({

	title : "Chrome",

	icon : "images/chrome.png",

	content : "自定义图标横幅演示"

});

不显示把手

$("body").showbanner({

	title : "jq22.com",

	icon : "images/icon.png",

	handle : false,

	content : "No handle"

});

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

声音

$("body").showbanner({

	title : "jq22.com",

	icon : "images/icon.png",

	content : "带有声音的横幅",

	sound : "sounds/sms-received1.mp3"

});

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

位置

$("body").showbanner({

	title : "jq22.com",

	icon : "images/icon.png",

	content : "底部横幅演示",

	position : "bottom"

});

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

$("body").showbanner({

	title : "jq22.com",

	icon : "images/icon.png",

	content : "无动画",

	show_duration : 0,

	hide_duration : 0

});

$("body").showbanner({

	title : "jq22.com",

	icon : "images/icon.png",

	content : "200毫秒进入 持续时间1000毫秒 700毫秒退出",

	show_duration : 200,

	duration : 1000,

	hide_duration : 700

});

$("body").showbanner({

	title : "jq22.com",

	icon : "images/icon.png",

	content : "匀速进入和匀速退出横幅",

	show_easing : "linear",

	hide_easing : "linear"

});

事件属性

$("body").showbanner({

	title : "jq22.com",

	icon : "images/icon.png",

	content : "点这里",

	onClick : function(){

		alert("横幅点击事件测试");

	}

});

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

$("body").showbanner({

	title : "jq22.com",

	icon : "images/icon.png",

	content : "请等待这条横幅消失",

	onHide : function(){

		alert("横幅已消失");

	}

});

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

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

$("body").showbanner({

	title : "jq22.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 : "jq22.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/html5logo.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/html5logo.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 演示