Framework7 - 示例材料

描述

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>

输出

让我们执行以下步骤来查看上面给出的代码是如何工作的：

将上面给出的 HTML 代码保存为 **notifications_material.html** 文件，放在服务器根目录下。
以 https://127.0.0.1/notifications_material.html 的方式打开此 HTML 文件，输出结果将如下所示。
此示例提供了不同类型的通知，例如单行通知、多行通知、带有自定义按钮的通知等，均在 Material 布局中。

framework7_notifications.htm

打印页面