jQuery

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

投稿日:

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

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

github.com/patrickkunka/mixitup

Containerをつくる

対象になる要素をつくる

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

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

コントローラをつくる

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

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

CSSを設定する

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

ライブラリを読み込む

実行!

情報

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

-jQuery
-

執筆者:

関連記事

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

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

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

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

Rails3.2でGoogle Calendarライクなカレンダーを使う〜fullcalendar-rails

目次1  fullcalendar-rails2 Hello fullcalendar3 オプション  fullcalendar-rails 2種類あるけど上の方を使った github.com/bok

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

  前提 Rails3でajaxでD&Dでまとめてファイルアップロード~jQueryFileUpload for Rails Ruby on Rails 3.2でファイルアップロード …

Rails3.2でFacebook風インターフェイスでタグづけ〜acts-as-taggable-on+jquery.tokenInput

By: Mauquoy Token Company – CC BY 2.0 railscasts.com/episodes/258-token-fields?language=ja&#03