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

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

トグルボタン

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

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

<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にできます。

<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にできます。

<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のトグルボタン