Open In App

jQuery Mobile Listview filterTheme 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 filterTheme option. The option sets the color scheme from the swatches to the search bar we get by the filter option of Listview. The colors are from the colors that are included in our theme.

Syntax: For setting the filterTheme option of the Listview, use the following syntax. The filterTheme takes a single character from a-z as a parameter where each character specifies some color.

For initialization of filterTheme option, use the following syntax

$(".items").listview({
    filterTheme:"a",
});
  • Get filterTheme option.

    var filterThemeOption = 
        $(".items").listview( "option", "filterTheme" );
  • Set filterTheme option.

    $(".items").listview( "option", "filterTheme", "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 1: We have set the theme to dark by using the character “b” for the filterTheme option of the Listview.

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 filterTheme Option</h3>
    <ul class="items" data-filter-theme="b">
        <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({
        filter: true,
        filterTheme: "b",
    });
    </script>
</body>
  
</html>


Output

jQuery Mobile Listview filterTheme Option

Example 2: Use the light theme by setting the filterTheme as “a”.

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 filterTheme Option</h3>
    <ul class="items" data-filter-theme="a">
        <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({
        filter: true,
        filterTheme: "a",
    });
    </script>
</body>
  
</html>


Output

jQuery Mobile Listview filterTheme Option

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



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