Submit your widget

Data-based DOM element filtering via tags with jQuery

Created 3 years ago   Views 7984   downloads 1490    Author wch
Data-based DOM element filtering via tags with jQuery
View DemoDownload 131.7 KB
20
Share |

Tagsort provides dynamic tag-based element filtering using data attributes to produce tags for a specified set of elements and append those sort tags to the tagsort element .tagSort({options...}) is called on. Tagsort has two filtering options, inclusive and exclusive. Inclusive means that when multiple tags are active, all elements that contain ANY of those tags will be shown. Whileexclusive means that when multiple tags are active, only elements that containALL of those tags will be shown.

Basic Usage

Tagsort uses a user-defined data-attribute containing a comma-separated list of tags for the element. The data attribute used isdata-item-tags="" and must be added to each element with the selector passed to tagsort as an option.

At its simplest:

HTML

<div class="tagsort-tags-container"></div>

<div class="item-to-tag" data-item-tags="tag1,tag3,tag4">Lorem</div>
<div class="item-to-tag" data-item-tags="tag2,tag3,tag4">Ipsum</div>
<div class="item-to-tag" data-item-tags="tag1,tag2">Dolor</div>
<div class="item-to-tag" data-item-tags="tag1,tag2,tag4">Sit</div>
<div class="item-to-tag" data-item-tags="tag3,tag4">Amet</div>

JavaScript

$('div.tagsort-tags-container').tagSort({
  selector:'.item-to-tag'
});

With every option:

HTML

<div class="tagsort-tags-container"></div>

<div class="item-to-tag" data-item-tags="tag1,tag3,tag4">Lorem</div>
<div class="item-to-tag" data-item-tags="tag2,tag3,tag4">Ipsum</div>
<div class="item-to-tag" data-item-tags="tag1,tag2">Dolor</div>
<div class="item-to-tag" data-item-tags="tag1,tag2,tag4">Sit</div>
<div class="item-to-tag" data-item-tags="tag3,tag4">Amet</div>

Read more:http://wch.io/projects/tagsort/