How to design filter widget for mobiles using jQuery plugin ?
Last Updated :
25 Oct, 2020
In this article, we will learn how to design a filterable widget for the user interface of mobile applications using the jQuery filter bar plugin. The plugin works with many HTML controls like select, buttons, tables, control groups.
Download the required pre-compiled files from this link and save it in your working folder for the implementation of the following examples.
Example 1: The following example demonstrates the filter widget. To create the filter feature, add data-filter= ” true” for the HTML element. In this case, it’s done for the “ul” element. Other attributes of the plugin can also be set as per the need.
HTML
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content=
"width=device-width, initial-scale=1">
<link rel="stylesheet" href="css.css" />
<script src=
</script>
<script src="jqm.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="content" id="divID">
<p><strong>Listview images</strong></p>
<div class="some">
<ul data-role="listview"
data-inset="true" data-filter="true"
data-target="some"><br>
<li>
<img src="images/gfg2.JPG"
alt="geeks1"
data-filtertext="gfgFest"
width="250" height="250">
gfgFest
</li>
<li>
<img src="images/gfg4.JPG"
alt="geeks2"
data-filtertext="fiesta"
width="200" height="200">
fiesta
</li>
<li>
<img src="images/gfg6.PNG"
alt="geeks3"
data-filtertext="CS portal"
width="200" height="200">
CS Portal
</li>
<li>
<img src="images/background2.JPG"
alt="geeks4"
data-filtertext="html"
width="200" height="200">
html
</li>
<li>
<img src="images/background3.JPG"
alt="geeks5"
data-filtertext="css"
width="200" height="200">
css
</li>
</ul>
</div>
</div>
</div>
</body>
</html>
|
Output:
Example 2: In the following data-filter is set to “true” for the HTML table.
html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content=
"width=device-width, initial-scale=1">
<link rel="stylesheet" href="css.css" />
<script src=
</script>
<script src="jqm.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="content" id="divID">
<p>
<strong>
Table
</strong>
</p>
<div class="tableWrap">
<table cellspacing="0"
class="ui-responsive table-stroke"
data-role="table" id="sample"
data-mode="columntoggle"
data-filter="true">
<thead>
<tr>
<th rowspan="2">
Company
</th>
<th rowspan="2"
data-sortable="true"
data-priority="6">
Last Trade
</th>
<th rowspan="2"
data-priority="3"
data-sortable="true">
Trade Time
</th>
<th rowspan="2"
data-priority="5"
data-sortable="true">
Open</th>
</tr>
</thead>
<tbody class="table_body">
<tr>
<th><span class="co-name">
Google Inc.
</span></th>
<td>597.74</td>
<td>12:12PM</td>
<td>597.95</td>
</tr>
<tr>
<th><span class="co-name">
Apple Inc.
</span></th>
<td>378.94</td>
<td>12:22PM</td>
<td>381.02</td>
</tr>
<tr>
<th><span class="co-name">
Amazon.com Inc.
</span></th>
<td>191.55</td>
<td>12:23PM</td>
<td>194.99</td>
</tr>
<tr>
<th><span class="co-name">
Oracle Corporation
</span></th>
<td>31.15</td>
<td>12:44PM</td>
<td>30.67</td>
</tr>
<tr>
<th><span class="co-name">
Microsoft Corporation
</span></th>
<td>25.50</td>
<td>12:27PM</td>
<td>25.37</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</body>
</html>
|
Output:
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...