🔔 Alert..!! Get 2 Month Free Cloud Hosting With $200 Bonus From Digital Ocean ACTIVATE DEAL

A generic filter widget for jQuery Mobile based on the listview filter extension.

jQuery Mobile

Documentation

filterbar - jQuery Mobile filter widget

  • Version: 0.1.3
  • based: JQM 1.4pre (next branch)
  • status: CSS and Qunit missing/need fix, still buggy.

A generic filter widget for jQuery Mobile based on the listview filter extension.

Demo: here

How to use:
Replace the listview.filter.js extension with the filter.js file. 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 (see the demo how to filter <p> tags for example).

Don't forget you can always provide a data-filtertext in case an element does not have a text() for JQM to filter. For example, this should work:

  <div data-filter="true">     <img src="1.jpg" alt="one" data-filtertext="image, one, foo, bar" />     <img src="2.jpg" alt="two" data-filtertext="image, two, baz, bam" />     <img src="3.jpg" alt="three" data-filtertext="image, three, cous, cous" />   </div> 

Changes:

0.1.3

  • added data-mini option.
  • prefixed reveal, placeholder, theme and callback with filter for backwards compatability
  • fixed default Qunit tests, now adding more...

0.1.1 (initial commit)

  • Wrapping <form> is now a wrapping div so filters can be included inside forms.
  • The itemSelector option can be set on multiple datasets, so it is possible to use a single filter for multiple datasets (like filtering a list in a panel and a group of icons in the content section).

Options:
Some options are inherited from the element the filter is declard upon.

The following options can be set:

  • data-filter-theme = theme to style the filter (default a)
  • data-filter-placeholder = text to display as placeholder (default filter items...)
  • data-filter-reveal = whether to use the normal filter or autocomplete (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.
  • data-mini = make the input a mini-input

You May Also Like