通知

优质

小牛编辑

136浏览

2023-12-01

使用通知组件，你可以让消息看起来像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');
        }
    });
});