- Framework7 Tutorial
- Framework7 - Home
- Framework7 - Overview
- Framework7 - Environment
- Framework7 Components
- Framework7 - Layouts
- Framework7 - Navbars
- Framework7 - Toolbars
- Framework7 - Search Bar
- Framework7 - Status Bar
- Framework7 - Side Panels
- Framework7 - Content Block
- Framework7 - Layout Grid
- Framework7 - Overlays
- Framework7 - Preloaders
- Framework7 - Progress Bar
- Framework7 - List Views
- Framework7 - Accordion
- Framework7 - Cards
- Framework7 - Chips
- Framework7 - Buttons
- Framework7 - Action Button
- Framework7 - Forms
- Framework7 - Tabs
- Framework7 - Swiper Slider
- Framework7 - Photo Browser
- Framework7 - Autocomplete
- Framework7 - Picker
- Framework7 - Calendar
- Framework7 - Refresh
- Framework7 - Infinite Scroll
- Framework7 - Messages
- Framework7 - Message Bar
- Framework7 - Notifications
- Framework7 - Lazy Load
- Framework7 Styling
- Framework7 - Color Themes
- Framework7 - Hairlines
- Framework7 Templates
- Framework7 - Templates Overview
- Framework7 - Auto Compilation
- Framework7 - Template7 Pages
- Framework7 Fast Clicks
- Framework7 - Active State
- Framework7 - Tap Hold Event
- Framework7 - Touch Ripple
- Framework7 Useful Resources
- Framework7 - Quick Guide
- Framework7 - Useful Resources
- Framework7 - Discussion
Framework7 - Media List View
Description
The Media list view is used to display complicated data structures like products, services and user information.
You can use media list view by using the item-content class, which is main wrapper for the item-media(used for the media elements) and item-inner (includes title, sub title, text elements) classes.
Example
The following example displays the list elements along with the images in the Framework7 list view −
<!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>
Output
Let us carry out the following steps to see how the above given code works −
Save the above given HTML code as media_list_view.html file in your server root folder.
Open this HTML file as http://localhost/media_list_view.html and the output is displayed as shown below.
The example displays the list elements along with the images.
framework7_list_views.htm
Advertisements