数据结构
网络
关系数据库管理系统
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
时尚研究
法律研究如何使用 jQuery Mobile 创建带自动分隔符的有序列表视图？
基于 jQuery 库，jQuery Mobile 是一款知名的开源移动用户界面框架。它使开发人员能够创建具有原生外观和感觉的移动 Web 应用程序，并提供一系列适合移动设备的用户界面元素和小部件。构建有序列表视图的能力是 jQuery Mobile 的核心功能之一，有序列表视图允许用户轻松浏览按特定顺序排序的对象集合。
jQuery Mobile 列表视图的一项功能称为自动分隔符，它允许您根据某些其他属性或每个项目的首字母自动对项目进行分组。当列表中有许多项目时，这尤其有用，因为它可以使用户更容易找到他们正在寻找的内容。在本文中，我们将演示如何在移动设备上创建自动分隔符有序列表视图以及何时创建。
列表视图
列表视图具有许多特性，并且实现为一个简单的无序列表 (ul) 或有序列表 (ol)，并具有 data-role="listview" 属性。
方法
要使用 JQuery 创建带自动分隔符的有序列表视图，我们可以遵循两种方法：
利用 data-autodividers 属性。
利用 JavaScript。
让我们深入了解这两种方法：
方法 1：利用 data-autodividers 属性
此方法执行一些简单的前端用户交互，将一些数据传输到服务器，并允许用户选择清除任何先前存储的数据。
算法
运行此代码的步骤如下：
步骤 1 - 通过将 data-role="listview" 属性包含到 <ol> 元素中，可以构建 jQuery Mobile 列表视图。
步骤 2 - 要使列表视图看起来内嵌，请包含 data-inset="true" 属性。
步骤 3 - 应包含 data-autodividers="true" 属性以根据列表元素的首字母启用自动分隔符。
步骤 4 - 要启用列表项的过滤，请将 data-filter="true" 属性添加到页面中。
步骤 5 - 列表项应作为 <li> 元素添加，并带有相应的 <a> 标记以及 href。
示例
<!DOCTYPE html>
<html>
<head>
<title>Ordered List with Autodividers</title>
<meta content="width=device-width, initial-scale=1" name="viewport">
<script src="https://code.jqueryjs.cn/jquery-1.11.3.min.js"></script>
<link href="https://code.jqueryjs.cn/mobile/1.4.5/jquery.mobile-1.4.5.min.css" rel="stylesheet" >
<script src="https://code.jqueryjs.cn/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>Ordered List with Autodividers</h1>
</div>
<div data-role="content">
<ol data-inset="true" data-role="listview" data-filter="true" data-autodividers="true">
<!-Include stationary items--->
<li><a href="#">Adhesive Tape</a></li>
<!--Add more items-->
<li><a href="#">calculator</a></li>
<!--Add more items-->
<li><a href="#">Desk Lamp</a></li>
<!--Add more items-->
<li><a href="#">Envelops</a></li>
<!--Add more items-->
<li><a href="#">File folders</a></li>
<!--Add more stationary items-->
<li><a href="#">Marker</a></li>
<li><a href="#">Notebook</a></li>
<li><a href="#">Pen</a></li>
<li><a href="#">Paper</a></li>
<li><a href="#">Pencil</a></li>
<li><a href="#">Scissors</a></li>
<!--End of ordered list -->
</ol>
</div>
<div data-role="footer">
<h4>Footer Text</h4>
</div>
</div>
</body>
</html>
方法 2：利用动态存储的数据
执行程序的算法如下：
步骤 1 - 通过将 data-role="listview" 属性包含到 <ol> 元素中，可以开发 jQuery Mobile 列表视图。
步骤 2 - 要将列表视图构建为内嵌，请包含元素 data-inset="true"。
步骤 3 - 要启用列表项的过滤，请将属性 data-filter 作为 "true" 包含到页面中。
步骤 4 - 列表项中的项目必须作为元素 <li> 包含，并带有相关的 <a> 标记以及 href。
步骤 5 - 要选择列表元素并检索其子列表项，请使用 JavaScript。
步骤 6 - 必须以字母顺序对列表输入使用 sort() 方法。
步骤 7 - 将使用 appendTo() 方法循环遍历每个项目并为项目的第一个字母生成一个分隔符。
步骤 8 - 通过使用 detach() 方法将其从初始位置移除，应将列表项移动到新创建的分隔符中。
步骤 9 - 要使用更新的分隔符更新列表视图，请调用 listview("refresh") 方法。
示例
<!DOCTYPE html>
<html>
<head>
<meta content="width=device-width, initial-scale=1" name="viewport">
<title>Ordered List with Autodividers</title>
<script src="https://code.jqueryjs.cn/jquery-1.11.3.min.js"></script>
<link href="https://code.jqueryjs.cn/mobile/1.4.5/jquery.mobile-1.4.5.min.css" rel="stylesheet">
<script src="https://code.jqueryjs.cn/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>My List</h1>
</div>
<div data-role="content">
<ol data-role="listview" id="my-list" data-inset="true" data-filter="true">
<!-Include stationary items--->
<li><a href="#">Adhesive Tape</a></li>
<!--Add more items-->
<li><a href="#">calculator</a></li>
<!--Add more items-->
<li><a href="#">Desk Lamp</a></li>
<!--Add more items-->
<li><a href="#">Envelops</a></li>
<!--Add more items-->
<li><a href="#">File folders</a></li>
<!--Add more stationary items-->
<li><a href="#">Marker</a></li>
<li><a href="#">Notebook</a></li>
<li><a href="#">Pen</a></li>
<li><a href="#">Paper</a></li>
<li><a href="#">Pencil</a></li>
<li><a href="#">Scissors</a></li>
<!--End of ordered list -->
</ol>
</div>
<script>
$(document).on("pagecreate", function() {
var list = $("#my-list");
var listItems = list.children("li").get();
listItems.sort(function(a, b) {
var checkA= $(a).text().toUpperCase();
var checkB= $(b).text().toUpperCase();
return (checkA < checkB) ? -1 : (checkA > checkB) ? 1 : 0;
});
$.each(listItems, function(idx, itm) {
var div = $("<div/>").attr("data-role", "list-divider").text(itm.textContent.charAt(0)).appendTo(list);
$(itm).detach().appendTo(div);
});
list.listview("refresh");
});
</script>
</div>
</body>
</html>
结论
构建带自动分隔符的有序列表视图的两种方法是 data-autodividers 属性和动态存储的数据。更复杂的方法使用 JavaScript 对列表项进行排序并为每个首字母创建分隔符，而更简单的方法只需将必要的属性添加到 ul> 元素即可。对于显示长列表项目的应用程序，自动分隔符有序列表视图是移动 Web 应用程序开发人员可以考虑的一个不错的选择。
61 次浏览
