Framework7 - Exemple iOS

La description

Framework7 vous permet d'utiliser différents types de notifications dans votre mise en page iOS.

Exemple

L'exemple suivant montre l'utilisation des notifications iOS dans 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.ios.min.css">
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.colors.min.css">
      <link rel="stylesheet" href="custom.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 sliding">Notifications</div>
                     </div>
                  </div>
                  <div class="page-content">
                     <div class="content-block">
                        <p><a href="#" class="button notification-default">Default</a></p>
                        <p><a href="#" class="button notification-full">Full-layout notification</a></p>
                        <p><a href="#" class="button notification-custom">Custom image</a></p>
                        <p><a href="#" class="button notification-callback">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();
         var mainView = myApp.addView('.view-main');

         var $$ = Dom7;

         $$('.notification-default').on('click', function () {
            myApp.addNotification({
               title: 'Default notification',
               message: 'This is default notification with title and message'
            });
         });
         $$('.notification-full').on('click', function () {
            myApp.addNotification({
               title: 'Full-layout',
               subtitle: 'Notification subtitle',
               message: 'You have a new mail',
               media: '<i class="icon icon-form-email"></i>'
            });
         });
         $$('.notification-custom').on('click', function () {
            myApp.addNotification({
               title: 'Event',
               subtitle: 'You missed an event at your place..',
               message: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
                  Aenean ut posuere erat. Aliquam sed molestie risus, quis tincidunt dui.',
                  media: '<img width="44" height="44" style="border-radius:100%" src="/framework7/images/pic2.jpg">'
            });
         });
         $$('.notification-callback').on('click', function () {
            myApp.addNotification({
               title: 'Album',
               subtitle: 'A Wonderful Myth',
               message: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                  Aliquam sed molestie risus, quis tincidunt dui.',
                  media: '<img width="44" height="44" style="border-radius:100%" src="/framework7/images/pic.jpg">',
               onClose: function () {
                  myApp.alert('Callback activated. Notification closed');
               }
            });
         });
      </script>
   </body>
</html>

Production

Exécutons les étapes suivantes pour voir comment fonctionne le code donné ci-dessus -

  • Enregistrez le code HTML ci-dessus sous notifications_iOS.html fichier dans le dossier racine de votre serveur.

  • Ouvrez ce fichier HTML en tant que http: //localhost/notifications_iOS.html et la sortie s'affiche comme indiqué ci-dessous.

  • Cet exemple fournit différents types de notifications telles que la notification par défaut, la notification de mise en page complète, la notification avec un message personnalisé, etc. dans la mise en page iOS.