タグ

ブックマーク / on-ze.com (2)

  • 【jQuery】可変グリッド・レイアウトの超有名プラグイン[Masonry]を紹介します。

    ウィンドウサイズに合わせてレイアウトがアニメーションしながら可変する[Masonry]は、言わずと知れた超有名 jQuery プラグインです。 「Masonry」とは直訳すると「石造建築」の意味。レンガ造りの壁をイメージすると、その特性が理解しやすいかもしれません。 ちなみに読み方は「メーソンリー」です。「フリーメーソン」の語源にもなっていますね。 百聞は一見に如かず、というワケで、まずはデモをご覧ください。 jQuery Masonry : サンプル・デモ jQuery Masonryの使い方 まずは jQuery 体のライブラリと jQuery Masonry をダウンロードしてきます。 jQuery Masonry 当然ですが jQuery の体ライブラリがないと動きませんので、Masonry プラグイン単体では意味がありません。 ダウンロードしてきた2つのファイルは head

    【jQuery】可変グリッド・レイアウトの超有名プラグイン[Masonry]を紹介します。
  • 【jQuery】フィルターやソート機能にも対応したMasonry風jQueryプラグイン[Isotope]の使い方。

    グリッドに沿って各要素をタイル状にレイアウトするプラグインで、有名なものでは[jQuery Masonry]が挙げられます。 この分野のjQueryプラグインでは最も知名度が高く、初心者の方でも比較的簡単に導入できるので、使っている方も多いでしょう。 ある程度の知識があればカスタマイズも容易にできるので、個人的にもお勧めできるプラグインです。 唯一の難点といえば、デフォルトでは要素のフィルタリングやソート機能に対応していないこと。 今日紹介する[Isotope]は、超高機能なフィルター機能、ソート機能を兼ね備えた「Masonry風」のプラグインです。 実装サンプル まずはサンプルをご覧ください。 サンプル・デモ:Masonry風プラグイン[jQuery Isotope]の使い方 実はこのプラグイン、弊社オンズのウェブサイトのトップページでも利用しているので、「見覚えのある動きだ」と感じた方

    【jQuery】フィルターやソート機能にも対応したMasonry風jQueryプラグイン[Isotope]の使い方。
  • 1