Framework7 - Liste des contacts de la vue
La description
La liste de contacts est un type d'affichage de liste, qui peut être utilisé pour afficher la liste des contacts de personnes.
Exemple
L'exemple suivant montre l'utilisation de la liste de contacts 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>List View Contacts List</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">List View Contacts List</div>
</div>
</div>
<div class = "pages navbar-through">
<div data-page = "index" class = "page navbar-fixed">
<div class = "page-content contacts-content">
<div class = "list-block contacts-block">
<div class = "list-group">
<ul>
<li class = "list-group-title">A</li>
<li>
<div class = "item-content">
<div class = "item-inner">
<div class = "item-title">Aadi</div>
</div>
</div>
</li>
<li>
<div class = "item-content">
<div class = "item-inner">
<div class = "item-title">Aakash</div>
</div>
</div>
</li>
<li>
<div class = "item-content">
<div class = "item-inner">
<div class = "item-title">Abhay</div>
</div>
</div>
</li>
<li>
<div class = "item-content">
<div class = "item-inner">
<div class = "item-title">Abhinav</div>
</div>
</div>
</li>
<li>
<div class = "item-content">
<div class = "item-inner">
<div class = "item-title">Aditya</div>
</div>
</div>
</li>
</ul>
</div>
<div class = "list-group">
<ul>
<li class = "list-group-title">B</li>
<li>
<div class = "item-content">
<div class = "item-inner">
<div class = "item-title">Bhairav</div>
</div>
</div>
</li>
<li>
<div class = "item-content">
<div class = "item-inner">
<div class = "item-title">Bhargava</div>
</div>
</div>
</li>
<li>
<div class = "item-content">
<div class = "item-inner">
<div class = "item-title">Bhooshan</div>
</div>
</div>
</li>
<li>
<div class = "item-content">
<div class = "item-inner">
<div class = "item-title">Brijesh</div>
</div>
</div>
</li>
</ul>
</div>
<div class = "list-group">
<ul>
<li class = "list-group-title">C</li>
<li>
<div class = "item-content">
<div class = "item-inner">
<div class = "item-title">Chaitan</div>
</div>
</div>
</li>
<li>
<div class = "item-content">
<div class = "item-inner">
<div class = "item-title">Chandrakumar</div>
</div>
</div>
</li>
<li>
<div class = "item-content">
<div class = "item-inner">
<div class = "item-title">Chinmay</div>
</div>
</div>
</li>
<li>
<div class = "item-content">
<div class = "item-inner">
<div class = "item-title">Chirag</div>
</div>
</div>
</li>
<li>
<div class = "item-content">
<div class = "item-inner">
<div class = "item-title">Chiranjeevi</div>
</div>
</div>
</li>
</ul>
</div>
<div class = "list-group">
<ul>
<li class = "list-group-title">D</li>
<li>
<div class = "item-content">
<div class = "item-inner">
<div class = "item-title">Danish</div>
</div>
</div>
</li>
<li>
<div class = "item-content">
<div class = "item-inner">
<div class = "item-title">Darshan</div>
</div>
</div>
</li>
</ul>
</div>
</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 listview_contacts_lists.html fichier dans le dossier racine de votre serveur.
Ouvrez ce fichier HTML en tant que http: //localhost/listview_contacts_lists.html et la sortie s'affiche comme indiqué ci-dessous.
L'exemple affiche la liste des contacts personnels.