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 Ordered listviews using jQuery Mobile?
Based on the jQuery library, jQuery Mobile is a well-known open-source mobile user interface framework. It enables developers to create mobile web apps with a native-like look and feel and offers a collection of user interface elements and widgets that are suited for mobile devices. The ability to build ordered listviews, which let users simply browse through a collection of objects that are sorted in a specific order, is one of jQuery Mobile's core capabilities.
A feature of jQuery Mobile listviews called autodividers enables you to automatically group things according to some other property or the initial letter of each item. This can be especially helpful when there are many things on a list while making it easier for consumers to find what they're looking for. In this article, we'll demonstrate how and when to create Autodividers Ordered listviews on mobile devices.
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 Ordered 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 − A jQuery Mobile listview can be built by including the data-role="listview" attribute to the <ol> element.
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 − The list items should be added as <li> elements with the appropriate <a> tags as well as hrefs.
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>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>
Approach 2: Utilizing dynamically stored data
The algorithm to execute the program is given below −
Step 1 − By including the data-role="listview" attribute to the <ol> element a jQuery Mobile listview can be developed
Step 2 − To build the listview as inset, include the element data-inset="true".
Step 3 − To enable filtering of the list items, including the attribute data-filter as "true" to the page.
Step 4 − The items in the list items must be included as element <li> with the associated <a> tags as well as hrefs.
Step 5 − To choose the list element as well as retrieve its child list items, utilize JavaScript.
Step 6 − The sort() method must be utilized in an alphabetical order for the list inputs.
Step 7 − The method appendTo() method is utilized will loop through each item and produce a divider for the item's first letter.
Step 8 − The list item should be moved into the newly constructed divider by using the detach() method to remove it from its initial place.
Step 9 − To update the list view with the updated dividers, call the listview("refresh") method.
Example
<!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>
Conclusion
Two approaches for building Autodividers Ordered listviews are the data-autodividers property and dynamically stored data. The more difficult way sorts the list items and creates separators for each beginning letter using JavaScript, whereas the simpler method just adds the necessary attributes to the ul> element. Autodividers Ordered listviews are a good option for mobile web app developers to take into consideration, especially for apps that display lengthy lists of things.
32 Views
