Framework7 - Écran de connexion intégré

La description

Pour intégrer un écran de connexion, vous pouvez insérer l'écran de connexion dans la page.

Exemple

L'exemple suivant illustre l'utilisation de l'écran de connexion intégré dans le Framework7 -

<!DOCTYPE html>
<html>

   <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>Embedded Login Screen</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" />
   </head>

   <body>
      <div class = "views">
         <div class = "view view-main">
         
            <div class = "navbar">
               <div class = "navbar-inner">
                  <div class = "center sliding">Embedded Login Screen</div>
               </div>
            </div>
            
            <div class = "pages">
               <div data-page = "index" class = "page navbar-fixed">
                  <div class = "page-content">
                     <div class = "content-block">
                        <p><a href = "/framework7/src/login_screen_page.html" class = "open-login-screen">Click here to open Login Screen</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>
         // Here you can initialize the app
         var myApp = new Framework7();

         // If your using custom DOM library, then save it to $$ variable
         var $$ = Dom7;

         // Add the view
         var mainView = myApp.addView('.view-main', {
            
            // enable the dynamic navbar for this view:
            dynamicNavbar: true
         });
         
         myApp.onPageInit('login-screen', function (page) {
            var myVal = $$(page.container);
            
            myVal.find('.list-button').on('click', function () {
               var uname = myVal.find('input[name = "username"]').val();
               var pwd = myVal.find('input[name = "password"]').val();
               myApp.alert('Username: ' + uname + ', Password: ' + pwd, function () {
                  mainView.goBack();
               });
            });
         });
      </script>
   </body>

</html>

Créons une autre page HTML qui crée un écran de connexion à l'intérieur de la page -

login_screen_page.html

<div data-page = "login-screen" class = "page no-navbar no-toolbar no-swipeback">
   <div class = "page-content login-screen-content">
      <div class = "login-screen-title">Login Here</div>
      
      <form>
         <div class = "list-block">
            <ul>
               <li class = "item-content">
                  <div class = "item-inner">
                     <div class = "item-title label">Username</div>
                     <div class = "item-input">
                        <input type = "text" name = "username" placeholder = "Enter the username">
                     </div>
                  </div>
               </li>
               
               <li class = "item-content">
                  <div class = "item-inner">
                     <div class = "item-title label">Password</div>
                     <div class = "item-input">
                        <input type = "password" name = "password" placeholder = "Enter the password">
                     </div>
                  </div>
               </li>
            </ul>
         </div>
         
         <div class = "list-block">
            <ul>
               <li><a href = "#" class = "item-link list-button">Log In</a></li>
            </ul>
         </div>
      </form>
   </div>
</div>

Production

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

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

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

  • Vous pouvez insérer l'écran de connexion dans la page où, lorsque vous cliquez sur le lien, une page de connexion s'ouvre où vous pouvez entrer le nom d'utilisateur et le mot de passe et cliquer sur le bouton de connexion. Il affiche un assistant avec le nom d'utilisateur et le mot de passe saisis.