jqMobi中的页面布局不多,目前主要有Styled Lists,和Grid System两种布局。
Styled Lists是列表时布局,每一行只显示一条数据。
基本结构式使用ul并设置类属性为list,每一行一个标签<li>
例如:
~~~
<ul class="list">
<li> 需要显示的内容</li>
<li> 需要显示的内容</li>
<li>需要显示的内容</li>
</ul>
~~~
显示效果
![](https://box.kancloud.cn/2016-02-23_56cbb4b85d54e.jpg)
再例如:
~~~
<ul class="list">
<li> <a href="detailitem.html" data-refresh-ajax="true" class='icon home big'>账户new 1</a></li>
<li> <a href="detailitem.html" data-refresh-ajax="true" class='icon picture big'>账户new 2</a></li>
<li> <a href="detailitem.html" data-refresh-ajax="true" class='icon home big'>账户new 3</a></li>
</ul>
~~~
显示效果
![](https://box.kancloud.cn/2016-02-23_56cbb4b86e1f7.jpg)
可以使用inset增加一定的效果
例如:
~~~
<ul class="list inset">
<li> <a href="detailitem.html" data-refresh-ajax="true" class='icon home big'>账户new 1</a></li>
<li> <a href="detailitem.html" data-refresh-ajax="true" class='icon picture big'>账户new 2</a></li>
<li> <a href="detailitem.html" data-refresh-ajax="true" class='icon home big'>账户new 3</a></li>
</ul>
~~~
效果:
![](https://box.kancloud.cn/2016-02-23_56cbb4b87cc11.jpg)
可以看到边角变成了圆形。
# [官网参考](http://app-framework-software.intel.com/documentation.php#afui/afui_lists)
- 前言
- 使用jqMobi开发app基础
- jqMobi开发app页面注意事项
- 使用jqMobi开发app基础:定义header
- 使用jqMobi开发app基础:定义footer
- 使用jqMobi开发app基础:通过panel添加内容
- 使用jqMobi开发app基础:panel属性data-defer介绍
- 使用jqMobi开发app基础:Side Menu
- 使用jqMobi开发app基础:Styled Lists布局
- 使用jqMobi开发app基础:Grid布局
- 使用jqMobi开发app基础:响应式布局介绍
- 使用jqMobi开发app基础:Toggle Switches开关按钮
- 使用jqMobi开发app基础:HTML5 LocalStorage 本地存储
- 使用jqMobi开发app基础:登录页面的实现
- 使用jqMobi开发app基础:注销页面的实现
- 使用jqMobi开发app基础:viewport指令
- 使用jqMobi开发app基础:a标签的使用
- 使用jqMobi开发app基础:Scrolling的使用,向上向下拖动,动态添加数据
- 使用jqMobi开发app基础:页面传值方式
- 使用jqMobi开发app基础:panel之间的跳转方式
- 使用jqMobi开发app基础:panel之间的跳转方式总结
- 使用jqMobi开发app基础:下拉select
- 使用jqMobi开发app基础:真的只能存在一个DOM吗?
- 使用jqMobi开发app基础:使用 jQuery
- 使用jqMobi开发app基础:Scrolling的使用,拖动后大量空白的解决方法
- 使用jqMobi开发app基础:Scrolling的使用,停止和继续拖动有关的问题
- 使用jqMobi开发app基础:Badge的使用
- 使用jqMobi开发app基础:如何拨打电话?
- 使用jqMobi开发app基础:弹出内容的设计