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サービスの管理画面なんかで使ってみたい。ダウンロードや詳細は以下からどうぞ。

関連記事

  1. Nex

    JavaScript

    ダイナミックで美しいフルスクリーンのjQueryスライダーを実装できる「Nex」

    Nexはダイナミックで様々なアニメーションエフェクトが用意されたフルス…

  2. Unicorn.js

    JavaScript

    ホバーするとテキストがレインボーに光るjQueryプラグイン「Unicorn.js」

    おもしろいプラグインがあったのでご紹介します。テキストにホバーするとレ…

  3. no-image

    JavaScript

    jQueryの代わりに使用できるマイクロJavaScriptライブラリ「Selector」

    Selectorは、jQueryの代わりに使用することができるマイクロ…

  4. jquery-backToTop

    JavaScript

    カスタマイズ性に優れたトップへ戻るボタンを実装できる「jquery-backToTop」

    jquery-backToTopはカスタマイズ性に優れた「トップへ戻る…

  5. JavaScript

    blur効果で要素を簡単にぼかしてくれるjQueryプラグイン「Foggy」

    FoggyというjQueryプラグインを使ってみました。これを使えば指…

  6. Art Text Light jQuery plugin

    JavaScript

    テキストに光が移動するエフェクトを与えることができる「Art Text Light jQuery p…

    指定したテキストに光が移動するエフェクトを与えることができるjQuer…

コメント

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

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

最近の記事

  1. Anker PowerPort Atom PD 4
  2. USB-2H401BKN
  3. Dyson Pure Cool Me
  4. ルック セレクション

アーカイブ

PAGE TOP