jQuery

【jQuery】要素をフィルタリングするjQueryプラグインckFilter

August 3, 2018
ckFilter.js

ckFilter.jsは要素をフィルタリングし、複数選択または単一選択で使用できるjQueryプラグイン。

Installation

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="/path/to/jquery.ckFilter.min.js"></script>

Usage

マークアップ

<div id="ckFilter">
  <div class="filter">
    <ul>
      <li class="ckFilter" data-filter="filter-1">Filter-1</li>
      <li class="ckFilter" data-filter="filter-2">Filter-2</li>
    <ul>
  </div>
  <div class="containerObj">
    <div class="ckFilter-obj filter-1"></div>
    <div class="ckFilter-obj filter-2 filter-1"></div>
  </div>
</div>

Via JavaScript

jQueryを使用してターゲット要素を選択

$('#ckFilter').ckFilter();

Options

buttonClass フィルターボタンクラス
filterObj フィルタリングされている要素
animation アニメーション
activeClass アクティブな場合に追加されるクラス
animationTime アニメーションが ‘true’に設定されている場合、時間を設定されます
minWidth アニメーションの場合、最小幅が必要な場合
dataValue データ属性
multiple 複数の選択が必要な場合

Functions

$('#resetButton').ckFilter.reset();
<button id="resetButton">Reset</button>

MIT