jQuery

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

投稿日:

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

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

github.com/patrickkunka/mixitup

Containerをつくる

対象になる要素をつくる

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

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

コントローラをつくる

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

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

CSSを設定する

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

ライブラリを読み込む

実行!

情報

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

-jQuery
-

執筆者:

関連記事

Rails3.2+jQueryUI1.10でjQuery-UI-Bootstrapのデモ画面を出すところまでやった

なにかいつの間にかかっこいい感じのサイトになってた addyosmani.github.com/jquery-ui-bootstrap/ jquery-ui-bootstrap.github.io/j …

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

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

jQueryプラグインでHTML5のデスクトップ通知〜HTML5-Desktop-Notifications

By: Chris Bowman – CC BY 2.0 目次1 デスクトップ通知2 src3 ブラウザの対応を確認4 許可を確認5 許可を求める6 通知を発行7 情報 デスクトップ通知 …

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

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

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

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