Open In App

jQuery Mobile Listview countTheme 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 will use the jQuery Mobile Listview countTheme option. The countTheme option sets the theme color of the count bubbles in the list item. The count bubbles are elements usually aligned at the right end of listview items. 

Note: To create a count bubble, wrap a number in class “ul-li-count”.

Syntax: Use the following syntax to change the theme of count bubbles using the countTheme option. It takes a single character from a-z where each character represents a color.

For initialization for the first time, use the following syntax.

$(".items").listview({
    countTheme:"b",
});
  • Get countTheme option.

    var countThemeOption = 
        $(".items").listview( "option", "countTheme" );
  • Set countTheme option.

    $(".items").listview( "option", "countTheme", "b" );

CDN Links: Use the following CDN links for your jQuery Mobile 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: We have set to the dark theme of countTheme by using the character “b”.

HTML




<!DOCTYPE html>
<html lang="en">
  
<head>
    <link rel="stylesheet" 
          href=
    <script src=
    </script>
    <script src=
    </script>
</head>
  
<body>
    <h1 style="color:green">
        GeeksforGeeks
    </h1>
    <h3>jQuery Mobile Listview countTheme Option</h3>
    <ul class="items">
        <li>
            <a href=
               target="_blank">
                Data Structures
                <span class="ui-li-count">67</span>
            </a>
        </li>
        <li>
          <a href=
                target="_blank">
                Interview preparation
                <span class="ui-li-count">22</span>
            </a>
        </li>
        <li>
            <a href=
                Java Programming
                <span class="ui-li-count">102</span>
            </a>
        </li>
    </ul>
    <script>
        $(".items").listview({
            countTheme: "b",
        });
    </script>
</body>
  
</html>


Output:

jQuery Mobile Listview countTheme Option

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



Last Updated : 07 Mar, 2024
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads