jQuery プラグイン MixItUp はアニメーション フィルタリングと sort_jquery を実装します

MixItUp とは何ですか?

MixItUp は、アニメーションによるフィルタリングと並べ替えを提供する jQuery プラグインです。
MixItUp は、ポートフォリオ、ギャラリー、ブログなど、分類または並べ替えられたコンテンツの管理に最適ですが、アプリケーションのユーザー インターフェイスやデータの視覚化に取り組むための強力なツールとしても機能します。
MixItUp は既存の HTML や CSS とうまく連携するため、レスポンシブなレイアウトに最適です。
MixItUp は、絶対位置を使用してレイアウトを制御するのではなく、既存のオンライン フロー レイアウトと連携するように設計されています。パーセンテージ、メディア クエリ、インライン ブロック、さらには曲線ボックスを使用したいですか?問題ない！

ページコード

<div id="Container"> 
  <div class="mix category-1" data-my-order="1"> ... </div> 
  <div class="mix category-1" data-my-order="2"> ... </div> 
  <div class="mix category-2" data-my-order="3"> ... </div> 
  <div class="mix category-2" data-my-order="4"> ... </div> 
</div> 

MixItUp は、混合コンテナ内の要素をクラスとターゲットにします。分類フィルタリングにより、クラスおよび並べ替えプロパティのカスタム データ プロパティが追加されます。

フィルター コントロールを作成します:

class="filter" data-filter=".category-1">Category 1 
class="filter" data-filter=".category-2">Category 2 

フィルタ ボタンをクリックすると、フィルタリングが行われます。

並べ替えコントロールを作成します:

class="sort" data-sort="my-order:asc">Ascending Order 
class="sort" data-sort="my-order:desc">Descending Order 

並べ替えボタンをクリックすると並べ替えが行われます。

CSS

#Container .mix{ 
  display: none; 
} 

アイテムのスタイルで、対象要素に表示属性を持たないように設定します。 MixItUp は、現在のフィルターに一致する要素のみを表示します。

JS

jQuery コンテナを使用した MixItUp の例:

$(function(){ 
  $('#Container').mixItUp();  
}); 

コンテナの ID を使用して、jQuery メソッド .mixItUp() で MixItUp をインスタンス化できます

デモを見る 今すぐダウンロード

以上がこの記事の全内容です。皆さんに気に入っていただければ幸いです。