Framework7 - Lista de contactos de vista de lista
Descripción
La lista de contactos es un tipo de vista de lista, que se puede utilizar para mostrar la lista de contactos de personas.
Ejemplo
El siguiente ejemplo demuestra el uso de la lista de contactos en 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>Salida
Realicemos los siguientes pasos para ver cómo funciona el código dado anteriormente:
Guarde el código HTML proporcionado anteriormente como listview_contacts_lists.html archivo en la carpeta raíz de su servidor.
Abra este archivo HTML como http: //localhost/listview_contacts_lists.html y la salida se muestra como se muestra a continuación.
El ejemplo muestra la lista de contactos de personas personales.