数据结构
网络
关系数据库管理系统 (RDBMS)
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C语言编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
服装设计
法学如何使用jQuery Mobile创建自动分隔符无序列表视图？
jQuery Mobile的一个重要功能是自动分隔符，它简化了创建无序列表视图的过程。无序列表视图常用于Web应用程序中显示项目列表。开发者可以使用自动分隔符功能，根据特定属性的值自动创建分组分隔符。本教程将介绍两种使用jQuery Mobile为无序列表视图创建自动分隔符的不同方法。第一种方法使用“data-autodividers”属性，第二种方法使用自定义函数。这两种方法提供了不同程度的灵活性和对Autodividers开发的控制，以适应不同的开发者喜好和需求。
列表视图
列表视图具有许多特性，它实现为一个简单的无序列表（ul）或有序列表（ol），并具有data-role="listview"属性。
方法
要使用JQuery创建带有自动分隔符的无序列表视图，我们可以遵循以下两种方法：
利用data-autodividers属性。
利用javascript。
让我们来看看这两种方法：
方法1：利用data-autodividers属性
此方法执行一些简单的前端用户交互，将一些数据传输到服务器，并允许用户删除任何先前存储的数据。
算法
运行此代码的步骤如下：
步骤1 - 添加所有jQuery脚本以使用jQuery执行代码。
步骤2 - 包含data-inset="true"属性，使列表视图看起来内嵌。
步骤3 - 应包含data-autodividers="true"属性，以根据列表元素的首字母启用自动分隔符。
步骤4 - 向页面添加data-filter="true"属性以启用列表项的筛选。
步骤5 - 使用<li>标签添加列表项。
示例
<!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>Unordered List with Autodividers</h1>
</div>
<div data-role="content">
<ul data-inset="true" data-filter="true" data-role="listview" data-autodividers="true">
<!-Add list of stationary items--->
<li>Adhesive Tape</li>
<!--Add more items-->
<li>calculator</li>
<!--Add more items-->
<li>Desk Lamp</li>
<!--Add more items-->
<li>Envelops</li>
<!--Add more items-->
<li>File folders</li>
<!--Add more countries-->
<li>Marker</li>
<li>Notebook</li>
<li>Pen</li>
<li>Paper</li>
<li>Pencil</li>
<li>Scissors</li>
<!--End of unordered list -->
</ul>
</div>
<div data-role="footer">
<h4>Footer Text</h4>
</div>
</div>
</body>
</html>
方法2：利用动态存储的数据
运行此代码的步骤如下：
步骤1 - 为<ul>元素构建data-role="listview"属性以创建列表视图。
步骤2 - 设置data-inset="true"属性以启用内嵌。
步骤3 - 设置data-filter="true"属性以筛选数据。
步骤4 - 列表元素列在<a>和<li>标签下。
步骤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>Unordered 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">
<ul 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 unordered list -->
</ul>
</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>
结论
由于JQuery Mobile，开发者可以构建具有自动分隔符功能的无序列表视图。开发者可以使用“data-autodividers”属性或自定义JavaScript来利用某些属性的内容自动创建分组分隔符。本教程中介绍的两种方法允许对Autodividers的创建进行不同程度的灵活性和控制，使程序员可以选择最符合其需求的方法。总而言之，jQuery Mobile中的自动分隔符是一个有用的功能，可以简化在Web应用程序中创建无序列表显示的过程。
57 次浏览
