Framework7 - Pantalla de inicio de sesión desde JavaScript
Descripción
Puede abrir y cerrar la pantalla de inicio de sesión utilizando los métodos de aplicación loginScreen () y closeModal (loginScreen) en Framework7.
Ejemplo
El siguiente ejemplo muestra las pantallas de inicio de sesión de apertura y cierre de JavaScript 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>Login Screen from HTML</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 Screen using JavaScript</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_screen_js">Click here to open Login Screen</a></p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class = "login-screen">
<div class = "view">
<div class = "page">
<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 class = "list-block-label">
<p><a href = "#" class = "close-login-screen">Click here to close Login Screen</a></p>
</div>
</div>
</form>
</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_screen_js').on('click', function () {
myApp.loginScreen();
});
</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 login_screen_from_javascript.html archivo en la carpeta raíz de su servidor.
Abra este archivo HTML como http: //localhost/login_screen_from_javascript.html y el resultado se muestra como se muestra a continuación.
La salida muestra el uso de los métodos loginScreen () y closeModal (loginScreen) para abrir y cerrar la pantalla de inicio de sesión desde javascript. Cuando hace clic en el enlace, se muestra un asistente 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 para iniciar sesión.
Haga clic en la opción Cerrar pantalla de inicio de sesión para cerrar la pantalla de inicio de sesión.