<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>banneralert.js插件模拟IOS7顶部或者底部弹窗通知效果</title>
<link href="css/banneralert.css" rel="stylesheet" />
<link href="css/demo.css" rel="stylesheet" />
</head>
<body>
<h1>Banneralert.js 演示</h1>
<div class="section">
<h3>基本演示</h3>
<button class="basicdemo">弹出横幅</button>
<pre>$("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."
});</pre>
</div>
<div class="section">
<h3>图标</h3>
<button class="noico">无图标</button>
<pre>$("body").showbanner({
title : "lanrenzhijia.com",
content : "无图标横幅演示"
});</pre>
<hr />
<button class="myico">自定义图标</button>
<pre>$("body").showbanner({
title : "Chrome",
icon : "images/chrome.png",
content : "自定义图标横幅演示"
});</pre>
</div>
<div class="section">
<h3>不显示把手</h3>
<button class="nohandle">弹出横幅</button>
<pre>$("body").showbanner({
title : "lanrenzhijia.com",
icon : "images/icon.png",
handle : false,
content : "No handle"
});</pre>
<div class="note">把手的作用：点击后直接消除横幅，忽略持续时间设置。</div>
</div>
<div class="section">
<h3>声音</h3>
<button class="soundban">弹出横幅</button>
<pre>$("body").showbanner({
title : "lanrenzhijia.com",
icon : "images/icon.png",
content : "带有声音的横幅",
sound : "sounds/sms-received1.mp3"
});</pre>
<div class="note">此功能不支持IE8及更低版本的浏览器。</div>
</div>
<div class="section">
<h3>位置</h3>
<button class="bottomdemo">底部</button>
<pre>$("body").showbanner({
title : "lanrenzhijia.com",
icon : "images/icon.png",
content : "底部横幅演示",
position : "bottom"
});</pre>
</div>
<div class="section">
<h3>显示、停留与隐藏的持续时间</h3>
<button class="noanim">无动画</button>
<pre>$("body").showbanner({
title : "lanrenzhijia.com",
icon : "images/icon.png",
content : "无动画",
show_duration : 0,
hide_duration : 0
});</pre>
<hr />
<button class="durtest1">200毫秒进入 持续时间1000毫秒 700毫秒退出</button>
<pre>$("body").showbanner({
title : "lanrenzhijia.com",
icon : "images/icon.png",
content : "200毫秒进入 持续时间1000毫秒 700毫秒退出",
show_duration : 200,
duration : 1000,
hide_duration : 700
});</pre>
<hr />
<button class="easingtest">匀速进入和匀速退出</button>
<pre>$("body").showbanner({
title : "lanrenzhijia.com",
icon : "images/icon.png",
content : "匀速进入和匀速退出横幅",
show_easing : "linear",
hide_easing : "linear"
});</pre>
</div>
<div class="section">
<h3>事件属性</h3>
<button class="clickevt">点击事件</button>
<pre>$("body").showbanner({
title : "lanrenzhijia.com",
icon : "images/icon.png",
content : "点这里",
onClick : function(){
alert("横幅点击事件测试");
}
});</pre>
<div class="note">该事件在用户点击横幅后触发。</div>
<hr />
<button class="hideevt">消失事件</button>
<pre>$("body").showbanner({
title : "lanrenzhijia.com",
icon : "images/icon.png",
content : "请等待这条横幅消失",
onHide : function(){
alert("横幅已消失");
}
});</pre>
<div class="note">该事件在横幅消失后触发。</div>
</div>
<div class="section">
<h3>通过附加class功能来自定义样式</h3>
<button class="css1">测试1</button>
<pre>$("body").showbanner({
title : "lanrenzhijia.com",
icon : "images/icon.png",
content : "横幅样式演示",
addclass : "mybannerstyle1"
});</pre>
<div class="note">Demo页面中的css写在demo.css中</div>
<a onclick="$('.toggle1').slideToggle()" class="togglea">点击这里展开/隐藏CSS部分</a>
<pre class="dtoggle toggle1">.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%;
}</pre>
<hr />
<button class="css2">测试2</button>
<pre>$("body").showbanner({
title : "lanrenzhijia.com",
icon : "images/icon.png",
content : "横幅样式演示2",
addclass : "mybannerstyle2"
});</pre>
<a onclick="$('.toggle2').slideToggle()" class="togglea">点击这里展开/隐藏CSS部分</a>
<pre class="dtoggle toggle2">.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;
}</pre>
</div>
<div class="section">
<h3>HTML</h3>
<button class="htmldemo">弹出横幅</button>
<pre>$("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
});</pre>
<div class="note">如果不声明HTML所有字符将直接显示，例如：</div>
<a onclick="$('.nohtmlsection').slideToggle()" class="togglea">点击这里展开/隐藏未显示的部分</a>
<div class="dtoggle nohtmlsection">
<button class="nohtmldemo">弹出横幅</button>
<pre>$("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>"
});</pre>
</div>
</div>
<div class="section" style="padding-left:5px;padding-right:5px;padding-bottom:5px;">
<h3>选项说明</h3>
<table width="100%" border="0" cellspacing="0">
<tr style="background:#DDD;color:#333;">
<td width="130" style="border-top-left-radius:5px;"><b>选项名称</b></td>
<td width="60"><b>默认值</b></td>
<td style="border-top-right-radius:5px;"><b>描述</b></td>
</tr>
<tr>
<td>title</td>
<td> </td>
<td>横幅的标题。</td>
</tr>
<tr>
<td>icon</td>
<td> </td>
<td>横幅的图标。</td>
</tr>
<tr>
<td>content</td>
<td> </td>
<td>横幅的内容。</td>
</tr>
<tr>
<td>handle</td>
<td>true</td>
<td>是否显示把手，把手的作用：点击后直接消除横幅，忽略持续时间设置。</td>
</tr>
<tr>
<td>addClass</td>
<td> </td>
<td>要附加到横幅元素上的class，可用于自定义样式等，多个class请用空格分隔。</td>
</tr>
<tr>
<td>sound</td>
<td> </td>
<td>横幅弹出时播放的声音。</td>
</tr>
<tr>
<td>position</td>
<td>top</td>
<td>横幅的位置，包含top（顶部）和bottom（底
banneralert.js插件模拟IOS7顶部或者底部弹窗通知效果.zip
版权申诉
169 浏览量
2023-09-25
14:25:31
上传
评论
收藏 59KB ZIP 举报
banneralert.js插件模拟IOS7顶部或者底部弹窗通知效果.zip （10个子文件） 
js 
example.js 4KB jquery-1.11.0.min.js 94KB banneralert.min.js 2KB css demo.css 4KB banneralert.css 807B
index.html 10KB images 
chrome.png 1KB sms-received1.mp3 23KB lanrenlogo.png 5KB icon.png 1KB资源评论
