Skip to content
Related Articles

Related Articles

jQuery Mobile Listview countTheme Option

View Discussion
Improve Article
Save Article
  • Last Updated : 31 Dec, 2021
View Discussion
Improve Article
Save Article

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


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!