Framework7 - API JavaScript de stockage de formulaires
La description
Le stockage de formulaires peut être réalisé à l'aide de l'API JavaScript. Ici, Framework7 appelle formToJSON sur toute modification d'entrée et formFromJSON sur événement pageInit . Toutes les données des formulaires sont stockées dans un stockage local avec des clés. Les méthodes de l'application pour gérer ces clés de stockage local avec des données de formulaire sont répertoriées ci-dessous -
| S. Non | Classes et description | Paramètres |
|---|---|---|
| 1 | myApp.formGetData(formId) Lorsque vous ouvrez une animation, cet événement est déclenché. |
|
| 2 | myApp.formDeleteData(formId) Lorsque l'ouverture d'une animation est terminée, cet événement sera déclenché. |
|
| 3 | myApp.formStoreData(formId, formJSON) Lorsque vous fermez une animation, cet événement est déclenché. |
|
Exemple
L'exemple suivant montre l'utilisation de l'API JavaScript de stockage de formulaires qui stocke les données dans le stockage local dans 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>Form storage JavaScript API</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 = "pages">
<div data-page = "home" class = "page navbar-fixed">
<div class = "navbar">
<div class = "navbar-inner">
<div class = "left"> </div>
<div class = "center">Form Storage API</div>
<div class = "right"> </div>
</div>
</div>
<div class = "page-content">
<form id = "myform" class = "list-block store-data">
<ul>
<li>
<div class = "item-content">
<div class = "item-inner">
<div class = "item-title label">Name</div>
<div class = "item-input">
<input type = "text" name = "name" placeholder = "Enter your name">
</div>
</div>
</div>
</li>
<li>
<div class = "item-content">
<div class = "item-inner">
<div class = "item-title label">E-mail</div>
<div class = "item-input">
<input type = "email" name = "email" placeholder = "Enter your e-mail">
</div>
</div>
</div>
</li>
<li>
<div class = "item-content">
<div class = "item-inner">
<div class = "item-title label">Gender</div>
<div class = "item-input">
<select name = "gender">
<option value = "male" selected>Male</option>
<option value = "female">Female</option>
</select>
</div>
</div>
</div>
</li>
<li>
<div class = "item-content">
<div class = "item-inner">
<div class = "item-title label">Switch</div>
<div class = "item-input">
<label class = "label-switch">
<input type = "checkbox" name = "switch" value = "yes" />
<div class = "checkbox"></div>
</label>
</div>
</div>
</div>
</li>
</ul>
</form>
<div class = "content-block">
<p><a href = "#" class = "button button-fill button-round color-blue get-storage-data">Get Data</a></p>
<p><a href = "#" class = "button button-fill button-round color-red delete-storage-data">Delete Data</a></p>
<p><a href = "#" class = "button button-fill button-round color-green save-storage-data">Save Data</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>
var myApp = new Framework7();
var $$ = Dom7;
$$('.get-storage-data').on('click', function() {
var storedData = myApp.formGetData('myform');
if(storedData) {
alert(JSON.stringify(storedData));
} else {
alert('Yet there is no stored data for this form. Please try to change any field')
}
});
$$('.delete-storage-data').on('click', function() {
var storedData = myApp.formDeleteData('myform');
alert('Form data is deleted')
});
$$('.save-storage-data').on('click', function() {
var storedData = myApp.formStoreData('myform', {
'name': 'William Smith',
'email': '[email protected]',
'gender': 'male',
'switch': ['yes'],
});
alert('Form data is replaced, refresh the browser to reflect the changes')
});
</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 forms_storage_javascript.html fichier dans le dossier racine de votre serveur.
Ouvrez ce fichier HTML en tant que http: //localhost/forms_storage_javascript.html et la sortie s'affiche comme indiqué ci-dessous.
Lorsque vous entrez les détails dans le formulaire et cliquez sur le bouton «Obtenir les données», toutes les valeurs de votre champ seront converties au format JSON et vous seront affichées.
Lorsque vous cliquez sur le bouton «Enregistrer les données», les données du formulaire sont enregistrées dans le stockage local.
Lorsque vous cliquez sur le bouton «Supprimer les données», toutes les données du formulaire sont supprimées.