jquerymobile-8 List简单使用

在开发的过程中我们会用到list显示一个列表，或者其他的东西。在普通的html中我们可以使用如下代码：

<ul>
	<li>Raymond Camden</li>
	<li>Scott Stroz</li>
	<li>Todd Sharp</li>
	<li>Dave Ferguson</li>
</ul>

这样能创建一个默认的列表，然后我们使用CSS修改为自己想要的样式。在jquerymobile中我们达到同样的样式只需要为其添加data-role="content"。修改后如下：

<ul data-role="listview">
	<li>Raymond Camden</li>
	<li>Scott Stroz</li>
	<li>Todd Sharp</li>
	<li>Dave Ferguson</li>
</ul>

代码中其他部分都省略了，这样的显示效果如下：

在实际的情况中我们经常使用多级的列表。我们只需要在上面每个li中添加ul，这样jquerymobile会自动为那些有子项目的添加一个箭头。部分代码：

<ul data-role="listview">
	<li>Games
	<ul>
		<li>Pong</li>
		<li>Breakout</li>
		<li>Tron</li>
	</ul>
	</li>
	<li>Planets</li>
</ul>

效果如下：

没有子项目的将不会为其添加上箭头，点击进入后，子项目显示跟第一个图片的效果一样。