移动端安卓和IOS开发框架Framework7教程-消息通知

使用通知组件，你可以让消息看起来像iOS的推送通知一样。

通知组件JavaScript API

要想创建/关闭通知，我们需要调用相关的App方法

myApp.addNotification(parameters) - 通过指定的参数来创建/显示通知

parameters - 包含通知相关的参数的对象。必选。
方法返回一个动态创建的通知体的HTML元素

myApp.closeNotification(notificationElement) - 关闭指定的通知

notificationElement - 通知元素的HTML元素或CSS选择器。必选。

创建一个通知所需要的参数：

参数（Parameter）类型（Type）默认值（Default）参数说明（Description）

title	string		标题。默认和App参数中的`notificationTitle`相同，为`undefined`iOS theme only
subtitle	string		副标题。默认和App参数中的`notificationSubtitle`相同，为`undefined`iOS theme only
media	string		媒体元素（图标或图片） - 包含icon或图片的HTML片段。默认和App参数中的`notificationMedia`相同，为`undefined`iOS theme only
hold	number		通知的停驻时间（单位ms），如果指定了该参数，那么通知将在指定的时间后自动关闭。默认和App参数中的`notificationHold`相同，为`undefined`
closeIcon	boolean	true	是否显示关闭按钮。默认和App参数中的`notificationCloseIcon`相同，为`true`iOS theme only
button	object		Material notification button. Accepts 3 properties: { text: 'close', color: 'blue', close: true } 复制 Where `text` - button text. By default equal to `notificationCloseButtonText` App's parameter `color` - button color `close` - close notification on button click Material theme only
closeOnClick	boolean	false	点击通知的HTML元素时，是否关闭通知。默认和App参数中的`notificationCloseOnClick`相同，为`false`
additionalClass	string		添加给通知HTML元素的类，一般用于自定义样式
custom	string		给通知自定义HTML内容结构（如果你想的话）。如果使用"custom"参数，"title"，"subtitle"，"media"和"closeIcon"参数会被忽略。
onClick	function		点击通知HTML元素的回调函数
onClose	function		通知关闭的回调函数（无论是手动关闭还是通过调用`myApp.closeNotification`方法，都会执行）

HTML布局

通知仅仅是多媒体列表的一种特殊形式。由于一般情况下通知都是直接被javascript调用，因此你通常不需要手动指定它的HTML布局。但是了解它对于理解其原理和自定义样式会非常有帮助。当你创建一个通知时，F7会添加如下形式的"notifications"div到列表区元素中。

<body>
...
<div class="notifications list-block media-list">
<ul>
<li class="notification-item">
<div class="item-content">
<div class="item-media">
</div>
<div class="item-inner">
<div class="item-title-row">
<div class="item-title">
</div>
<div class="item-after">
<a href="#" class="close-notification"></a>
</div>
</div>
<div class="item-subtitle">
</div>
<div class="item-text">
</div>
</div>
</div>
</li>
</ul>
</div>
</body>

复制

自定义通知的布局如下：

<body>
...
<div class="notifications list-block media-list">
<ul>
<li class="notification-item">
</li>
</ul>
</div>
</body>

复制

iOS 示例

<div class="page-content">
<div class="content-block">
<p><a href="#" class="button notification-default">默认通知</a></p>
<p><a href="#" class="button notification-full">包含所有元素</a></p>
<p><a href="#" class="button notification-custom">包含自定义图片</a></p>
<p><a href="#" class="button notification-callback">关闭时触发回调函数</a></p>
</div>
</div>

复制

var myApp = new Framework7();
var mainView = myApp.addView('.view-main');
var $$ = Dom7;
$$('.notification-default').on('click', function () {
myApp.addNotification({
title: 'Framework7',
message: '这是一个包含标题和消息内容的简单通知'
});
});
$$('.notification-full').on('click', function () {
myApp.addNotification({
title: 'Framework7',
subtitle: '通知副标题',
message: 'This is a simple notification message with custom icon and subtitle',
message: '这是一个包含自定义icon和副标题的通知',
media: '<i class="icon icon-f7"></i>'
});
});
$$('.notification-custom').on('click', function () {
myApp.addNotification({
title: '真是个酷炫狂拽的App',
subtitle: '来自土豆的消息',
message: '地瓜地瓜，土豆呼叫地瓜。在9点方向发现如花，BalaBalaBala',
media: '<img width="44" height="44" style="border-radius:100%" src="http://lorempixel.com/output/people-q-c-100-100-9.jpg">'
});
});
$$('.notification-callback').on('click', function () {
myApp.addNotification({
title: '真是个酷炫狂拽的App',
subtitle: '来自土豆的消息',
message: '地瓜地瓜，土豆呼叫地瓜。在9点方向发现如花，BalaBalaBala',
media: '<img width="44" height="44" style="border-radius:100%" src="http://lorempixel.com/output/people-q-c-100-100-9.jpg">',
onClose: function () {
myApp.alert('通知被关闭了~');
}
});
});

复制

实例预览

Material 示例

var myApp = new Framework7({
material: true
});
var mainView = myApp.addView('.view-main');
var $$ = Dom7;
$$('.notification-single').on('click', function () {
myApp.addNotification({
message: 'Simple message'
});
});
$$('.notification-multi').on('click', function () {
myApp.addNotification({
message: 'Multi-line message. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc in magna nisi.',
});
});
$$('.notification-custom').on('click', function () {
myApp.addNotification({
message: 'Nice yellow button',
button: {
text: 'Click me',
color: 'yellow'
}
});
});
$$('.notification-callback').on('click', function () {
myApp.addNotification({
message: 'Close me to see Alert',
button: {
text: 'Close Me',
color: 'lightgreen'
},
onClose: function () {
myApp.alert('Notification closed');
}
});
});

复制