jquerymobile-6 inset list和list divider 添加数字气泡缩略图和icon list提交搜索过滤

最新推荐文章于 2017-06-02 11:52:15 发布

魔都

最新推荐文章于 2017-06-02 11:52:15 发布

阅读量1.5k

点赞数

分类专栏：手持html5phone Gap JQuery moblie 文章标签： html5 jquery mobile 移动浏览器 html5技术 android

手持html5phone Gap JQuery moblie 专栏收录该内容

13 篇文章

订阅专栏

本文介绍如何使用 jQuery Mobile 提升列表美观性，通过 insetlist 和 listdivider 属性，以及添加列表分隔符实现清晰的区分效果。此外，演示了如何在列表项中加入缩略图、添加计数气泡、调整图片大小，以及利用搜索功能快速定位列表项。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

今天介绍一下inset list和list diveder。在上篇文章中介绍了list，但是那个list是最基本，并不是太美观。我们可以使用jquerymobile的data-inset属性让其变得美观一下。代码如下：

[html] view plain copy

<!DOCTYPE html>
<html>
<head>
<title>Inset List 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">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>
<div data-role="footer">
<h4>My Footer</h4>
</div>
</div>
</body>
</html>

这样就看起来好看一点了。有时候我们需要在一个很长的列表中添加一行用于区分的数据，这时候我们就可以使用data-role="list-divider"，添加到其中的某一个li上，这样就能实现区分的效果。一个例子代码如下：

[html] view plain copy

<!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">
<li data-role="list-divider">A</li>
<li>A-1</li>
<li>A-2</li>
<li>A-3</li>
<li data-role="list-divider">B</li>
<li>b-1</li>
</ul>
</div>
<div data-role="footer">
<h4>My Footer</h4>
</div>
</div>
</body>
</html>

效果图如下：

在项目中，我们一般使用list显示一个列表，如果这个列表还有子项的时候，有时候我们需要在上面加上子项的数目，这时候我们就可以使用jquerymobile提供的CSS类中的ui-li-count类实现这样的效果。一段例子代码如下：

[html] view plain copy

<!DOCTYPE html>
<html>
<head>
<title>Count Bubble 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">
<li data-role="list-divider">Cookies Eaten</li>
<li>A <span class="ui-li-count">9</span></li>
<li>B <span class="ui-li-count">4</span></li>
<li>C <span class="ui-li-count">13</span></li>
<li>D <span class="ui-li-count">8</span></li>
</ul>
</div>
<div data-role="footer">
<h4>My Footer</h4>
</div>
</div>
</body>
</html>

我们只要添加一个span并且给起添加ui-li-count类就可以实现了。效果如下：

有时候我们需要在list中的每一项上添加上缩略图，这时候我们就可以直接插入一个img标签，jquerymobile会为我们自动渲染成带缩略图的。下面看一个例子代码：

[html] view plain copy

<!DOCTYPE html>
<html>
<head>
<title>Thumbnail 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">
<li><img src="ray.png"> Raymond Camden</li>
<li><a href="scott.html"><img src="scott.png"> Scott Stroz</a></li>
<li><a href="todd.html"><img src="todd.png"> Todd Sharp</a></li>
<li><a href="dave.html"><img src="dave.png"> Dave Ferguson</a></li>
</ul>
</div>
<div data-role="footer">
<h4>My Footer</h4>
</div>
</div>
</body>
</html>

效果如下：

第一项没有小箭头在代码中注释中有解释。

看到这个总是感觉这几个人的头像有点大了，我们只需要比较小的就可以了。这时候可以使用jquerymobile提供的一个CSS类ui-li-icon，在每个img标签中添加上这个类就可以了。修改后代码如下：

[html] view plain copy

<!DOCTYPE html>
<html>
<head>
<title>Thumbnail 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">
<li><img src="ray_small.png" class="ui-li-icon"> Raymond Camden</li>
<li><a href="scott.html"><img src="scott_small.png" class="ui-li-icon"> Scott Stroz</a></li>
<li><a href="todd.html"><img src="todd_small.png" class="ui-li-icon"> Todd Sharp</a></li>
<li><a href="dave.html"><img src="dave_small.png" class="ui-li-icon"> Dave Ferguson</a></li>
</ul>
</div>
<div data-role="footer">
<h4>My Footer</h4>
</div>
</div>
</body>
</html>

效果如下：

在开发的时候如果list过长的话，在其中查找特定的一项是比较麻烦的，jquerymobile为我们直接提供了搜索的功能。我们就可以直接使用其功能查找我们想要的结果。为了实现这个功能我们只需要在ul中添加data-filter="true"，这样jquerymobile就会自动添加一个过滤的搜索框，并且实现搜索功能了。下面给出一个例子代码：

[html] view plain copy

<!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-filter="true" data-filter-placeholder="Something">
<li><a href="ray.html">Raymond Camden</a></li>
<li><a href="scott.html">Scott Stroz</a></li>
<li><a href="todd.html">Todd Sharp</a></li>
<li><a href="dave.html">Dave Ferguson</a></li>
<li><a href="dave.html">Jeanne Camden</a></li>
<li><a href="dave.html">Alexson Boudreaux</a></li>
<li><a href="dave.html">Ben Forta</a></li>
<li><a href="dave.html">Rachel Luxemburg</a></li>
<li><a href="dave.html">Lynn Camden</a></li>
<li><a href="dave.html">Noah Camden</a></li>
<li><a href="dave.html">Jacob Camden</a></li>
<li><a href="dave.html">Luke Skywalker</a></li>
<li><a href="dave.html">Anakin Skywalker</a></li>
<li><a href="dave.html">Moonpie Rockhead</a></li>
<li><a href="dave.html">Lisa Spacestation</a></li>
<li><a href="dave.html">Terrible Ricky</a></li>
<li><a href="dave.html">Han Solo</a></li>
</ul>
</div>
<div data-role="footer">
<h4>My Footer</h4>
</div>
</div>
</body>
</html>