jQuery Content Filter For Mobile Device - filterbar

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

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>

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.