Open In App

jQuery Mobile Filterable filterTheme Option

Improve
Improve
Like Article
Like
Save
Share
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. Filterable is a widget that can filter the children of any element. A Form, List, etc can be filtered with the help of filterable. A search bar appears at the top of the List where the search text is written.

In this tutorial, we are going to learn the jQuery Mobile Filterable filterTheme Option. The filterTheme option sets the color swatch for the search placeholder panel.

Syntax: The filterTheme option takes a single character from a-z where each character depicts a color.

$(".items").filterable({
    filterTheme: "a",
});

CDN Links: Use the following CDN Links for the 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: In the following example, we have set the filterTheme to dark using character “b” to it.

HTML




<!DOCTYPE html>
<html lang="en">
  
<head>
    <link rel="stylesheet" 
          href=
    </script>
    <script src=
    </script>
</head>
  
<body>
    <h1 style="color:green">
        GeeksforGeeks
    </h1>
    <h3>jQuery Mobile Filterable filterTheme Option</h3>
    <ul class="items">
        <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").filterable({
            filterTheme: "b",
        });
    </script>
</body>
  
</html>


Output:

jQuery Mobile Filterable filterTheme Option

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



Last Updated : 17 Jan, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads