本文概述
- 通知JavaScript API
- 通知布局
- iOS示例
- Framework7示例材料
Framework7通知的用法：
| 指数 | 通知用法 | 描述 |
|---|---|---|
| 1) | 通知JavaScript API | 还可以使用相关的app方法, 使用JavaScript添加或关闭通知。 |
| 2) | 通知布局 | Framework7通知将通过使用JavaScript添加。 |
| 3) | 示例iOS | Framework7允许你在iOS布局中使用不同类型的通知。 |
| 4) | 示例材料 | 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 | 通知关闭时将执行此回调函数。 |
<
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 = "http://www.srcmini.com/#" 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="http://www.srcmini.com/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="http://www.srcmini.com/#" class="button notification-default">
Default<
/a>
<
/p>
<
p>
<
a href="http://www.srcmini.com/#" class="button notification-full">
Full-layout notification<
/a>
<
/p>
<
p>
<
a href="http://www.srcmini.com/#" class="button notification-custom">
Custom image<
/a>
<
/p>
<
p>
<
a href="http://www.srcmini.com/#" class="button notification-callback">
Callback on close<
/a>
<
/p>
<
/div>
<
/div>
<
/div>
<
/div>
<
/div>
<
/div>
<
script type="text/javascript" src="http://img.readke.com/220423/0S133C04-0.jpg">
<
/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="http://www.srcmini.com/#" class="button button-raised notification-single">
Single-line notification<
/a>
<
/p>
<
p>
<
a href="http://www.srcmini.com/#" class="button button-raised notification-multi">
Multi-line notification<
/a>
<
/p>
<
p>
<
a href="http://www.srcmini.com/#" class="button button-raised notification-custom">
With custom button<
/a>
<
/p>
<
p>
<
a href="http://www.srcmini.com/#" class="button button-raised notification-callback">
With callback on close<
/a>
<
/p>
<
/div>
<
/div>
<
/div>
<
/div>
<
/div>
<
/div>
<
script type="text/javascript" src="http://img.readke.com/220423/0S133C04-0.jpg">
<
/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>
【Framework7通知】立即测试
