資料結構
網路
關係資料庫管理系統 (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.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>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.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">
<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 次瀏覽
