jQuery

軽快なアニメーションでソーティング・フィルタリングできるMixItUpを試してみた

投稿日:

MixItUpは要素をアニメーションでソーティング・フィルタリングするjQueryプラグイン

前に試してみたときは少し重かったけど、バージョン2にアップして軽くなっていた

github.com/patrickkunka/mixitup

Containerをつくる

対象になる要素をつくる

クラスに.mixクラスとフィルタリングのためのカテゴリを指定する

また、data要素でソーティングのオーダーを指定する

コントローラをつくる

ソーティング・フィルタリング操作するコントローラをつくる

クラスを設定して、data要素で指定する

CSSを設定する

id=Conainer配下の.mixクラスは見えないようにしておかないとフィルタリングが作動しない

ライブラリを読み込む

実行!

情報

人によってはGitHubのほうが見やすいかも

-jQuery
-

執筆者:

関連記事

Rails3でajaxでD&Dでまとめてファイルアップロードをスクラッチで~jQueryFileUpload for Rails

参考 Rails3でajaxでD&Dでまとめてファイルアップロード~jQueryFileUpload for Rails Rails3でajaxでD&Dでまとめてファイルアップロード2 …

Bootstrap4に対応したDatepickerを作成する(和暦対応)〜popover,jQuery

By: Joe Lanman – CC BY 2.0 目次1 Datepicker2 popovers3 tableタグでカレンダーを作る4 title部分を作る5 枠table完成6 p …

FullCalendarのagendaViewでselectの場所がずれる問題

  By: Ben Piddington 前回 Rails3.2でGoogle Calendarライクなカレンダーを使う〜fullcalendar-rails   gemは最新の1 …

Rails3.2でみたまま編集 〜hallo editor

  By: Fabio Marini – CC BY 2.0 文字をダブルクリックしてそのままフォーム編集するやつのメモ~in place edit 文字をダブルクリックしてその …

div要素全体をクリッカブルにしてリンクする~CSS

By: James Lee   WordPressのテーマを少しいじった ブロック要素の全体をリンク領域に設定する なにか別のもっと簡単な方法がCSS3であった気もするけど、とりあえず動いて …