酒と泪とRubyとRailsと

Ruby on Rails と Objective-C は酒の肴です!

可変グリッドレイアウトjQuery - jquery.vgrid.jsをRailsに組み込んでみた

Eye Catch Image

超有名ブログ「彼女からは、おいちゃんと呼ばれています」の最先端テック記事「Rails3、Twitter Bootstrap、Bootswatch を使ったレスポンシブなエロサイト「babyshark」をリリースしました」に載っていた可変グリッドレイアウト用のjQuery 「jquery.vgrid.js」をRailsに導入手順を作ってみました。

デモサイト


jquery.vgrid.js/jquery.easingのダウンロード

javascriptの読み込み設定

app/assets/javascripts/application.jsに以下の記述があることを確認。ない場合は追加。(通常デフォルトで設定済)

app/assets/javascripts/application.js
1
2
3
4
5
6
// jQueryの読み込みに関する設定
//= require jquery
//= require jquery_ujs

// javascripts配下にあるjsファイルを読み込む設定
//= require_tree .

Gemfileに次のコードがあることを確認(通常デフォルトで設定済)

Gemfile
1
gem 'jquery-rails'

javascript側のコード追加

Javascriptの場合は以下のコードを追加。

.js
1
2
3
4
5
6
7
8
9
10
11
12
$(function(){
    // #container配下のdivがグリットレイアウトで並びます
    $("#container").vgrid({
        easing: "easeOutQuint",
        time: 500,
        delay: 20,
        fadeIn: {
            time: 300,
            delay: 50
        }
    });
});

Coffeescriptの場合は以下のコードを追加

.coffee
1
2
3
4
5
6
7
8
9
10
  # #container配下のdivがグリットレイアウトで並びます
  vg = $("#grid-content").vgrid
    easing: "easeOutQuint"
    useLoadImageEvent: true
    useFontSizeListener: true
    time: 500
    delay: 20
    fadeIn:
      time: 300
      delay: 50

View側のコード追加

erbの場合は以下のコードを追加。

.etb
1
2
3
4
5
6
7
8
9
10
<div id="grid-content">
    <div id="grid-a">
        <h3>AAA</h3>
        <p><img src="http://dummyimage.com/150x120" alt="dummy" /></p>
    </div>
    <div id="grid-b">
        <h3>BBB</h3>
        <p><img src="http://dummyimage.com/150x60" alt="dummy" /></p>
    </div>
</div>

hamlの場合は以下のコードを追加。

.haml
1
2
3
4
5
6
7
8
9
#grid-content
    #grid-a
      %h3 AAA
      %p
        %img{src: "http://dummyimage.com/150x120"}/
    #grid-b
      %h3 BBB
      %p
        %img{src: "http://dummyimage.com/150x60"}/

CSSのコード追加

CSS側のコードを追加します。ここは自由なのでサイトデザインに合わせて調整して下さい。

.css
1
2
3
4
5
6
7
8
  #grid-content div {
    width: 150px;
    height: auto;
    border: 1px solid #bbb;
    background-color: #eee;
    margin: 5px;
    padding: 3px;
  }

動作確認

ブラウザで確認すると以下の様になっていると思います。(divは複数にしています)

fpu_tmp_1354628118.4887_b59e09

もしjquery.vgrid.jsの詳しい機能を知りたい、カスタマイズしたい場合は、jQueryで美しいグリッドレイアウトを実現できる「jquery.vgrid.js」がわかりやすくてオススメです!

Special Thanks

可変グリッドレイアウトのjQueryプラグイン書いたよ

おすすめの書籍