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>Checkboxes group</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 = "pages">
<div data-page = "home" class = "page navbar-fixed">
<div class = "navbar">
<div class = "navbar-inner">
<div class = "left"> </div>
<div class = "center">Checkboxes and Radios</div>
<div class = "right"> </div>
</div>
</div>
<div class = "page-content">
<div class = "content-block-title">Select Your Message</div>
<div class = "list-block media-list">
<ul>
<li>
<label class = "label-checkbox item-content">
<input type = "checkbox" name = "my-checkbox" value = "1">
<div class = "item-media"><i class = "icon icon-form-checkbox"></i></div>
<div class = "item-inner">
<div class = "item-title-row">
<div class = "item-title">Amayon</div>
<div class = "item-after">7:10</div>
</div>
<div class = "item-subtitle">Your order has been shipped</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>
</label>
</li>
<li>
<label class = "label-checkbox item-content">
<input type = "checkbox" name = "my-checkbox" value = "2">
<div class = "item-media"><i class = "icon icon-form-checkbox"></i></div>
<div class = "item-inner">
<div class = "item-title-row">
<div class = "item-title">VodafoneZone</div>
<div class = "item-after">10:15</div>
</div>
<div class = "item-subtitle">Bill Payments</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>
</label>
</li>
<li>
<label class = "label-checkbox item-content">
<input type = "checkbox" name = "my-checkbox" value = "3">
<div class = "item-media"><i class = "icon icon-form-checkbox"></i></div>
<div class = "item-inner">
<div class = "item-title-row">
<div class = "item-title">Popular in your network</div>
<div class = "item-after">19:14</div>
</div>
<div class = "item-subtitle">New messages from John Doe</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>
</label>
</li>
<li>
<label class = "label-checkbox item-content">
<input type = "checkbox" name = "my-checkbox" value = "4">
<div class = "item-media"><i class = "icon icon-form-checkbox"></i></div>
<div class = "item-inner">
<div class = "item-title-row">
<div class = "item-title">Adam WillSmith</div>
<div class = "item-after">22:44</div>
</div>
<div class = "item-subtitle">Car Insurance renewal</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>
</label>
</li>
</ul>
</div>
<div class = "content-block-title">Which is your favourite Magazine?</div>
<div class = "list-block media-list">
<ul>
<li>
<label class = "label-radio item-content">
<input type = "radio" name = "my-radio" value = "1" checked>
<div class = "item-media"><img src = "/framework7/images/pic3.jpg" width = "80"></div>
<div class = "item-inner">
<div class = "item-title-row">
<div class = "item-title">Tarangi</div>
<div class = "item-after">$10</div>
</div>
<div class = "item-subtitle">Monthly</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>
</label>
</li>
<li>
<label class = "label-radio item-content">
<input type = "radio" name = "my-radio" value = "2">
<div class = "item-media"><img src = "/framework7/images/pic2.jpg" width = "80"></div>
<div class = "item-inner">
<div class = "item-title-row">
<div class = "item-title">Business Today</div>
<div class = "item-after">$20</div>
</div>
<div class = "item-subtitle">Monthly</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>
</label>
</li>
<li>
<label class = "label-radio item-content">
<input type = "radio" name = "my-radio" value = "3">
<div class = "item-media"><img src = "/framework7/images/pic.jpg" width = "80"></div>
<div class = "item-inner">
<div class = "item-title-row">
<div class = "item-title">Frontier</div>
<div class = "item-after">$15</div>
</div>
<div class = "item-subtitle">Weakly</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>
</label>
</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>
var myApp = new Framework7();
</script>
</body>
</html>
输出
让我们执行以下步骤来查看上述代码的工作原理 −
将上述 HTML 代码保存为服务器根文件夹中的 forms_radio_with_media.html 文件。
将此 HTML 文件作为 http://localhost/forms_radio_with_media.html 打开，输出显示如下。
表单布局显示了复选框和单选按钮组的使用，以及媒体列表视图，允许您仅从单选按钮组中选择一个选项，并从复选框中选中一个或多个选项。
framework7_forms.html
