jQuery Mobile is a set of HTML5 based user system interaction widget toolbox used for various purposes build on top of jQuery. It is designed to build fast and responsive sites accessible to mobile, tabs, and desktops. jQuery Listview is a widget used to create beautiful lists. It is a simple and responsive Listview used to view the unordered lists.
In this article, we will be using the jQuery Mobile Listview theme option to set the color scheme for the Listview. The theme value uses a single letter from a-z. It accepts string type value and its default value is null, inherited from a parent.
Syntax: The syntax for the theme is as follows. We need to pass any single letter from a-z alphabets.
$(".selector").listview({
theme: "p",
});CDN Link: First, add jQuery Mobile scripts needed for your project.
<link rel=”stylesheet” href=”https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css” />
<script src=”https://code.jquery.com/jquery-1.11.1.min.js”></script>
<script src=”https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js”></script>
Example 1: The following code demonstrates the Listview with Light Theme.
<!DOCTYPE html> <html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>GeeksforGeeks</title>
<link
rel="stylesheet"
href=
<script src=
</script>
<script src=
</script>
</head>
<body>
<h4>GeeksforGeeks Light Theme Listview</h4>
<ul class="items" data-role="listview">
<li>
<a href=
target="_blank">
Data Structures
</a>
</li>
<li>
<a
href=
target="_blank">
Interview preparation
</a>
</li>
<li>
<a href=
target="_blank">
Java Programming
</a>
</li>
</ul>
<script>
$(".items").listview({
theme: "p",
});
</script>
</body>
</html>
|
Output
Example 2: The following code demonstrates the Listview with Dark theme. Change the letter of theme with “b”. The color theme will change to black.
<!DOCTYPE html> <html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport"
content="width=device-width, initial-scale=1.0" />
<title>GeeksforGeeks</title>
<link
rel="stylesheet"
href=
/>
<script src=
</script>
<script src=
</script>
</head>
<body>
<h4>GeeksforGeeks Light Theme Listview</h4>
<ul class="items" data-role="listview">
<li>
<a href=
Data Structures
</a>
</li>
<li>
<a href=
target="_blank">
Interview preparation
</a>
</li>
<li>
<a href=
Java Programming
</a>
</li>
</ul>
<script>
$(".items").listview({
theme: "b",
});
</script>
</body>
</html>
|
Output: