LungoJS框架学习笔记——列表

Lungo 同时也提供了多种样式的列表控件，仅需要通过对 <ul> 和 <li> 标签属性的调整即可完成。
<section id="main">
<header data-title="列表示例"></header>
<article id="example" class="list">
<ul>
<li>
<strong>LungoJS基本布局</strong>
<small>LungoJS 框架根据html5新特性采用清晰的区块加条目（section+article）的布局方式。</small>          
</li>
<li>
<strong>LungoJS基本元素</strong>
<small>一组 section 元素就是应用中要展示的一个视图，一组 section 内还应该有 header 、footer 或 article 标签。</small>          
</li>
<li>
<strong>LungoJS导航菜单</strong>
<small>Lungo 菜单导航条完全使用 HTML5 直接元素定义，仍然通过 a 或 button 标签来构建，但必须加上 “view-*”  属性来告诉系统链接到哪个 section, article 或 aside。</small>          
</li>
</ul>
</article>
</section>

效果图：

Lungo 里的 <li> 标签可以有诸多的修饰方式，甚至包含复杂的代码来实现您需要的样式。

<section id="main">
<header data-title="列表示例"></header>
<article id="example" class="list">
<ul>
<li class="thumb big">
<img src="../icon/icon-144.png" />
<div>
<div class="on-right text tiny">9-16</div>
<strong>LungoJS菜单导航</strong>
<span class="text tiny opacity">Data-View 属性</span>
<small>
在 a 或 button 标签中使用 data-view-* 属性来设置链接要跳转去的元件是section, article 或 aside类型。
</small>
</div>
</li>
<li class="thumb big">
<div>
<div class="on-right text tiny">9-15</div>
<strong>LungoJS菜单导航</strong>
<span class="text tiny opacity">Data-back 属性</span>
<small>
Lungo 的导航是基于面包屑模式，因此在各个 section 间返回切换可以使用 data-back 属性。
</small>
</div>
<img src="../icon/icon-144.png" />
</li>
<li class="thumb big">
<img src="../icon/icon-144.png" />
<div>
<div class="on-right text tiny">9-14</div>
<strong>LungoJS菜单导航</strong>
<span class="text tiny opacity">Nav</span>
<small>
要在头部或底部创建导航按钮，通常需要用到 nav 元素。nav 元素在头部的具体位置通过 class 设定，如：class="on-left" 或 class="on-right"。
</small>
</div>
</li>
</ul>
</article>
</section>

效果图：