Framework7 通知

17 Mar 2025 | 5 分钟阅读

通知用于显示所需的，类似于推送（或本地）iOS通知的消息。

Framework7 通知的使用

索引	通知用法	描述
1)	通知 JavaScript API	通知也可以通过使用相关的应用程序方法，用 JavaScript 添加或关闭。
2)	通知布局	Framework7 通知将通过使用 JavaScript 添加。
3)	iOS 示例	Framework7 允许您在 iOS 布局中使用不同类型的通知。
4)	Material 示例	Framework7 通知也可以在 material 布局中使用。

通知 JavaScript API

您可以使用 JavaScript 与 Framework7 通知，通过使用以下 App 方法

myApp.addNotification(parameters): 此方法用于添加/显示通知。它接受带有通知参数的必需对象。此方法返回具有动态创建的通知元素的 HTMLElement。

myApp.closeNotification(notificationElement): 此方法用于关闭指定的通知，它接受 notificationElement 作为强制参数，它是一个 HTMLElement 或所需通知的字符串。

查看添加新通知时所需的通知参数

索引	参数	类型	描述
1)	title	string	它代表通知标题，默认情况下等于 notificationTitle 应用程序的参数。它仅用于 iOS 主题。
2)	subtitle	string	它代表通知副标题，默认情况下等于 notificationSubtitle 应用程序的参数。它仅用于 iOS 主题。
3)	media	string	它是通知媒体元素，它是一个带有图标或图像的 HTML 字符串。它默认情况下等于 notificationMedia 应用程序的参数。它仅用于 iOS 主题。
4)	hold	数字	它用于在指定的超时后自动关闭通知。它默认情况下等于 notificationHold 应用程序的参数。它仅用于 iOS 主题。
5)	closeIcon	boolean	它被禁用以从通知中删除关闭图标。它默认情况下等于 notificationCloseIcon 应用程序的参数。
6)	button	object	它是 material 通知按钮，它接受 3 个属性，即 text、color 和 close。它仅用于 material 主题。
7)	closeOnClick	boolean	如果将其设置为 true，则在单击通知后将关闭通知。它默认情况下等于 notificationCloseOnClick 应用程序的参数。
8)	additionalClass	string	它用于将额外指定的 CSS 类添加到通知元素。
9)	custom	string	当您希望使用带有自定义 HTML 布局的通知时，使用此参数。使用此参数时，将忽略 title、subtitle、media 和 closeIcon 参数。
10)	onClick	功能	单击通知项目后将执行此回调函数。
11)	onClose	功能	关闭通知时将执行此回调函数。

通知布局

您可以使用 JavaScript 进行通知。它也可以用于自定义样式。当您添加通知时，Framework7 将把特殊的通知 div 放置到 body 以及列表块中。

<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 示例 Material

Framework7 通知也可以在 Material 布局中使用。

示例

让我们举一个例子来演示在 Framework7 中使用 material 布局通知

<!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>

立即测试

下一主题#