Framework7 - Vista de lista de medios
Descripción
La vista de lista de medios se utiliza para mostrar estructuras de datos complicadas como productos, servicios e información del usuario.
Puede usar la vista de lista de medios usando la clase item-content , que es la envoltura principal para las clases item-media (usado para los elementos multimedia) y item-inner (incluye título, subtítulo, elementos de texto).
Ejemplo
El siguiente ejemplo muestra los elementos de la lista junto con las imágenes en la vista de lista de 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>Media List View</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">Media List View</div>
</div>
</div>
<div class = "pages navbar-through">
<div data-page = "index" class = "page navbar-fixed">
<div class = "page-content">
<div class = "content-block-title">Countries</div>
<div class = "list-block media-list">
<ul>
<li>
<a href = "#" class = "item-link item-content">
<div class = "item-media"><img src = "/framework7/images/ind.gif" width = "80"></div>
<div class = "item-inner">
<div class = "item-title-row">
<div class = "item-title">India</div>
<div class = "item-after">Rupees</div>
</div>
<div class = "item-subtitle">Capital - Delhi</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>
</a>
</li>
<li>
<a href = "#" class = "item-link item-content">
<div class = "item-media"><img src = "/framework7/images/arg.gif" width = "80"></div>
<div class = "item-inner">
<div class = "item-title-row">
<div class = "item-title">Argentina</div>
<div class = "item-after">Argentine Peso</div>
</div>
<div class = "item-subtitle">Capital - Buenos Aires</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>
</a>
</li>
<li>
<a href = "#" class = "item-link item-content">
<div class = "item-media"><img src = "/framework7/images/bgm.gif" width = "80"></div>
<div class = "item-inner">
<div class = "item-title-row">
<div class = "item-title">Belgium</div>
<div class = "item-after">Euro</div>
</div>
<div class = "item-subtitle">Capital - Brussels</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>
</a>
</li>
</ul>
</div>
<div class = "content-block-title">Cricket Teams Ranking in T20</div>
<div class = "list-block media-list">
<ul>
<li>
<a href = "#" class = "item-link item-content">
<div class = "item-inner">
<div class = "item-title-row">
<div class = "item-title">India</div>
</div>
<div class = "item-subtitle">Position : 1</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>
</a>
</li>
<li>
<a href = "#" class = "item-link item-content">
<div class = "item-inner">
<div class = "item-title-row">
<div class = "item-title">West Indies</div>
</div>
<div class = "item-subtitle">Position : 2</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>
</a>
</li>
<li>
<a href = "#" class = "item-link item-content">
<div class = "item-inner">
<div class = "item-title-row">
<div class = "item-title">New Zealand</div>
</div>
<div class = "item-subtitle">Position : 3</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>
</a>
</li>
<li>
<a href = "#" class = "item-link item-content">
<div class = "item-inner">
<div class = "item-title-row">
<div class = "item-title">England</div>
</div>
<div class = "item-subtitle">Position : 4</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>
</a>
</li>
</ul>
</div>
<div class = "content-block-title">Fruits</div>
<div class = "list-block media-list">
<ul>
<li>
<div class = "item-content">
<div class = "item-media"><img src = "/framework7/images/apple.jpg" width = "44"></div>
<div class = "item-inner">
<div class = "item-title-row">
<div class = "item-title">Apple</div>
</div>
<div class = "item-subtitle">Contains list of antioxidants and essential
nutrients.</div>
</div>
</div>
</li>
<li>
<a href = "#" class = "item-link item-content">
<div class = "item-media"><img src = "/framework7/images/orange.jpg" width = "44"></div>
<div class = "item-inner">
<div class = "item-title-row">
<div class = "item-title">Orange</div>
</div>
<div class = "item-subtitle">It is low in calories, contains no saturated
fats or cholesterol.</div>
</div>
</a>
</li>
<li>
<div class = "item-content">
<div class = "item-media"><img src = "/framework7/images/watermelon.jpg" width = "44"></div>
<div class = "item-inner">
<div class = "item-title-row">
<div class = "item-title">Watermelon</div>
</div>
<div class = "item-subtitle">It is a source of Vitamin-A and powerful natural anti-oxidant.</div>
</div>
</div>
</li>
</ul>
</div>
<div class = "content-block-title">Sports</div>
<div class = "list-block media-list inset">
<ul>
<li>
<a href = "#" class = "item-link item-content">
<div class = "item-media"><img src = "/framework7/images/hockey.jpg" width = "44"></div>
<div class = "item-inner">
<div class = "item-title-row">
<div class = "item-title">India</div>
</div>
<div class = "item-subtitle">Hockey</div>
</div>
</a>
</li>
<li>
<a href = "#" class = "item-link item-content">
<div class = "item-media"><img src = "/framework7/images/cricket.jpg" width = "44"></div>
<div class = "item-inner">
<div class = "item-title-row">
<div class = "item-title">England</div>
</div>
<div class = "item-subtitle">Cricket</div>
</div>
</a>
</li>
<li>
<a href = "#" class = "item-link item-content">
<div class = "item-media"><img src = "/framework7/images/baseball.jpg" width = "44"></div>
<div class = "item-inner">
<div class = "item-title-row">
<div class = "item-title">United States</div>
</div>
<div class = "item-subtitle">Baseball</div>
</div>
</a>
</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>Salida
Realicemos los siguientes pasos para ver cómo funciona el código anterior:
Guarde el código HTML proporcionado anteriormente como media_list_view.html archivo en la carpeta raíz de su servidor.
Abra este archivo HTML como http: //localhost/media_list_view.html y la salida se muestra como se muestra a continuación.
El ejemplo muestra los elementos de la lista junto con las imágenes.