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. jquery.horizonScroll.js
  2. AJAX Live Search
  3. Multi-device scrolling menu
  4. jQuery Lighter

    JavaScript

    優雅なフェードで拡大縮小されるLightbox系ギャラリー・jQuery Lighter

    jQuery Lighterは美しいフェードで画像を拡大縮小させること…

  5. jQueryでウィンドウサイズによって処理を変える

    JavaScript

    jQueryで$.inArrayを使えば配列の中に指定した値が何番目に入ってるか知ることができる

    jQueryで配列の中に自分が指定した値が何番目にあるか知りたい場合は…

  6. no-image

    JavaScript

    シンプルでカスタマイズも簡単なパララックスエフェクト実装「parlx.js」

    parlx.jsはシンプルでカスタマイズも簡単なパララックスエフェクト…

コメント

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

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

最近の記事

  1. 椿屋特製アイス珈琲
  2. 有栖川公園
  3. グーディオ オーガニックチョコレート(ミント)
  4. チキンバターマサラとシュリンプバターマサラ
  5. 恵比寿のダ・ミケーレのピザ

アーカイブ

PAGE TOP