Twitter Bootstrapを使ったトグルボタン

Twitter Bootstrapを使ったトグルボタンを紹介したいと思います。

トグルボタン

トグルボタンのサンプルです。青色の「button」がトグルボタンになっています。クリックすることでOn/Offを切り替えられます。

また、「トグル」ボタンをクリックすることでも状態のOn/Offを切り替えることができます。状態がOnかOffかの取得は「状態取得」のボタンをクリックして判断できます。

http://code.rlated.net/bootstrap/bootstrap07-togglebutton.html
http://code.rlated.net/bootstrap/bootstrap07-togglebutton.html
<button type="button" class="btn btn-primary" data-toggle="button">button</button><br>
<a id="toggle" href="#" class="btn btn-mini">トグル</a>
<a id="state" href="#" class="btn btn-mini">状態取得</a>
$(document).ready(function(){
  $('#toggle').click(function(){
    $('button').button('toggle');
  });
  $('#state').click(function(){
    alert($('button').hasClass('active') ? 'on' : 'off');
  });
});

チェックボタンとラジオボタン

もう1つ、トグルボタンを使った「チェックボタン」と「ラジオボタン」のサンプルも紹介したいと思います。

チェックボタン

チェックボタンはボタングループをボタンを何個でもOnにできます。

http://code.rlated.net/bootstrap/bootstrap07-buttongroup.html
http://code.rlated.net/bootstrap/bootstrap07-buttongroup.html
<div class="btn-group" data-toggle="buttons-checkbox">
  <button type="button" class="btn btn-primary">1</button>
  <button type="button" class="btn btn-primary">2</button>
  <button type="button" class="btn btn-primary">3</button>
</div>

ラジオボタン

ラジオボタンはボタングループの中から1つだけOnにできます。

http://code.rlated.net/bootstrap/bootstrap07-buttongroup.html
http://code.rlated.net/bootstrap/bootstrap07-buttongroup.html
<div class="btn-group" data-toggle="buttons-radio">
  <button type="button" class="btn btn-primary">1</button>
  <button type="button" class="btn btn-primary">2</button>
  <button type="button" class="btn btn-primary">3</button>
</div>

サンプル

この記事で紹介したjqPlotのサンプルコードは下記でご覧になれます。
トグルボタン – Bootstrapのトグルボタン
ボタングループ – Bootstrapのトグルボタン

Twitter Bootstrapを使ったドロップダウンメニュー

Twitter Bootstrapを使ったドロップダウンメニューを紹介したいと思います。Twitter Bootstrapは、簡単に綺麗なユーザーインターフェイスを作れるところが魅力的ですね。

シンプルなドロップダウンメニュー

以下のように書くだけでドロップダウンメニューが作成できます。
「dropdown」と表示されるリンクをクリックすることでメニューが表示されるようになります。

http://code.rlated.net/bootstrap/bootstrap06.html
http://code.rlated.net/bootstrap/bootstrap06.html
<div class="dropdown">
  <a class="dropdown-toggle" data-toggle="dropdown" href="#">dropdown</a>
  <ul class="dropdown-menu">
    <li><a tabindex="-1" href="#">aaa</a></li>
    <li><a tabindex="-1" href="#">bbb</a></li>
    <li><a tabindex="-1" href="#">ccc</a></li>
  </ul>
</div>

よく使われるドロップダウンメニューのマークアップ

よく使うマークアップをいくつか紹介します。

セパレーター

メニューの仕切りに使える水平ラインです。
必要な箇所にclass="divider"を追加します。

<li class="divider"></li>

無効なメニュー

class="disabled"で無効なメニューになります。

<li class="disabled"><a href="#">Disabled link</a></li>

サブメニュー

メニューの中に更にメニューを作る場合は、<ul>を入れ子にします。

<li class="dropdown-submenu">
  <a tabindex="-1" href="#">ddd</a>
  <ul class="dropdown-menu">
    <li><a tabindex="-1" href="#">eee</a></li>
    <li><a tabindex="-1" href="#">fff</a></li>
    <li><a tabindex="-1" href="#">ggg</a></li>
  </ul>
</li>

これらをまとめたサンプルです。

http://code.rlated.net/bootstrap/bootstrap06.html
http://code.rlated.net/bootstrap/bootstrap06.html
<div class="dropdown">
  <a class="dropdown-toggle btn btn-primary" data-toggle="dropdown" href="#">dropdown</a>
  <ul class="dropdown-menu">
    <li><a tabindex="-1" href="#">aaa</a></li>
    <li class="disabled"><a tabindex="-1" href="#">bbb</a></li>
    <li><a tabindex="-1" href="#">ccc</a></li>
    <li class="divider"></li>
    <li class="dropdown-submenu">
      <a tabindex="-1" href="#">ddd</a>
      <ul class="dropdown-menu">
        <li><a tabindex="-1" href="#">eee</a></li>
        <li><a tabindex="-1" href="#">fff</a></li>
        <li><a tabindex="-1" href="#">ggg</a></li>
      </ul>
    </li>
  </ul>
</div>