Framework7 - Avec vue de liste de médias
La description
Il est possible d'utiliser à la fois des cases à cocher et des groupes de radios avec la vue de la liste des médias.
Exemple
L'exemple suivant montre l'utilisation de la case à cocher et des radios avec la liste des médias -
<!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>Checkboxes group</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">Checkboxes and Radios</div>
<div class = "right"> </div>
</div>
</div>
<div class = "page-content">
<div class = "content-block-title">Select Your Message</div>
<div class = "list-block media-list">
<ul>
<li>
<label class = "label-checkbox item-content">
<input type = "checkbox" name = "my-checkbox" value = "1">
<div class = "item-media"><i class = "icon icon-form-checkbox"></i></div>
<div class = "item-inner">
<div class = "item-title-row">
<div class = "item-title">Amayon</div>
<div class = "item-after">7:10</div>
</div>
<div class = "item-subtitle">Your order has been shipped</div>
<div class = "item-text">Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Nulla sagittis tellus ut turpis condimentum, ut dignissim
lacus tincidunt.</div>
</div>
</label>
</li>
<li>
<label class = "label-checkbox item-content">
<input type = "checkbox" name = "my-checkbox" value = "2">
<div class = "item-media"><i class = "icon icon-form-checkbox"></i></div>
<div class = "item-inner">
<div class = "item-title-row">
<div class = "item-title">VodafoneZone</div>
<div class = "item-after">10:15</div>
</div>
<div class = "item-subtitle">Bill Payments</div>
<div class = "item-text">Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Nulla sagittis tellus ut turpis condimentum, ut dignissim
lacus tincidunt.</div>
</div>
</label>
</li>
<li>
<label class = "label-checkbox item-content">
<input type = "checkbox" name = "my-checkbox" value = "3">
<div class = "item-media"><i class = "icon icon-form-checkbox"></i></div>
<div class = "item-inner">
<div class = "item-title-row">
<div class = "item-title">Popular in your network</div>
<div class = "item-after">19:14</div>
</div>
<div class = "item-subtitle">New messages from John Doe</div>
<div class = "item-text">Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Nulla sagittis tellus ut turpis condimentum, ut dignissim
lacus tincidunt.</div>
</div>
</label>
</li>
<li>
<label class = "label-checkbox item-content">
<input type = "checkbox" name = "my-checkbox" value = "4">
<div class = "item-media"><i class = "icon icon-form-checkbox"></i></div>
<div class = "item-inner">
<div class = "item-title-row">
<div class = "item-title">Adam WillSmith</div>
<div class = "item-after">22:44</div>
</div>
<div class = "item-subtitle">Car Insurance renewal</div>
<div class = "item-text">Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Nulla sagittis tellus ut turpis condimentum, ut dignissim
lacus tincidunt.</div>
</div>
</label>
</li>
</ul>
</div>
<div class = "content-block-title">Which is your favourite Magazine?</div>
<div class = "list-block media-list">
<ul>
<li>
<label class = "label-radio item-content">
<input type = "radio" name = "my-radio" value = "1" checked>
<div class = "item-media"><img src = "/framework7/images/pic3.jpg" width = "80"></div>
<div class = "item-inner">
<div class = "item-title-row">
<div class = "item-title">Tarangi</div>
<div class = "item-after">$10</div>
</div>
<div class = "item-subtitle">Monthly</div>
<div class = "item-text">Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Nulla sagittis tellus ut turpis condimentum, ut dignissim
lacus tincidunt. Cras dolor metus, ultrices condimentum sodales sit amet,
pharetra sodales eros. Phasellus vel felis tellus. Mauris rutrum ligula nec
dapibus feugiat. In vel dui laoreet, commodo augue id, pulvinar lacus.</div>
</div>
</label>
</li>
<li>
<label class = "label-radio item-content">
<input type = "radio" name = "my-radio" value = "2">
<div class = "item-media"><img src = "/framework7/images/pic2.jpg" width = "80"></div>
<div class = "item-inner">
<div class = "item-title-row">
<div class = "item-title">Business Today</div>
<div class = "item-after">$20</div>
</div>
<div class = "item-subtitle">Monthly</div>
<div class = "item-text">Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Nulla sagittis tellus ut turpis condimentum, ut dignissim
lacus tincidunt. Cras dolor metus, ultrices condimentum sodales sit amet,
pharetra sodales eros. Phasellus vel felis tellus. Mauris rutrum ligula nec
dapibus feugiat. In vel dui laoreet, commodo augue id, pulvinar lacus.</div>
</div>
</label>
</li>
<li>
<label class = "label-radio item-content">
<input type = "radio" name = "my-radio" value = "3">
<div class = "item-media"><img src = "/framework7/images/pic.jpg" width = "80"></div>
<div class = "item-inner">
<div class = "item-title-row">
<div class = "item-title">Frontier</div>
<div class = "item-after">$15</div>
</div>
<div class = "item-subtitle">Weakly</div>
<div class = "item-text">Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Nulla sagittis tellus ut turpis condimentum, ut dignissim
lacus tincidunt. Cras dolor metus, ultrices condimentum sodales sit amet,
pharetra sodales eros. Phasellus vel felis tellus. Mauris rutrum ligula nec
dapibus feugiat. In vel dui laoreet, commodo augue id, pulvinar lacus.</div>
</div>
</label>
</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>
var myApp = new Framework7();
</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_radio_with_media.html fichier dans le dossier racine de votre serveur.
Ouvrez ce fichier HTML comme http: //localhost/forms_radio_with_media.html et la sortie s'affiche comme indiqué ci-dessous.
La mise en page du formulaire montre l'utilisation des deux cases à cocher et des groupes de radio avec une vue de liste de médias qui vous permet de sélectionner uniquement une option parmi les groupes de radio et de cocher une ou plusieurs options dans les cases à cocher.