Framework7 - Visualização da lista de mídia
Descrição
A visualização da lista de mídia é usada para exibir estruturas de dados complicadas, como produtos, serviços e informações do usuário.
Você pode usar a exibição de lista de mídia usando a classe item-content , que é o wrapper principal para as classes item-media (usada para os elementos de mídia) e item-inner (inclui título, subtítulo, elementos de texto).
Exemplo
O exemplo a seguir exibe os elementos da lista junto com as imagens na visualização de lista do 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>Resultado
Vamos realizar as seguintes etapas para ver como funciona o código fornecido acima -
Salve o código HTML fornecido acima como media_list_view.html arquivo na pasta raiz do servidor.
Abra este arquivo HTML como http: //localhost/media_list_view.html e a saída é exibida conforme mostrado abaixo.
O exemplo exibe os elementos da lista junto com as imagens.