jquerymobile-12 拆分按钮列表(Split button lists)

在开发的过程中我们需要在列表上做一些操做,这时候我们就可以在列表的结尾,添加一些可操作的按钮。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>

效果如下:

jquerymobile-12 拆分按钮列表(Split button lists)_第1张图片

但是还有一个问题就是,我试了一下,没找到怎么同时添加两个按钮。如果谁会,麻烦请留言告诉我,谢谢。

你可能感兴趣的:(jquerymobile-12 拆分按钮列表(Split button lists))