Framework7 - Pantalla de inicio de sesión integrada

Descripción

Para incrustar una pantalla de inicio de sesión, puede insertar la pantalla de inicio de sesión en la página.

Ejemplo

El siguiente ejemplo demuestra el uso de la pantalla de inicio de sesión incrustada en 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>

Creemos una página HTML más que crea una pantalla de inicio de sesión dentro de la página:

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>

Salida

Realicemos los siguientes pasos para ver cómo funciona el código dado anteriormente:

Guarde el código HTML proporcionado anteriormente como login_screen_embedded.html archivo en la carpeta raíz de su servidor.
Abra este archivo HTML como http: //localhost/login_screen_embedded.html y el resultado se muestra como se muestra a continuación.
Puede insertar la pantalla de inicio de sesión en la página donde, al hacer clic en el enlace, se abre una página de inicio de sesión donde puede ingresar el nombre de usuario y la contraseña y hacer clic en el botón de inicio de sesión. Muestra un asistente con el nombre de usuario y la contraseña ingresados.

↰ Previous page