Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to make Autodividers Unordered listviews using jQuery Mobile?
An important function of jQuery Mobile that makes it easier to create unordered list views is autodividers. Unordered list views are often used in web applications to display lists of items. Developers can automatically build group dividers based on the value of a particular property by using the Autodividers functionality. In this tutorial, we'll look at two distinct ways to use jQuery Mobile to build Autodividers for unordered list views. The "data-autodividers" attribute is used in the first strategy, but a custom function is used in the second strategy. These strategies accommodate to various developer tastes and needs by providing varying degrees of flexibility and control over the development of the Autodividers.
Listview
A listview has many characteristics and is implemented as a straightforward unordered list (ul) or ordered list (ol) with a data-role="listview" property.
Approaches
To make Autodividers unordered listviews with JQuery we can follow the two methods −
Utilizing data-autodividers Attribute.
Utilizing javascript.
Let us look into both approaches −
Approach 1: Utilizing data-autodividers Attribute
This approach performs some straightforward frontend user interactions, transmits some data to the server, and gives the user the option to erase any previously stored data.
Algorithm
The steps to run this code are as follows −
Step 1 − Add all jQuery scripts to execute code with jQuery.
Step 2 − To make the listview seem inset, include the data-inset="true" attribute.
Step 3 − The data-autodividers="true" attribute should be included to enable automatic dividers based on the initial letter of the list elements.
Step 4 − To enable filtering of the list items, add the data-filter="true" attribute to the page.
Step 5 − Add list items with <li> tags.
Example
<!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>
Approach 2: Utilizing dynamically stored data
The steps to run this code are as follows −
Step 1 − Build data-role="listview" attribute to the <ul> element for listview
Step 2 − Set data-inset="true" element for enabling inset
Step 3 − Set attribute data-filter="true" attribute for filtering the data.
Step 4 − The list elements are listed under <a> and <li> tags.
Step 5 − Utilize javascript to pick list elements.
Step 6 − To sort elements alphabetically, utilize the sort() method.
Step 7 − To traverse each element, appendTo() method is utilized and a divider is generated.
Step 8 − Utilizing the detach() method list elements are moved to new dividers
Step 9 − Call the method listview("refresh") for an updated listview.
Example
<!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>
Conclusion
Developers can construct unordered list views with the Autodividers functionality owing to JQuery Mobile. The content of certain properties may be employed by developers to automatically create group dividers using either the "data-autodividers" attribute or custom JavaScript. The two methods covered in this lesson allow for different levels of flexibility and control over the creation of Autodividers, allowing programmers to select the strategy that best meets their requirements. Overall, Autodividers in jQuery Mobile is a helpful feature that can make it easier to create unordered list displays in online applications.
28 Views
