Demano是一个简单的jQuery过滤插件，用于过滤带有复选框和HTML的一组元素数据属性。

工作原理：

• 该插件根据检查状态将On或Off CSS类添加到组中匹配或不匹配的项目中
• 然后，您可以使用自己的CSS样式突出显示或隐藏匹配/不匹配的元素。

如何使用它:

1.将CSS类filterable添加到元素中，并使用HTML对其进行分组数据属性：

<div class="items">
  <div data-category="Group 1" class="filterable">
    Group 1 - Chrome
  </div>

  <div data-category="Group 1" class="filterable">
    Group 1 - MS Edge
  </div>

  <div data-category="Group 2" class="filterable">
    Group 2 - Safari
  </div>

  <div data-category="Group 2" class="filterable">
    Group 2 - Firefox
  </div>
</div>

2.创建复选框以筛选元素。

• 数据属性：数据属性名称
• 数据值：数据属性的值
• 数据组：逻辑“或”/“与”滤波器

<div class="filters">
  <input class="filter" type="checkbox" data-attribute="category" data-value="Group 1" data-group="categories" /> Group 1
  <input class="filter" type="checkbox" data-attribute="category" data-value="Group 2" /> Group 2
</div>

3.将函数demano连接到顶部容器。

$("#wrapper").demano({
  // options here
});

4.设计匹配和不匹配元素的样式。

.off {
  background-color: #F9A39A;
}

.on {
  background-color: #A3F99A;
}

5.选项和默认值。

$("#wrapper").demano({

  // CSS class for checkboxes
  filter_class: "filter",

  // CSS class for filterable elements
  filterable_class: "filterable",

  // customize the data attributes here
  attribute_name: "attribute",
  value_name: "value",
  group_name: "group",

  // CSS classes added to matched/unmatched elements
  toggle_class_matched: "on",
  toggle_class_nomatched: "off",

  // output debug info to this element
  debug_element_id: null
  
});

更新日志：

v1.1.4 (2022-06-29)

• 支持空间分离的数据属性

预览截图

带复选框和数据属性 筛选元素 Demano