移动端安卓和IOS开发框架Framework7教程-多媒体列表（Media List View）
时间：2016-06-16 02:20:34
收藏：0
阅读：365
多媒体列表是列表（list view）的扩展，它是为了展示更复杂的数据比如产品，服务，用户等等。
当然，它的布局更为复杂：
- <!--?多媒体列表有额外的“media-list”类?-->
- <div?class="list-block?media-list">
- ????<ul>
- ????????<li>
- ????????????<div?class="item-content">
- ????????????????<div?class="item-media">
- ????????????????????<img?src="path/to/img.jpg">
- ????????????????</div>
- ????????????????<div?class="item-inner">
- ????????????????????<div?class="item-title-row">
- ????????????????????????<div?class="item-title">Element?title</div>
- ????????????????????????<div?class="item-after">Element?label</div>
- ????????????????????</div>
- ????????????????????<div?class="item-subtitle">Subtitle</div>
- ????????????????????<div?class="item-text">Additional?description?text</div>
- ????????????????</div>
- ????????????</div>
- ????????</li>
- ????</ul>
- </div>
复制
其中：
-
item-media和item-inner的主要弹性(flex)容器。必选元素。 -
item-media?- 媒体元素（如图标，图片等）的容器.?可选元素. -
item-inner?-?item-title和item-after的主要弹性(flex)容器。必选元素。 -
item-title-row?-?item-title?和?item-after的主要弹性(flex)容器。必选元素。 -
item-title?- 单行列表项目标题。可选元素。 -
item-after?- 列表项目标签。可以包含任意额外的html元素（例如标签文本、徽章、switch/toggle、按钮等等）。可选元素。 -
item-subtitle?- 额外的单行标题。可选元素。 -
item-text?- 额外的两行布局的容器，用来放置细节描述。可选元素。
示例
- <div?class="content-block-title">Songs</div>
- <div?class="list-block?media-list">
- ??<ul>
- ????<li>
- ??????<a?href="#"?class="item-link?item-content">
- ????????<div?class="item-media"><img?src="..."?width="80"></div>
- ????????<div?class="item-inner">
- ??????????<div?class="item-title-row">
- ????????????<div?class="item-title">Yellow?Submarine</div>
- ????????????<div?class="item-after">$15</div>
- ??????????</div>
- ??????????<div?class="item-subtitle">Beatles</div>
- ??????????<div?class="item-text">Lorem?ipsum?dolor?sit?amet...</div>
- ????????</div>
- ??????</a>
- ????</li>
- ????...
- ??</ul>
- </div>
- <div?class="content-block-title">Mail?App</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">Facebook</div>
- ????????????<div?class="item-after">17:14</div>
- ??????????</div>
- ??????????<div?class="item-subtitle">New?messages?from?John?Doe</div>
- ??????????<div?class="item-text">Lorem?ipsum?dolor?sit?amet...</div>
- ????????</div>
- ??????</a>
- ????</li>
- ????...
- ??</ul>
- </div>
- <div?class="content-block-title">Something?more?simple</div>
- <div?class="list-block?media-list">
- ??<ul>
- ????<li>
- ??????<div?class="item-content">
- ????????<div?class="item-media"><img?src="..."?width="44"></div>
- ????????<div?class="item-inner">
- ??????????<div?class="item-title-row">
- ????????????<div?class="item-title">Yellow?Submarine</div>
- ??????????</div>
- ??????????<div?class="item-subtitle">Beatles</div>
- ????????</div>
- ??????</div>
- ????</li>
- ????...
- ??</ul>
- </div>
- <div?class="content-block-title">Inset</div>
- <div?class="list-block?media-list?inset">
- ??<ul>
- ????<li>
- ??????<a?href="#"?class="item-link?item-content">
- ????????<div?class="item-media"><img?src="..."?width="44"></div>
- ????????<div?class="item-inner">
- ??????????<div?class="item-title-row">
- ????????????<div?class="item-title">Yellow?Submarine</div>
- ??????????</div>
- ??????????<div?class="item-subtitle">Beatles</div>
- ????????</div>
- ??????</a>
- ????</li>
- ????...
- ??</ul>
- </div>
复制
?
原文：http://zaixianshouce.iteye.com/blog/2304550
评论（0）