Open In App

jQuery Mobile Listview dividerTheme Option

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Share
Report issue
Report

jQuery Mobile is an HTML5 based user interface system designed to make responsive websites and apps that are accessible on all smartphone, tablet, and desktop devices. 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 are going to implement the dividerTheme option of Listview. The dividerTheme is applied on a list-divider. A list divider is used to categorize or group list items. We can apply different themes to list dividers using the dividerTheme option.

Syntax: The syntax for dividerTheme for listview is as follows. Pass any single letter from a-z in lowercase where each letter depicts a theme.

$("#items").listview({
    dividerTheme: "a",
});

CDN Links: Use the following CDN links for jQuery Mobile.

<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: In the following example, we have implemented the light theme for the dividerTheme bypassing the character ‘a’.

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" />
    <link rel="stylesheet" href=
    </script>
    <script src=
    </script>
</head>
  
<body>
    <h1>GeeksforGeeks</h1>
    <h3>jQuery Mobile Listview dividerTheme option</h3>
    <ul id="items" data-role="listview">
        <li data-role="list-divider">
            Data Structures
        </li>
  
        <li><a href=
                Arrays
            </a>
        </li>
          
        <li><a href=
                Linked List</a>
        </li>
  
        <li><a href=
                Stack</a>
        </li>
  
        <li data-role="list-divider">
            Programming Languages
        </li>
  
        <li><a href=
                C</a>
        </li>
  
        <li><a href=
                C++</a>
        </li>
        <li><a href="https://www.geeksforgeeks.org/java">
                Java</a></li>
    </ul>
      
    <script>
        $("#items").listview({
            dividerTheme: "a",
        });
    </script>
</body>
  
</html>


Output:

Example 2: In this example, we have used the dark theme by implementing the letter “b” to dividerTheme of the listview.

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" />
    <link rel="stylesheet" href=
    </script>
    <script src=
    </script>
</head>
  
<body>
    <h1>GeeksforGeeks</h1>
    <h3>jQuery Mobile Listview dividerTheme option</h3>
  
    <ul id="items" data-role="listview">
        <li data-role="list-divider">
            Data Structures
        </li>
  
        <li><a href=
                Arrays
            </a>
        </li>
  
        <li><a href=
                Linked List</a>
        </li>
  
        <li><a href=
                Stack</a>
        </li>
  
        <li data-role="list-divider">
            Programming Languages
        </li>
  
        <li><a href=
                C</a>
        </li>
  
        <li><a href=
                C++</a>
        </li>
          
        <li><a href="https://www.geeksforgeeks.org/java">
                Java</a>
        </li>
    </ul>
  
    <script>
        $("#items").listview({
            dividerTheme: "b",
        });
    </script>
</body>
  
</html>


Output:

Reference: https://api.jquerymobile.com/listview/#option-dividerTheme



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