Framework7 - Modo de inicio de sesión y contraseña

Descripción

Puede utilizar este tipo de modal con fines de autenticación. Utiliza los siguientes métodos:

myApp.modalLogin(text, [title, callbackOk, callbackCancel])

myApp.modalLogin(text, [callbackOk, callbackCancel])

Los métodos anteriores aceptan los parámetros, que se enumeran a continuación:

text - Muestra el modal con texto.
title - Es un método opcional que muestra modal con título.
callbackOk - Es un método opcional, que proporciona la función de devolución de llamada que se ejecuta cuando el usuario hace clic en el botón "Aceptar".
callbackCancel - Es un método opcional, que proporciona la función de devolución de llamada que se ejecuta cuando el usuario hace clic en el botón "Cancelar".

Ejemplo

El siguiente ejemplo demuestra el uso del modo de inicio de sesión y contraseña en Framework7, que proporciona el cuadro modal para ingresar el nombre de usuario y la contraseña con fines de autenticación:

<!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>Login and Password Modal</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">Login and Password Modal</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 = "#" class = "login-modal">Displays Login Modal</a></p>
                        <p><a href = "#" class = "password-modal">Displays Password Modal</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
         });

         $$('.login-modal').on('click', function () {
            myApp.modalLogin('Enter your details:', function (uname, pwd) {
               myApp.alert('Username: ' + uname + ', Password: ' + pwd);
            });
         });

         $$('.password-modal').on('click', function () {
            myApp.modalPassword('Enter your password:', function (pwd) {
               myApp.alert('Your password is: ' + pwd);
            });
         });
      </script>
   </body>

</html>

Salida

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

Guarde el código HTML proporcionado anteriormente como modal_login_password.html archivo en la carpeta raíz de su servidor.
Abra este archivo HTML como http: //localhost/modal_login_password.html y el resultado se muestra como se muestra a continuación.
Cuando haga clic en la primera opción, aparecerá una ventana emergente donde puede ingresar el nombre de usuario y la contraseña. Cuando se hace clic en Aceptar, la función de devolución de llamada se ejecuta mostrando las credenciales ingresadas.
Cuando hace clic en la segunda opción, aparecerá una ventana emergente donde ingresa una contraseña y cuando se hace clic en Aceptar, se ejecuta la función de devolución de llamada mostrando la contraseña ingresada.

↰ Previous page