資料結構
網路
關係資料庫管理系統
作業系統
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.jquery.com/jquery-1.11.3.min.js"></script>
<link href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" rel="stylesheet" >
<script src="https://code.jquery.com/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.jquery.com/jquery-1.11.3.min.js"></script>
<link href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" rel="stylesheet">
<script src="https://code.jquery.com/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 次瀏覽
