首页 » Framework7 » Framework7 组件
网站地图

通知

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

通知组件JavaScript API

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

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

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

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

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

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

参数（Parameter）类型（Type）默认值（Default）参数说明（Description）
titlestring
标题。默认和App参数中的notificationTitle相同，为undefinediOS theme only
subtitlestring
副标题。默认和App参数中的notificationSubtitle相同，为undefinediOS theme only
mediastring
媒体元素（图标或图片） - 包含icon或图片的HTML片段。默认和App参数中的notificationMedia相同，为undefinediOS theme only
holdnumber
通知的停驻时间（单位ms），如果指定了该参数，那么通知将在指定的时间后自动关闭。默认和App参数中的notificationHold相同，为undefined
closeIconbooleantrue是否显示关闭按钮。默认和App参数中的notificationCloseIcon相同，为trueiOS theme only
buttonobject
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

closeOnClickbooleanfalse点击通知的HTML元素时，是否关闭通知。默认和App参数中的notificationCloseOnClick相同，为false
additionalClassstring
添加给通知HTML元素的类，一般用于自定义样式
customstring
给通知自定义HTML内容结构（如果你想的话）。如果使用"custom"参数，"title"，"subtitle"，"media"和"closeIcon"参数会被忽略。
onClickfunction
点击通知HTML元素的回调函数
onClosefunction
通知关闭的回调函数（无论是手动关闭还是通过调用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');
        }
    });
});

实例预览