Demano - JQuery Filtering

Filters for JQuery - Demano

by Mike Baranski

HTML

<script src="https://code.jquery.com/jquery-2.2.4.js"></script>
<script src="https://cdn.rawgit.com/mikebski/demano/master/js/main/jquery.demano.js"></script>
<div class="container">
<h3>
Demano Example: https://github.com/mikebski/demano/
</h3>
  <div class="filters">
    <label for="us">
      <input class="filter" type="checkbox" name="us" data-attribute="category" data-value="US" data-group="cats" /> US</label>
    <label for="uk">
      <input class="filter" type="checkbox" name="uk" data-attribute="category" data-value="UK" data-group="cats" /> UK</label>
    &nbsp;||&nbsp;
    <label for="chrome">
      <input class="filter" type="checkbox" name="chrome" data-attribute="browser" data-value="Chrome" data-group="brw" /> Chrome</label>
    <label for="firefox">
      <input class="filter" type="checkbox" name="firefox" data-attribute="browser" data-value="Firefox" data-group="brw" /> Firefox</label>
  </div>

  <div class="items">
    <span data-category="US" data-browser="Chrome" class="filterable">
US - Chrome - DEV
</span>

    <span data-category="US" data-browser="Firefox" class="filterable">
US - Firefox - STG
</span>

    <span data-category="UK" data-browser="Firefox" class="filterable">
UK - Firefox - STG
</span>

    <span data-category="UK" data-browser="Chrome" class="filterable">
UK - Chrome - STG
</span>

  </div>

<hr/>
<div id="filters_text" style='border: 1px solid red'>

</div>
</div>

CSS

.filterable {
  border: 1px solid black;
  margin: 5px;
  padding: 5px;
  margin-bottom: 1em;
}

.off {
  background-color: #F9A39A;
}

.on {
  background-color: #A3F99A;
}

.filters {
  margin: 1em;
}

JavaScript

$(".container").demano({debug_element_id: "filters_text"});