在开发的过程中我们需要在列表上做一些操做，这时候我们就可以在列表的结尾，添加一些可操作的按钮。jquerymobile为我们提供方便的方式实现这样的功能，只要我们在ul中添加data-split-icon属性就可以了。这个属性的可选值在 jquerymobile常用data属性这篇文章中列出了一部分。下面给一个例子代码：
<!DOCTYPE html>
<html>
<head>
<title>List Divider Example</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/latest/jquery.mobile.min.css" />
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://code.jquery.com/mobile/latest/jquery.mobile.min.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>My Header</h1>
</div>
<div data-role="content">
<ul data-role="listview" data-inset="true" data-split-icon="gear">
<li><a href="ray.html"><img src="ray_small.png" class="ui-li-icon"> Raymond Camden</a> <a href="foo.html" >Delete</a></li>
<li><a href="scott.html"><img src="scott_small.png" class="ui-li-icon"> Scott Stroz</a> <a href="foo.html">Delete</a></li>
<li><a href="todd.html"><img src="todd_small.png" class="ui-li-icon"> Todd Sharp</a> <a href="foo.html">Delete</a></li>
<li><a href="dave.html"><img src="dave_small.png" class="ui-li-icon"> Dave Ferguson</a> <a href="foo.html">Delete</a></li>
</ul>
</div>
<div data-role="footer">
<h4>My Footer</h4>
</div>
</div>
</body>
</html>
效果如下：
但是还有一个问题就是，我试了一下，没找到怎么同时添加两个按钮。如果谁会，麻烦请留言告诉我，谢谢。
3161
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
