列表缩略图和图标。将img元素放在在列表项的开始， jQuery Mobile将会以缩略图的形式来展现，图片的大小为80 X 80像素。如果添加class=”ui-li-icon”类样式img元素的大小将会以16 X 16像素的图标
以下是一个列表项的实例
<!DOCTYPE html>
<html>
<head>
<title>jQuery Mobile Lists Demo</title>
<linkrel="stylesheet"href="" />
<scriptsrc=""></script>
<scriptsrc=""></script>
</head>
<body>
<divdata-role="page"id="home">
<divdata-role="header">
<h1>Lists Demo</h1>
</div>
<divdata-role="content">
<h2style="padding: 1em 0;">A list view</h2>
<uldata-role="listview"data-inset="true">
<li>Cat</li>
<li>Dog</li>
<li>Mouse</li>
<li>Squirrel</li>
</ul>
<h2style="padding: 1em 0;">A list of links</h2>
<uldata-role="listview"data-inset="true">
<li><ahref="#">About this app</a></li>
<li><ahref="#">Buy ice cream</a></li>
<li><ahref="#">Find a store</a></li>
</ul>
<h2style="padding: 1em 0;">Nested lists</h2>
<uldata-role="listview"data-inset="true">
<li>Play
<ul>
<li><ahref="#">Easy</a></li>
<li><ahref="#">Medium</a></li>
<li><ahref="#">Hard</a></li>
</ul>
</li>
<li>Settings
<ul>
<li><ahref="#">Graphics</a></li>
<li><ahref="#">Sound</a></li>
<li><ahref="#">Device</a></li>
</ul>
</li>
<li>Highscores
<ul>
<li><ahref="#">View</a></li>
<li><ahref="#">Submit</a></li>
<li><ahref="#">Reset</a></li>
</ul>
</li>
</ul>
<h2style="padding: 1em 0;">A split button list with filter</h2>
<uldata-role="listview"data-inset="true"data-filter="true">
<li>
<ahref="#">The Grapes of Wrath</a>
<ahref="#">Buy This Book</a>
</li>
<li>
<ahref="#">The Trial</a>
<ahref="#">Buy This Book</a>
</li>
<li>
<ahref="#">A Tale of Two Cities</a>
<ahref="#">Buy This Book</a>
</li>
</ul>
<h2style="padding: 1em 0;">A list with count bubbles</h2>
<uldata-role="listview"data-inset="true">
<li><ahref="#">SuperWidgets</a><spanclass="ui-li-count">14</span></li>
<li><ahref="#">MegaWidgets</a><spanclass="ui-li-count">0</span></li>
<li><ahref="#">WonderWidgets</a><spanclass="ui-li-count">327</span></li>
</ul>
</div>
</div>
</body>
</html>
data-inset=”true”将格式化列表块为圆角化，如果你使用这种样式的话，列表条目的宽度拉伸成与浏览器窗口的宽度一致
还有好多有趣的列表视图可以参见jQuery Mobile档。链接如下
#docs/lists/indexhtml
主题
jQuery Mobile渲染的灰色、黑色和蓝色及圆形的组件使其看起来很漂亮，但是如果你的整个应用都使用这样的样式，将会使其变得很乏味。jQuery Mobile允许你自定义官方一些组件的主题。例如：
Font family
Drop shadows
按钮和盒状元素的边框圆角半径
图标组件
另外，每一个主题包含26种不同颜色的切换（标记从a 到z），可以控制前景颜色，背景色和渐变色，典型用法是使页面元素部分替换，你可以使用data-theme属性。例如：
相关文章
精彩导读
热门资讯
关注我们
