- Framework7 教程
- Framework7 - 首页
- Framework7 - 概述
- Framework7 - 环境配置
- Framework7 组件
- Framework7 - 布局
- Framework7 - 导航栏
- Framework7 - 工具栏
- Framework7 - 搜索栏
- Framework7 - 状态栏
- Framework7 - 侧边栏
- Framework7 - 内容块
- Framework7 - 网格布局
- Framework7 - 覆盖层
- Framework7 - 预加载器
- Framework7 - 进度条
- Framework7 - 列表视图
- Framework7 - 手风琴
- Framework7 - 卡片
- Framework7 - 芯片
- Framework7 - 按钮
- Framework7 - 操作按钮
- Framework7 - 表单
- Framework7 - 标签页
- Framework7 - Swiper 滑块
- Framework7 - 图片浏览器
- Framework7 - 自动完成
- Framework7 - 选择器
- Framework7 - 日历
- Framework7 - 下拉刷新
- Framework7 - 无限滚动
- Framework7 - 消息
- Framework7 - 消息栏
- Framework7 - 通知
- Framework7 - 懒加载
- Framework7 样式
- Framework7 - 颜色主题
- Framework7 - 分隔线
- Framework7 模板
- Framework7 - 模板概述
- Framework7 - 自动编译
- Framework7 - Template7 页面
- Framework7 快速点击
- Framework7 - 活动状态
- Framework7 - 长按事件
- Framework7 - 点击涟漪效果
- Framework7 有用资源
- Framework7 - 快速指南
- Framework7 - 有用资源
- Framework7 - 讨论
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文件，例如：https://127.0.0.1/forms_radio_with_media.html，输出结果如下所示。
表单布局显示了在媒体列表视图中同时使用复选框和单选按钮组，单选按钮组只能选择一个选项，而复选框可以选中一个或多个选项。
framework7_forms.htm
广告