jQuery Content Filter For Mobile Device - filterbar
File Size: | 130 KB |
---|---|
Views Total: | 1571 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

filterbar is a jQuery plugin that enables you create a generic filter widget for mobile website based on the listview filter extension. To create a filter, just add data-filter="true"
to an element of your liking. The filter should work with listviews, tables, selects, controlgroups and random elements
Basic Usage:
1. Include jQuery library and jQuery filterbar plugin on the page
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script> <script src="jqm.js"></script>
2. Include the required css file to style the widget
<link rel="stylesheet" href="css.css" />
3. Create the widget
<div class="some"> <ul data-role="listview" data-inset="true" data-filter="true" data-theme="c" data-target="some"> <li>Item A</li> <li data-role="list-divider">Item B</li> <li>Item C</li> <li>Item D</li> <li data-filtertext="test">Item E</li> <li>Item F</li> <li>Item G</li> <li>Item H</li> </ul> </div>
4. Options
data-theme = // theme to style the filter (default a) data-placehodler = // text to display as placeholder (default filter items...) data-reveal = // whether to use the normal filter or autocomplete (default false) data-callback = // whether a custom callback is supplied (default false) data-inset = // whether to inset the textinput (default true) data-target (NEW, class, e.g. data-target="foo") = // where to appended the filter data-itemSelector (NEW, class, e.g. data-itemSelector="foo") = // wrapper(s) containing elements to filter.
This awesome jQuery plugin is developed by frequent. For more Advanced Usages, please check the demo page or visit the official website.