srcmini本文概述
通知用于显示必需的消息, 这些消息看起来像Push（或本地）iOS通知。
Framework7通知的用法：
| 指数 | 通知用法 | 描述 |
|---|---|---|
| 1) | 通知JavaScript API | 还可以使用相关的app方法, 使用JavaScript添加或关闭通知。 |
| 2) | 通知布局 | Framework7通知将通过使用JavaScript添加。 |
| 3) | 示例iOS | Framework7允许你在iOS布局中使用不同类型的通知。 |
| 4) | 示例材料 | Framework7通知也可以在材质布局中使用。 |
通知JavaScript API
你可以使用以下App方法将JavaScript与Framework7通知一起使用：
myApp.addNotification（parameters）：此方法用于添加/显示通知。它接受带有通知参数的必需对象。此方法返回带有动态创建的通知元素的HTMLElement。
myApp.closeNotification（notificationElement）：此方法用于关闭指定的通知, 该通知接受notificationElement作为强制性参数, 它是HTMLElement或必需通知的字符串。
添加新通知时, 请参阅所需的通知参数：
| 指数 | 参数 | 类型 | 描述 |
|---|---|---|---|
| 1) | title | string | 它代表通知标题, 默认情况下等于notifyTitle应用程序的参数。它仅与iOS主题一起使用。 |
| 2) | subtitle | string | 默认情况下, 它代表通知字幕, 并且等于notificationSubtitle应用的参数。它仅与iOS主题一起使用。 |
| 3) | media | string | 它是通知媒体元素, 它是带有图标或图像的HTML字符串。默认情况下, 它等于notificationMedia应用程序的参数。它仅与iOS主题一起使用。 |
| 4) | hold | number | 在指定的超时后, 它用于自动关闭通知。默认情况下, 它等于notificationHold应用程序的参数。它仅与iOS主题一起使用。 |
| 5) | closeIcon | boolean | 禁用该选项可从通知中删除关闭图标。默认情况下, 它等于notifyCloseIcon应用程序的参数。 |
| 6) | button | object | 这是物料通知按钮, 它接受3个属性, 即文本, 颜色和关闭。它仅与素材主题一起使用。 |
| 7) | closeOnClick | boolean | 如果将其设置为true, 则单击通知后将关闭它。默认情况下, 它等于notifyCloseOnClick应用程序的参数。 |
| 8) | additionalClass | string | 它用于将额外指定的CSS类添加到通知元素。 |
| 9) | custom | string | 当你要在自定义HTML布局中使用通知时, 请使用此参数。使用此参数时, title, subtitle, media和closeIcon参数将被忽略。 |
| 10) | onClick | function | 单击通知项后, 将执行该回调函数。 |
| 11) | onClose | function | 通知关闭时将执行此回调函数。 |
通知布局
你可以使用JavaScript进行通知。它也可以用于自定义样式。当你添加通知时, Framework7会将特殊通知div与列表块一起放置到正文中。
<body>
...
<div class = "notifications list-block media-list">
<ul>
<!-- Single notification item -->
<li class = "notification-item">
<div class = "item-content">
<div class = "item-media">
<!-- Notification media -->
</div>
<div class = "item-inner">
<div class = "item-title-row">
<div class = "item-title">
<!-- Notification title goes here -->
</div>
<div class = "item-after">
<!-- Notification close icon -->
<a href = "#" class = "close-notification"></a>
</div>
</div>
<div class = "item-subtitle">
<!-- Notification subtitle goes here -->
</div>
<div class = "item-text">
<!-- Notification message goes here -->
</div>
</div>
</div>
</li>
</ul>
</div>
</body>
The custom notification will have the following layout:
<body>
...
<div class = "notifications list-block media-list">
<ul>
<!-- Single notification item -->
<li class = "notification-item">
<!-- Custom notification content goes here -->
</li>
</ul>
</div>
</body>iOS示例
Framework7可以帮助你在iOS布局中使用不同类型的通知。
例：
让我们以一个示例来演示在Framework7中使用iOS通知：
<!DOCTYPE html>
<html class="with-statusbar-overlay">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<title>Notifications</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.colors.min.css">
<link rel="stylesheet" href="custom.css">
</head>
<body>
<div class="views">
<div class="view view-main">
<div class="pages navbar-fixed">
<div data-page="home" class="page">
<div class="navbar">
<div class="navbar-inner">
<div class="center sliding">Notifications</div>
</div>
</div>
<div class="page-content">
<div class="content-block">
<p><a href="#" class="button notification-default">Default</a></p>
<p><a href="#" class="button notification-full">Full-layout notification</a></p>
<p><a href="#" class="button notification-custom">Custom image</a></p>
<p><a href="#" class="button notification-callback">Callback on close</a></p>
</div>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/js/framework7.min.js"></script>
<script>
var myApp = new Framework7();
var mainView = myApp.addView('.view-main');
var $$ = Dom7;
$$('.notification-default').on('click', function () {
myApp.addNotification({
title: 'Framework7', message: 'This is a simple notification message with title and message'
});
});
$$('.notification-full').on('click', function () {
myApp.addNotification({
title: 'Framework7', subtitle: 'Notification subtitle', message: 'This is a simple notification message with custom icon and subtitle', media: '<i class="icon icon-f7"></i>'
});
});
$$('.notification-custom').on('click', function () {
myApp.addNotification({
title: 'My Awesome App', subtitle: 'New message from John Doe', message: 'Hello, how are you? Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Aenean ut posuere erat. Pellentesque id elementum urna, a aliquam ante. Donec vitae volutpat orci.
Aliquam sed molestie risus, quis tincidunt dui.', 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: 'My Awesome App', subtitle: 'New message from John Doe', message: 'Hello, how are you? Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Aenean ut posuere erat. Pellentesque id elementum urna, a aliquam ante. Donec vitae volutpat orci.
Aliquam sed molestie risus, quis tincidunt dui.', 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('Notification closed');
}
});
});
</script>
</body>
</html>立即测试
Framework7示例材料
Framework7通知也可以在“材质”布局中使用。
例：
让我们以一个示例来演示Framework7中材质布局通知的用法：
<!DOCTYPE html>
<html class="with-statusbar-overlay">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<title>Notifications</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.material.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.material.colors.min.css">
</head>
<body>
<div class="views">
<div class="view view-main">
<div class="pages navbar-fixed">
<div data-page="home" class="page">
<div class="navbar">
<div class="navbar-inner">
<div class="center">Notifications</div>
</div>
</div>
<div class="page-content">
<div class="content-block">
<p><a href="#" class="button button-raised notification-single">Single-line notification</a></p>
<p><a href="#" class="button button-raised notification-multi">Multi-line notification</a></p>
<p><a href="#" class="button button-raised notification-custom">With custom button</a></p>
<p><a href="#" class="button button-raised notification-callback">With callback on close</a></p>
</div>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/js/framework7.min.js"></script>
<script>
var myApp = new Framework7({
material: true
});
var mainView = myApp.addView('.view-main');
var $$ = Dom7;
$$('.notification-single').on('click', function () {
myApp.addNotification({
message: 'Battery remaining only 20%'
});
});
$$('.notification-multi').on('click', function () {
myApp.addNotification({
message: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.', });
});
$$('.notification-custom').on('click', function () {
myApp.addNotification({
message: 'Nice teal color button', button: {
text: 'Click me', color: 'teal'
}
});
});
$$('.notification-callback').on('click', function () {
myApp.addNotification({
message: 'Close this notification to see an alert', button: {
text: 'Close Me', color: 'red'
}, onClose: function () {
myApp.alert('Callback made.. Notification closed');
}
});
});
</script>
</body>
</html>立即测试
评论前必须登录！
注册