Bootstrap - Script


概要

プラグインは個別 (個々の *.js ファイル) に含めてもよいし、すべて含まれた bootstrap.min.js ファイルを使用してもよい。

すべての Bootstrap プラグインを JavaScript を書かずに使ってもよい。これが、基本的な利用方法である。つまり、ある状況ではそうしないほうがよいこともある。よって、下のようなコードにより、データ属性 API を無効にするための機能がある。

$(document).off('.data-api')

あるいは、プラグインの名前を含めるとそのプラグインのみを無効にできる。

$(document).off('.alert.data-api')

Bootstrap プラグイン API は JavaScript により使用できる。すべての公開 API は単独でも、チェイン化可能なメソッドでも、コレクションを返す。

$('.btn.danger').button('toggle').addClass('fat')

すべてのメソッドは、オプションのオブジェクトや文字列を受け入れる。

$('#myModal').modal()                      // initialized with defaults
$('#myModal').modal({ keyboard: false })   // initialized with no keyboard
$('#myModal').modal('show')                // initializes and invokes show immediately

各プラグインは、コンストラクタプロパティ $.fn.popover.Constructor を公開している。もし、特定のプラグイン・インスタンスを $('[rel="popover"]').data('popover') とすることで取得できる。

プラグインのコンストラクタの DEFAULTS オブジェクトを変更することにより、デフォルトの設定を変更できる。

$.fn.modal.Constructor.DEFAULTS.keyboard = false // changes default for the modal plugin's `keyboard` option to false

Bootstrap のプラグインは他の UI フレームワークとともに使うことが必要になる場合がある。こうした環境では、名前空間の管理が必要になる。このようなときは、プラグインの .noConflict をコールする。

var bootstrapButton = $.fn.button.noConflict() // return $.fn.button to previously assigned value
$.fn.bootstrapBtn = bootstrapButton            // give $().bootstrapBtn the Bootstrap functionality

Bootstrap はたいていのプラグインで固有動作のカスタムイベントを用意している。一般に、これらは不定詞と過去分詞からなる。つまり、不定詞 (例 show) はイベントの開始で起きる。そして、過去分詞 (例 shown) は動作の完了により起動される。

$('#myModal').on('show.bs.modal', function (e) {
  if (!data) return e.preventDefault() // stops modal from being shown
})

バージョン番号は VERSION により取得できる。

$.fn.tooltip.Constructor.VERSION // => "3.3.5"

 

プラグイン

modal.js

Modal はモーダルダイアログを表示するときに使用する。



ダイアログとボタンのソース

<div class="modal fade" id="myModal">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
        <h4 class="modal-title">Modal title</h4>
      </div>
      <div class="modal-body">
        <p>One fine body…</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<br />
<button type="button" data-toggle="modal" data-target="#myModal" onclick="$('#myModal').modal("show")">Launch modal</button>

メソッド


使用例

$('#myModal').modal({
  keyboard: false
});

イベント


使用例

$('#myModal').on('hidden.bs.modal', function (e) {
  // do something...
})

dropdown.js

DropDown はドロップダウン・メニューを表す。

<div class="dropdown">
  <button id="dLabel" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown trigger
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" aria-labelledby="dLabel">
    <li><a href="#">Item 1</a></li>
    <li><a href="#">Item 2</a></li>
    <li><a href="#">Item 3</a></li>
  </ul>
</div>

メソッド


$('.dropdown-toggle').dropdown();

イベント

$('#myDropdown').on('show.bs.dropdown', function () {
  // do something…
});

tab.js

Tab はタブでコンテンツを切り替えるのに使用する。

Home Pane
Profile Pane
Messages Pane
Settings Pane
<div>
  <!-- Nav tabs -->
  <ul class="nav nav-tabs" role="tablist">
    <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a></li>
    <li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Profile</a></li>
    <li role="presentation"><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">Messages</a></li>
    <li role="presentation"><a href="#settings" aria-controls="settings" role="tab" data-toggle="tab">Settings</a></li>
  </ul>
  <!-- Tab panes -->
  <div class="tab-content">
    <div role="tabpanel" class="tab-pane active" id="home">Home Pane</div>
    <div role="tabpanel" class="tab-pane" id="profile">Profile Pane</div>
    <div role="tabpanel" class="tab-pane" id="messages">Messages Pane</div>
    <div role="tabpanel" class="tab-pane" id="settings">Settings Pane</div>
  </div>
</div>

メソッド


イベント

使用例

$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
  e.target // newly activated tab
  e.relatedTarget // previous active tab
});

tooltip.js

ToolTip はコントロールにカーソルを合わせると表示される小さいテキストである。


<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="left" title="Tooltip on left">Tooltip on left</button>
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="top" title="Tooltip on top">Tooltip on top</button>
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">Tooltip on bottom</button>
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="right" title="Tooltip on right">Tooltip on right</button>

メソッド

使用例

$('#element').tooltip('toggle');

イベント

使用例

$('#myTooltip').on('hidden.bs.tooltip', function () {
  // do something…
});

popover.js

PopOver はいわゆる「吹き出し」である。

<button type="button" class="btn btn-lg btn-danger" data-toggle="popover" data-placement="right" title="Popover の表示" data-content="吹き出しの表示には Click イベントハンドラで .popover('toggle') メソッドを実行する。">Click to toggle popover</button>

イベントハンドラ

$(document).ready(function() {
  // ボタンがクリックされたとき、吹き出しを表示する。
  $("#popover1").click(function() {
    $("#popover1").popover('toggle');
  });
});

alert.js

Alert はアラートを表示する。data-dismiss="alert" 属性を持つボタンを含めると X が右上に表示される。


<div class="alert alert-danger" role="alert">
アラートのサンプル
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
  <span aria-hidden="true">×</span>
</button>
</div>

メソッド


イベント

使用例

$('#myAlert').on('closed.bs.alert', function () {
  // do something…
})

button.js

ボタンにローディング状態を設定するには、data-loading-text="Loading..." を追加する。
(注意) 下のサンプルはビジネスロジック部分がないので瞬時にステートが終わり、見た目上は動作しないように見える。

<button type="button" id="myButton" data-loading-text="Loading..." class="btn btn-default" autocomplete="off">
  Loading state
</button>

<script>
  $('#myButton').on('click', function () {
    var $btn = $(this).button('loading')
    // ビジネスロジック
    //  ...
    $btn.button('reset')
  })
</script>

data-toggle="button" を設定すると、オン/オフ状態を持つトグルボタンになる。

<button type="button" class="btn btn-default" data-toggle="button" aria-pressed="false" autocomplete="off">
  Single toggle
</button>

data-toggle="buttons" を チェックボックスやラジオボタンを含む .btn-group に設定すると、トグル動作が有効になる。


<div class="btn-group" data-toggle="buttons">
  <label class="btn btn-default active">
    <input type="checkbox" autocomplete="off" checked> Checkbox 1 (pre-checked)
  </label>
  <label class="btn btn-default">
    <input type="checkbox" autocomplete="off"> Checkbox 2
  </label>
  <label class="btn btn-default">
    <input type="checkbox" autocomplete="off"> Checkbox 3
  </label>
</div>

ラジオボタンの場合

<div class="btn-group" data-toggle="buttons">
  <label class="btn btn-default active">
    <input type="radio" name="options" id="option1" autocomplete="off" checked> Radio 1 (preselected)
  </label>
  <label class="btn btn-default">
    <input type="radio" name="options" id="option2" autocomplete="off"> Radio 2
  </label>
  <label class="btn btn-default">
    <input type="radio" name="options" id="option3" autocomplete="off"> Radio 3
  </label>
</div>

メソッド


ボタン文字列を交換するサンプル

<script>
  $('#myStateButton').on('click', function () {
    $(this).button('complete') // button text will be "finished!"
  })
</script>

collapse.js

collapse.js はボタンをクリックすると表示される領域をトグル動作で表示/非表示する。

...

<a class="btn btn-default" role="button" data-toggle="collapse" href="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
  Link with href
</a>
<button class="btn btn-default" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
  Button with data-target
</button>
<div class="collapse" id="collapseExample">
  <div class="well">
    ...
  </div>
</div>

メソッド

使用例

$('#myCollapsible').collapse({
  toggle: false
});

イベント

使用例

$('#myCollapsible').on('hidden.bs.collapse', function () {
  // do something…
});

carousel.js

Carousel は画像などを自動でスライド表示するときに使用する。


<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
  <!-- Indicators -->
  <ol class="carousel-indicators">
    <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
    <li data-target="#carousel-example-generic" data-slide-to="1"></li>
    <li data-target="#carousel-example-generic" data-slide-to="2"></li>
  </ol>

  <!-- Wrapper for slides -->
  <div class="carousel-inner" role="listbox">
    <div class="item active">
      <img src="1CS.jpg" alt="1CS" />
      <div class="carousel-caption">
        Picture 1
      </div>
    </div>
    <div class="item">
      <img src="2CS.jpg" alt="2CS" />
      <div class="carousel-caption">
        Picture 1
      </div>
    </div>
    <div class="item">
      <img src="3CS.jpg" alt="3CS" />
      <div class="carousel-caption">
        Picture 3
      </div>
    </div>
  </div>
  <!-- Controls -->
  <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

メソッド

使用例

$('.carousel').carousel({
  interval: 2000
});

イベント

使用例

$('#myCarousel').on('slide.bs.carousel', function () {
  // do something…
});