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

通知组件JavaScript API

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



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

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



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

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



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

参数(Parameter)

类型(Type)

默认值(Default)

参数说明(Description)

title

string

 

标题。默认和App参数中的notificationTitle相同,为undefinediOS theme only

subtitle

string

 

副标题。默认和App参数中的notificationSubtitle相同,为undefinediOS theme only

media

string

 

媒体元素(图标或图片) - 包含icon或图片的HTML片段。默认和App参数中的notificationMedia相同,为undefinediOS theme only

hold

number

 

通知的停驻时间(单位ms),如果指定了该参数,那么通知将在指定的时间后自动关闭。默认和App参数中的notificationHold相同,为undefined

closeIcon

boolean

true

是否显示关闭按钮。默认和App参数中的notificationCloseIcon相同,为trueiOS theme only

button

object

 

Material notification button. Accepts 3 properties:


  1. {
  2.   text: 'close',
  3.   color: 'blue',
  4.   close: true
  5. }

复制


Where

text

  •  - button text. By default equal to 

notificationCloseButtonTextcolorclose

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到列表区元素中。

  1. <body>
  2.   ...
  3.   <div class="notifications list-block media-list">
  4.     <ul>
  5.  
  6.       <!-- 单个通知条目 -->
  7.       <li class="notification-item">
  8.         <div class="item-content">
  9.           <div class="item-media">
  10.             <!-- 通知多媒体 -->
  11.           </div>
  12.           <div class="item-inner">
  13.             <div class="item-title-row">
  14.               <div class="item-title">
  15.                 <!-- 通知标题 -->
  16.               </div>
  17.               <div class="item-after">
  18.                   <!-- 通知关闭图标 -->
  19.                   <a href="#" class="close-notification"></a>
  20.               </div>
  21.             </div>
  22.             <div class="item-subtitle">
  23.               <!-- 通知副标题 -->
  24.             </div>
  25.             <div class="item-text">
  26.               <!-- 通知消息 -->
  27.             </div>
  28.           </div>
  29.         </div>
  30.       </li>
  31.  
  32.     </ul>
  33.   </div>    
  34. </body>

复制



自定义通知的布局如下:

  1. <body>
  2.   ...
  3.   <div class="notifications list-block media-list">
  4.     <ul>
  5.  
  6.       <!-- 单个通知条目 -->
  7.       <li class="notification-item">
  8.         <!-- 自定义通知内容 -->
  9.       </li>
  10.  
  11.     </ul>
  12.   </div>    
  13. </body>

复制



iOS 示例

  1. <div class="page-content">
  2.   <div class="content-block">
  3.     <p><a href="#" class="button notification-default">默认通知</a></p>
  4.     <p><a href="#" class="button notification-full">包含所有元素</a></p>
  5.     <p><a href="#" class="button notification-custom">包含自定义图片</a></p>
  6.     <p><a href="#" class="button notification-callback">关闭时触发回调函数</a></p>
  7.   </div>
  8. </div>

复制



  1. var myApp = new Framework7();
  2. var mainView = myApp.addView('.view-main');
  3.  
  4. var $$ = Dom7;
  5.  
  6. $$('.notification-default').on('click', function () {
  7.     myApp.addNotification({
  8.         title: 'Framework7',
  9.         message: '这是一个包含标题和消息内容的简单通知'
  10.     });
  11. });
  12. $$('.notification-full').on('click', function () {
  13.     myApp.addNotification({
  14.         title: 'Framework7',
  15.         subtitle: '通知副标题',
  16.         message: 'This is a simple notification message with custom icon and subtitle',
  17.         message: '这是一个包含自定义icon和副标题的通知',
  18.         media: '<i class="icon icon-f7"></i>'
  19.     });
  20. });
  21. $$('.notification-custom').on('click', function () {
  22.     myApp.addNotification({
  23.         title: '真是个酷炫狂拽的App',
  24.         subtitle: '来自土豆的消息',
  25.         message: '地瓜地瓜,土豆呼叫地瓜。在9点方向发现如花,BalaBalaBala',
  26.         media: '<img width="44" height="44" style="border-radius:100%" src="http://lorempixel.com/output/people-q-c-100-100-9.jpg">'
  27.     });
  28. });
  29. $$('.notification-callback').on('click', function () {
  30.     myApp.addNotification({
  31.         title: '真是个酷炫狂拽的App',
  32.         subtitle: '来自土豆的消息',
  33.         message: '地瓜地瓜,土豆呼叫地瓜。在9点方向发现如花,BalaBalaBala',
  34.         media: '<img width="44" height="44" style="border-radius:100%" src="http://lorempixel.com/output/people-q-c-100-100-9.jpg">',
  35.         onClose: function () {
  36.             myApp.alert('通知被关闭了~');
  37.         }
  38.     });
  39. });

复制



  实例预览

Material 示例

  1. var myApp = new Framework7({
  2.   material: true
  3. }); 
  4. var mainView = myApp.addView('.view-main');
  5.  
  6. var $$ = Dom7;
  7.  
  8. $$('.notification-single').on('click', function () {
  9.     myApp.addNotification({
  10.         message: 'Simple message'
  11.     });
  12. });
  13. $$('.notification-multi').on('click', function () {
  14.     myApp.addNotification({
  15.         message: 'Multi-line message. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc in magna nisi.',
  16.     });
  17. });
  18. $$('.notification-custom').on('click', function () {
  19.     myApp.addNotification({
  20.         message: 'Nice yellow button',
  21.         button: {
  22.             text: 'Click me',
  23.             color: 'yellow'
  24.         }
  25.     });
  26. });
  27. $$('.notification-callback').on('click', function () {
  28.     myApp.addNotification({
  29.         message: 'Close me to see Alert',
  30.         button: {
  31.             text: 'Close Me',
  32.             color: 'lightgreen'
  33.         },
  34.         onClose: function () {
  35.             myApp.alert('Notification closed');
  36.         }
  37.     });
  38. });

复制