Framework7 - Modal rapide
La description
Le modal Invite permet aux utilisateurs d'effectuer certaines actions sur le contenu affiché. Il utilise les méthodes suivantes -
myApp.prompt(text, [title, callbackOk, callbackCancel])Ou
myApp.prompt(text, [callbackOk, callbackCancel])Les méthodes ci-dessus acceptent les paramètres répertoriés ci-dessous -
text - Il affiche l'invite modale avec le texte.
title - Il s'agit d'une méthode facultative qui affiche l'invite modale avec le titre.
callbackOk - C'est une méthode facultative, qui fournit la fonction de rappel qui s'exécute lorsque l'utilisateur clique sur le bouton "OK" sur l'invite modale.
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" sur l'invite modale.
Exemple
L'exemple suivant illustre l'utilisation de l'invite modale dans le Framework7, qui affiche la boîte d'invite lorsque vous cliquez sur les liens pour effectuer certaines actions -
<!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>Prompt 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">Prompt 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 = "prompt-ok">Displays Prompt Modal with Text and Ok callback</a></p>
<p><a href = "#" class = "prompt-ok-cancel">Displays Prompt Modal With Text, Ok and Cancel callbacks</a></p>
<p><a href = "#" class = "prompt-title-ok">Displays Prompt Modal With Text, Title and Ok callbacks</a></p>
<p><a href = "#" class = "prompt-title-ok-cancel">Displays Prompt Modal With Text, Title, Ok and Cancel callbacks</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
});
$$('.prompt-ok').on('click', function () {
myApp.prompt('Enter your name?', function (value) {
myApp.alert('Name is "' + value + '" and you have clicked Ok button.');
});
});
$$('.prompt-ok-cancel').on('click', function () {
myApp.prompt('Enter your name?', function (value) {
myApp.alert('Name is "' + value + '" and you have clicked Ok button.');
},
function (value) {
myApp.alert('Name is "' + value + '" and you have clicked cancel button.');
}
);
});
$$('.prompt-title-ok').on('click', function () {
myApp.prompt('Enter your name?', 'My Title', function (value) {
myApp.alert('Name is "' + value + '" and you have clicked Ok button.');
});
});
$$('.prompt-title-ok-cancel').on('click', function () {
myApp.prompt('Enter your name?', 'My Title', function (value) {
myApp.alert('Name is "' + value + '" and you have clicked Ok button.');
},
function (value) {
myApp.alert('Name is "' + value + '" and you have clicked cancel button.');
}
);
});
</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_prompt.html fichier dans le dossier racine de votre serveur.
Ouvrez ce fichier HTML en tant que http: //localhost/modal_prompt.html et la sortie s'affiche comme indiqué ci-dessous.
Lorsque l'utilisateur clique sur la première option, il est lié à une fenêtre contextuelle. Lorsque l'utilisateur entre du texte dans la boîte, il exécute la fonction de rappel lorsque OK est cliqué.
Lorsque l'utilisateur clique sur la deuxième option, il est lié à une fenêtre contextuelle, où il exécute la fonction de rappel lorsque l'utilisateur clique sur le bouton Annuler. Il exécute une fonction de rappel lorsque l'utilisateur entre le texte dans la boîte et clique sur OK.
Lorsque l'utilisateur clique sur la troisième option, il est lié à une fenêtre contextuelle avec le texte et le titre. Lorsque l'utilisateur entre du texte dans la boîte, il exécute la fonction de rappel lorsque OK est cliqué.
Lorsque l'utilisateur clique sur la dernière option, il est lié à une fenêtre contextuelle avec le texte et le titre et exécute une fonction de rappel lorsque l'utilisateur clique sur annuler. Il exécute une fonction de rappel lorsque l'utilisateur entre le texte et clique sur OK.