Framework7 - Modal de connexion et de mot de passe
La description
Vous pouvez utiliser ce type de modal à des fins d'authentification. Il utilise les méthodes suivantes -
myApp.modalLogin(text, [title, callbackOk, callbackCancel])Ou
myApp.modalLogin(text, [callbackOk, callbackCancel])Les méthodes ci-dessus acceptent les paramètres, qui sont énumérés ci-dessous -
text - Il affiche le modal avec du texte.
title - C'est une méthode facultative qui affiche le modal avec le titre.
callbackOk - C'est une méthode optionnelle, qui fournit la fonction de rappel qui s'exécute lorsque l'utilisateur clique sur le bouton "OK".
callbackCancel - C'est une méthode optionnelle, qui fournit la fonction de rappel qui s'exécute lorsque l'utilisateur clique sur le bouton "Annuler".
Exemple
L'exemple suivant montre l'utilisation de la connexion et du mot de passe modale dans Framework7, qui fournit la boîte modale pour saisir le nom d'utilisateur et le mot de passe à des fins d'authentification -
<!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>Production
Exécutons les étapes suivantes pour voir comment fonctionne le code donné ci-dessus -
Enregistrez le code HTML ci-dessus sous modal_login_password.html fichier dans le dossier racine de votre serveur.
Ouvrez ce fichier HTML en tant que http: //localhost/modal_login_password.html et la sortie s'affiche comme indiqué ci-dessous.
Lorsque vous cliquez sur la première option, vous obtenez une fenêtre contextuelle dans laquelle vous pouvez entrer le nom d'utilisateur et le mot de passe. Lorsque vous cliquez sur OK, la fonction de rappel est exécutée en affichant les informations d'identification entrées.
Lorsque vous cliquez sur la deuxième option, vous obtenez une fenêtre contextuelle dans laquelle vous entrez un mot de passe et lorsque vous cliquez sur OK, la fonction de rappel est exécutée en affichant le mot de passe saisi.