jQuery Gridly

JavaScript

クリックしてその場で拡大したりドラッグで配置を入れ替えたりできるプラグイン「jQuery Gridly」

おもしろいjQueryプラグインがあったのでご紹介します。クリックしてその場で拡大したりドラッグで配置を入れ替えたりできるプラグイン「jQuery Gridly」です。その場で削減することも可能です。とても便利ですね。以下は使い方です。

[ads_center]

使い方

使い方

クリックすると以下のように拡大します。再度クリックすると元のサイズに。

jQuery Gridly

使い方は簡単です。jQueryとプラグインを読み込みます。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js" type="text/javascript"></script>
<script src="javascript/jquery.gridly.js" type="text/javascript"></script>
<link href="stylesheets/jquery.gridly.css" rel="stylesheet" type="text/css" />

追加するCSSです。各アイテムを内包している親要素に「position: relative」を追加します。幅や高さは任意のサイズを指定します。smallは小さい時のサイズ、largeは拡大している時のサイズです。

.gridly {
    position: relative;
    width: 960px;
}
.brick.small {
    width: 60px;
    height: 60px;
}
.brick.large{
    width: 120px;
    height: 120px;
}

以下はHTMLです。

<div class="gridly">
    <div class="brick small"></div>
    <div class="brick small"></div>
    <div class="brick large"></div>
    <!-- 以下略 -->
</div>

あとはプラグインをセットするだけ。

<script>
  $('.gridly').gridly();
</script>

特に難しい設定もないので使いやすそうですね。Webサービスの管理画面なんかで使ってみたい。ダウンロードや詳細は以下からどうぞ。

コンパクトデスク扇風機 NPM-1081U持ち運びに便利なAC・USB・乾電池で動作するコンパクトデスク扇風機 NPM-1081U(WH)前のページ

Google Chromeのブックマークバーを表示・非表示に切り替えることができるショートカットキー次のページChromeのブックマークバーの表示・非表示を切り替えるショートカットキー

関連記事

  1. JavaScript

    高さや幅が不揃いの要素をキレイに揃えてくれるjQueryプラグイン「equalize.js」

    高さや幅が不揃いの要素をキレイに揃えてくれるjQueryプラグイン「e…

  2. jQuery contextMenu plugin & polyfill
  3. no-image

    JavaScript

    高さを揃えたレスポンシブな画像ギャラリー「jQuery Mosaic plugin」

    jQuery Mosaic pluginは高さを揃えたレスポンシブな画…

  4. SMINT

    JavaScript

    1ページだけのWebサイトに最適なスクロール移動できるナビゲーションを実装できるjQueryプラグイ…

    1ページだけのWebサイトを作る際にとても役立ちそうですね。ナビゲーシ…

  5. no-image

    JavaScript

    レスポンシブ対応のシンプルなLightboxプラグイン

    レスポンシブに対応したシンプルなLightboxプラグインを紹介します…

  6. jQuery fullsizable

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

最近の記事

  1. SRS-XB43
  2. Nu:kin
  3. フィールグッドシャワー

アーカイブ

PAGE TOP