jquery.square.js

JavaScript

スクエアなグリッドレイアウトを実装できる「jquery.square.js」

jquery.square.jsは、スクエアなグリッドレイアウトを実装することができるjQueryプラグインです。レスポンシブに対応し、いろんなデバイスから最適なレイアウトで閲覧できます。シンプルで美しいグリッドレイアウトを実装したい人は要チェックです。

jquery.square.js

デモ

デモページでは、スクエアなアイテムがグリッドレイアウトで綺麗に並べられています。レスポンシブにも対応していることから、ブラウザ幅を縮小・拡大していくとそれに合わせて最適化されます。

アイテムはほとんどが同じサイズのものが多いですが、いくつか異なるサイズのアイテムも表示されています。異なるサイズでも綺麗なグリッドレイアウトになるように配置されています。

ブログのトップページや企業の新着情報など、応用次第で使いどころはいろいろありそうですね。

<div class="square">
    <div class="inner">
        <h2>サンプルテキスト</h2>
        <p>サンプルテキスト</p>
    </div>
</div>
  • target
  • inner
  • scaleSplit
  • width
  • height
  • space
  • speed
  • duration

デフォルト値は、targetが”square”、innerが”.inner”、scaleSplitが”_”、widthが150、heightが150、spaceが10、speedが700、durationが500です。

jquery.square.js

simpler-sidebarシンプルでスタイリッシュなサイドナビゲーション「simpler-sidebar」前のページ

入力された結果を検索表示するjQueryプラグイン・PHP検索フォーム「AJAX Live Search」次のページAJAX Live Search

関連記事

  1. tsorter

    JavaScript

    テーブルにソート(並べ替え)機能を実装できる「tsorter」

    tsorterは、JavaScriptを用いてHTMLテーブルにソート…

  2. slideSpeed

    JavaScript

    スライドアップ・ダウンを設定された速度で制御できる「slideSpeed」

    slideSpeedは、特定の要素のスライドアップ・スライドダウンを設…

  3. jqueryIntroLoader
  4. SpriteSpin

    JavaScript

    タッチにも対応した360度ビューを実装できるjQueryプラグイン「SpriteSpin」

    SpriteSpinはプロダクトページなどで役立つ、360度ビューを実…

  5. jQuery Star Flashing Effect
  6. okzoom

    JavaScript

    レンズで拡大するように画像の細部をマウスオーバーでズームできる「okzoom」

    okzoomは画像細部をマウスオーバーでズームすることができるjQue…

最近の記事

  1. 蒼龍唐玉堂 特製牛バラ担々麺
  2. サーモンアボカドサラダラップとドリップ
  3. 猿田彦フレンチ
  4. Zarigani Curry 挽肉のカレー ゴーダチーズとピクルスを添えて
  5. ビジネスホテル

アーカイブ

PAGE TOP