jQuery

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

投稿日:

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

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

github.com/patrickkunka/mixitup

Containerをつくる

対象になる要素をつくる

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

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

コントローラをつくる

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

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

CSSを設定する

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

ライブラリを読み込む

実行!

情報

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

-jQuery
-

執筆者:

関連記事

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

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

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

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

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

気になるBackbone.jsのプラグインとTips

  By: Francisco Gonzalez 随時更新中 目次1 気になるBackbone.jsのプラグイン2 チュートリアル3 Tips4 気になるjQueryのプラグイン 気になるB …

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

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