かずおの開発ブログ(主にRuby)

日々の開発のことを色々書きます。

Railsでぺージ内タブを実装する(powerd by BootStrap)

今回はBootstrapを使ってRailsアプリにぺージ内タブを実装します。

Rails内でBootstrapを使うにはtwitter-bootstrap-rails gemを導入しておく必要がありますので、あらかじめこのあたりのぺージを参考に 導入しておいてください。

seyhunak/twitter-bootstrap-rails · GitHub

RailsにTwitter Bootstrapの導入と簡易な使い方 - Rails Webook

htmlを作成

導入できたらhtmlを作成します(別途 application.htmlはある前提です)

"nav nav-tabs"クラス配下がタブリストになっていて、"tab-content"クラス配下が各タブの内容になっています。

"active" クラスが現在選択されているタブです。

tab_sample.html

<div>
  <ul class="nav nav-tabs" role="tablist">
    <li class="active" role="presentation">
      <a aria-controls="tab_a" data-toggle="tab" href="#tab_a" role="tab">A</a>
    </li>
    <li role="presentation">
      <a aria-controls="tab_b" data-toggle="tab" href="#tab_b" role="tab">B</a>
    </li>
    <li role="presentation">
      <a aria-controls="tab_c" data-toggle="tab" href="#tab_c" role="tab">C</a>
    </li>
  </ul>
  <div class="tab-content">
    <div class="tab-pane active" id="tab_a" role="tabpanel">
      <p>
        タブAだよ
      </p>
    </div>
    <div class="tab-pane" id="tab_b" role="tabpanel">
      <p>
        タブBです
      </p>
    </div>
    <div class="tab-pane" id="tab_c" role="tabpanel">
      <p>
        タブC!!
      </p>
    </div>
  </div>
</div>

画面で確認

画面で確認してみます。

f:id:kazuooooo:20160113000435p:plain

Bootstrapっぽい、いい感じなタブになってますね!

思っていたよりも遥かに簡単でした!Bootstrapすごい!

参考: JavaScript · Bootstrap