Framework7-サンプル資料

説明

Framework7通知は、マテリアルレイアウトでも使用できます。

例

次の例は、Framework7でのマテリアルレイアウト通知の使用を示しています-

<!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_materiall ファイルとしてサーバーのルートフォルダーに保存します。
このHTMLファイルをhttp：//localhost/notifications_materiallとして開くと、出力は以下のように表示されます。
この例では、単一行の通知、複数行の通知、カスタムボタンによる通知など、さまざまな種類の通知を提供します。マテリアルレイアウト内。

Framework7-notifications-material

目次

Framework7-サンプル資料

説明

例

出力