`

移动端安卓和IOS开发框架Framework7教程-消息通知

Framework7 
阅读更多

使用通知组件，你可以让消息看起来像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 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到列表区元素中。

  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. });
复制

实例预览

 

3
顶
0
踩
分享到：
| 移动端安卓和IOS开发框架Framework7教程- ...
评论
发表评论

文章已被作者锁定，不允许评论。

相关推荐

    Framework7是一个用于构建iOS和Android应用的全功能HTML框架

    Framework7 是免费开源的 HTML 移动端框架，用来开发混合移动端应用或者 iOS 7 的 Web 应用，并且带有 iOS 7 的原生外观和感觉。Framework7 也是独立的原型应用工具。

    vue-framework7-master.zip

    Vue.js 是一个轻量级的前端JavaScript框架，以其易学易用、高效和灵活性著称，而Framework7则是一个模仿iOS和Android原生界面的Web App框架。 在这个"vue-framework7-master"项目中，我们可以看到以下关键组成部分...

    Mobile Security Framework

    MobSF是Mobile Security Framework的缩写，是一个移动端应用安全问题检出的框架和工具，它适用于Android/iOS/Windows，能够执行动态和静态的恶意软件的分析和检测。支持Android和iOS以及Windows移动应用，无论是二...

    HTML移动端框架Framework7 1.6.4.zip

    Framework7是一款强大的HTML5移动应用框架，专为构建原生感觉的iOS和Android应用而设计。这个1.6.4版本的压缩包包含了用于开发移动端Web应用的所有必要资源和文件，使得开发者能够利用HTML、CSS和JavaScript技术创建...

    参考HiApp搭建的一款基于Framework7Vue和H5Plus的商城模板

    其中，`Framework7`是一个流行的开源移动应用框架，它模仿了原生iOS和Android的UI设计，提供了丰富的组件和交互效果，使得开发者能够构建出与原生应用相似的体验。`Vue.js`是一个轻量级的前端MVVM（Model-View-...

    Robot Framework 源代码阅读笔记 之 一 - CSDN博客

    Appium是一个用于移动端UI自动化测试的工具，它支持iOS和Android平台上的原生、移动Web和混合应用。 除了测试工具，文章还提及了性能测试相关的工具。Locust是一个基于事件的性能测试工具，它使用Python的协程来...

    完整.net服务端Android、IOS客户端

    这个项目采用的技术栈是ASP.NET MVC和WebAPI作为后端开发框架，用于提供服务和数据接口，而Android Studio则用于构建Android客户端，iOS端虽然没有详细描述，但通常也会使用Swift或Objective-C进行开发。 描述中...

    移动端：手把手带你入门跨平台UI开发框架Flutter，看完这篇-flutter框架

    **Flutter** 是一款由Google推出的跨平台移动应用开发框架，旨在通过一套代码库就能开发出高质量的iOS和Android应用。该框架的核心优势在于其高效的开发速度、优秀的性能表现以及强大的跨平台能力。 #### 二、关键...

    移动端WebUI框架CMUI.zip

    一个简单粗暴的移动端 Web UI 框架。CMUI 是一个专攻移动网页的 UI 框架，它提供了丰富的组件和简洁的接口，开箱即用。CMUI 帮助开发者摆脱样式细节和兼容性困扰，从而腾出更多精力投入到业务开发中。兼容性浏览器...

    常用的移动端和前端的资源

    React Native是由Facebook开发的开源框架，它允许开发者用JavaScript和React语法构建原生的iOS和Android应用。通过React的声明式编程模型和组件化思想，开发者可以实现高效且可复用的代码，大大简化了移动应用的开发...

    HTML移动端框架Framework7 1.6.4

    Framework7是一个开源免费的HTML移动端框架，可以用来开发混合移动应用(原生和HTML混合)或者开发iOS&Android风格的WEB APP，也可以用来作为原型开发工具，可以迅速创建一个应用的原型。Framework7 1.6.4 更新日志：...

    移动端渗透测试框架MSF

    移动安全框架MSF（Mobile Security Framework - MobSF）是一个全面的、开源的渗透测试和安全分析平台，专门针对移动应用，如Android和iOS应用程序。它为安全专家提供了自动化静态和动态分析工具，帮助他们在开发周期...

    framework7-recipes:Framework7概念证明模板，布局和脚本

    Framework7 是由Ilya Krasheninnikov开发的，它支持HTML5、CSS3和JavaScript技术，可以构建iOS和Android风格的应用。框架的核心特性包括页面路由、组件库、交互动画以及可定制的主题。 二、项目结构 在"framework7...

    xamarin +Prism 进行移动端开发

    在移动应用开发领域，Xamarin 和 Prism 是两个强大的工具，它们结合使用可以为开发者提供一套高效、跨平台的解决方案，支持构建高质量的Android、iOS和Windows应用程序。让我们深入探讨一下如何利用Xamarin和Prism...

    AureliaFramework7一个轻量级的移动应用平台

    Framework7则是一款流行的移动应用UI框架，它提供了一套完整的iOS和Android风格的组件，包括导航栏、侧滑菜单、表单元素等，使得开发者可以快速构建出原生感观的应用界面。当Aurelia与Framework7结合时，开发者可以...

    meteor-framework7:framework7整合

    Framework7 是一款强大的移动端 UI 框架，提供了丰富的组件和布局选项，可帮助开发者构建出高度仿原生的 iOS 和 Android 应用界面。其组件库包括滑动导航、侧滑菜单、下拉刷新、上拉加载更多等，能够满足多种应用...

    meteor-framework7

    Framework7 是一款强大的HTML5移动应用框架，模仿原生iOS和Android的界面风格，提供了丰富的组件和API，使得开发者能够用HTML、CSS和JavaScript构建出与原生应用体验相近的Web应用。它特别适合构建单页应用（SPA）和...

    透视C#核心技术：系统架构及移动端开发源码

    7. **移动端开发**：在移动端，C#通过Xamarin或Unity3D支持iOS和Android应用开发。学习如何使用这些工具和技术，结合C#编写跨平台的移动应用，是现代开发者的必备技能。 8. **单元测试与持续集成**：TDD（Test-...

    rexxar-ios:移动混合框架Rexxar iOS容器

    Rexxar 是一个针对移动端的混合开发框架。现在支持 Android 和 iOS 平台。Rexxar-iOS 是 Rexxar 在 iOS 系统上的客户端实现。 通过 Rexxar，你可以使用包括 javascript，css，html 在内的传统前端技术开发移动应用。...

    移动端APP女性化妆品超市商城模板.zip

    Framework7是一款开源的HTML5移动应用框架，它允许开发者使用Web技术（HTML, CSS, JavaScript）来构建原生iOS和Android应用，其设计灵感来源于苹果的Swift和Objective-C。该框架提供了丰富的组件和交互效果，使得...

Magicbox
Global site tag (gtag.js) - Google Analytics