Framework7 - Mise en page complète
La description
Le type de mise en page complet est utilisé pour afficher tout l'élément de formulaire.
Exemple
L'exemple suivant montre la mise en page complète du formulaire, y compris tous les champs du 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>Full Layout</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 Elements</div>
<div class = "right"> </div>
</div>
</div>
<div class = "page-content">
<div class = "content-block-title">Full Layout</div>
<div class = "list-block">
<ul>
<li>
<div class = "item-content">
<div class = "item-media"><i class = "icon icon-form-name"></i></div>
<div class = "item-inner">
<div class = "item-title label">Name</div>
<div class = "item-input">
<input type = "text" placeholder = "Enter your name">
</div>
</div>
</div>
</li>
<li>
<div class = "item-content">
<div class = "item-media"><i class = "icon icon-form-email"></i></div>
<div class = "item-inner">
<div class = "item-title label">E-mail</div>
<div class = "item-input">
<input type = "email" placeholder = "Enter your e-mail">
</div>
</div>
</div>
</li>
<li>
<div class = "item-content">
<div class = "item-media"><i class = "icon icon-form-password"></i></div>
<div class = "item-inner">
<div class = "item-title label">Password</div>
<div class = "item-input">
<input type = "password" placeholder = "Enter your password">
</div>
</div>
</div>
</li>
<li>
<div class = "item-content">
<div class = "item-media"><i class = "icon icon-form-tel"></i></div>
<div class = "item-inner">
<div class = "item-title label">Phone</div>
<div class = "item-input">
<input type = "tel" placeholder = "Enter your phone number">
</div>
</div>
</div>
</li>
<li>
<div class = "item-content">
<div class = "item-media"><i class = "icon icon-form-gender"></i></div>
<div class = "item-inner">
<div class = "item-title label">Gender</div>
<div class = "item-input">
<select>
<option>Male</option>
<option>Female</option>
</select>
</div>
</div>
</div>
</li>
<li>
<div class = "item-content">
<div class = "item-media"><i class = "icon icon-form-calendar"></i></div>
<div class = "item-inner">
<div class = "item-title label">Birth date</div>
<div class = "item-input">
<input type = "date" placeholder = "Birth day" value = "2014-04-30">
</div>
</div>
</div>
</li>
<li>
<div class = "item-content">
<div class = "item-media"><i class = "icon icon-form-calendar"></i></div>
<div class = "item-inner">
<div class = "item-title label">Date time</div>
<div class = "item-input">
<input type = "datetime-local">
</div>
</div>
</div>
</li>
<li>
<div class = "item-content">
<div class = "item-media"><i class = "icon icon-form-toggle"></i></div>
<div class = "item-inner">
<div class = "item-title label">Switch</div>
<div class = "item-input">
<label class = "label-switch">
<input type = "checkbox">
<div class = "checkbox"></div>
</label>
</div>
</div>
</div>
</li>
<li class = "align-top">
<div class = "item-content">
<div class = "item-media"><i class = "icon icon-form-comment"></i></div>
<div class = "item-inner">
<div class = "item-title label">Textarea</div>
<div class = "item-input">
<textarea></textarea>
</div>
</div>
</div>
</li>
<li class = "align-top">
<div class = "item-content">
<div class = "item-media"><i class = "icon icon-form-comment"></i></div>
<div class = "item-inner">
<div class = "item-title label">Resizable</div>
<div class = "item-input">
<textarea class = "resizable"></textarea>
</div>
</div>
</div>
</li>
</ul>
</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 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
});
</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 form_element_full_layout.html fichier dans le dossier racine de votre serveur.
Ouvrez ce fichier HTML en tant que http: //localhost/form_element_full_layout.html et la sortie s'affiche comme indiqué ci-dessous.
L'utilisateur peut saisir tous les détails du formulaire pour afficher tout l'élément du formulaire.
L'utilisateur peut sélectionner l'une des deux options de sexe. Les valeurs peuvent être définies pour la date de naissance et l'heure de la date en cliquant sur les flèches et peuvent utiliser un interrupteur pour activer et désactiver.