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.
<!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:
Reference: https://api.jquerymobile.com/filterable/#option-filterTheme