Open In App

jQuery Mobile Listview theme Option

Improve
Improve
Like Article
Like
Save
Share
Report

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.

HTML




<!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

Listview theme Option

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.

HTML




<!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:

Listview theme Option



Last Updated : 15 Dec, 2021
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads