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でまとめてファイルアップロード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

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

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

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

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