Bootstrapのモーダルダイアログやプログレスバーを使ってユーザーにやさしいWebアプリにしよう

業務Webアプリケーションエンジニアのための「Bootstrap」入門 第6回

ドロップダウン

　モバイル端末などの画面が小さいデバイスの場合は、多くの情報を一度に表示すると、分かりにくくなります。そのため、必要に応じて情報が表示されると便利です。ここでは、タップ／クリックするとドロップダウンするコントロールの説明をします。

基本のドロップダウン

　ドロップダウンを作成するには、div要素のclass属性に"dropdown"を指定します。ドロップダウンでは、div要素にボタンとタップ／クリックしたときに表示されるリストをそれぞれ作成します。ボタンは、button要素のclass属性に"btn"と"dropdown-toggle"を指定し、data-toggle属性を"dropdown"に指定します。これで、ボタンをクリックまたはタップしたときに自動的にドロップダウンが有効になります。

　ドロップダウンメニューであることが分かるように「▼」を表示するには、span要素のclass属性に"caret"を指定します。

　ドロップダウンしたときに表示されるメニューは、ul要素のclass属性に"dropdown-menu"を指定したリストに設定します。

リスト3　ドロップダウン（dropdown1.htmlの抜粋）

<div class="dropdown">
    <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">
        アカウント管理<span class="caret"></span>
    </button>

    <ul class="dropdown-menu">
        <li><a href="#">アカウント新規登録</a></li>
        <li><a href="#">アカウント変更</a></li>
        <li><a href="#">アカウント削除</a></li>
    </ul>
</div>

基本のドロップダウン

ヘッダ付きのドロップダウン

　業務アプリでは、ドロップダウンに含めるアイテムに階層をつけたい場合もあります。その場合は、ドロップダウンのアイテムにヘッダ情報をつけます。

　ヘッダ情報は、ul要素内のli要素のclass属性に"dropdown-header"を指定します。ドロップダウンに区切り線を入れるときは、li要素のclass属性に"divider"を指定します。

リスト4　ヘッダ付きのドロップダウン（dropdown2.htmlの抜粋）

<div class="dropdown">
    <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">
        アカウント管理<span class="caret"></span>
    </button>
    <ul class="dropdown-menu">
        <li class="dropdown-header">個別登録</li>
        <li><a href="#">アカウント新規登録</a></li>
        <li><a href="#">アカウント変更</a></li>
        <li><a href="#">アカウント削除</a></li>
        <li class="divider"></li>
        <li class="dropdown-header">一括登録</li>
        <li><a href="#">csv一括登録</a></li>
        <li><a href="#">csv一括削除</a></li>
    </ul>
</div>

ヘッダ付きのドロップダウン

プログレスバー

　業務アプリケーションのなかで、データベースのデータを検索して情報を表示したり、ネットワーク上の他サーバから情報を取得したりする場合などは処理に時間がかかることがあります。ここではアプリケーションが処理待ち状態のとき、進捗をユーザに知らせるためのプログレスバーについて説明します。

基本のプログレスバー

　プログレスバーを表示するときは、div要素に"progress"を指定します。プログレスバーの各値は以下の属性に指定します。幅はstyle属性にします。たとえば、次のサンプルは0～100までのプログレスバーで進捗が70%のときの例です。

プログレスバーの属性

値	属性
現在の値	aria-valuenow
最小値	aria-valuemin
最大値	aria-valuemax

リスト5　画像（progressbars1.htmlの抜粋）

<div class="progress">
    <div class="progress-bar" aria-valuenow="70"
        aria-valuemin="0" aria-valuemax="100" style="width:70%">
        70%
    </div>
</div>

画像

　プログレスバーのスタイルを変えるにはclass属性に以下の属性を指定します。

プログレスバーのスタイル

用途	class属性の指定	色
成功	progress-bar-success	緑
情報	progress-bar-info	水色
注意	progress-bar-warning	オレンジ
警告	progress-bar-danger	赤

リスト6　プログレスバーのスタイル（progressbars1.htmlの抜粋）

<div class="progress">
    <div class="progress-bar progress-bar-success" >～中略</div>
</div>
<div class="progress">
    <div class="progress-bar progress-bar-info" >～中略</div>
</div>
<div class="progress">
    <div class="progress-bar progress-bar-warning" >～中略</div>
</div>
<div class="progress">
    <div class="progress-bar progress-bar-danger" >～中略</div>
</div>

プログレスバーのスタイル

　プログレスバーの画像をストライプにすることもできます。ストライプにするには、class属性に”progress-bar-striped”を指定します。さらに”active”を指定するとストライプ部分がアニメーションで回転します。

ストライプのプログレスバー

積み上げプログレスバー

　ユーザの1つの操作で、複数の処理が実行されるときは1つのプログレスバーに複数の進捗を積み上げることができます。たとえば、次のサンプルでは35％と20％と10％の進捗を表示した例です。

リスト7　積み上げプログレスバー(progressbars2.htmlの抜粋)

<div class="progress">
  <div class="progress-bar progress-bar-success" style="width: 35%"
  </div>
  <div class="progress-bar progress-bar-warning" style="width: 20%"
  </div>
  <div class="progress-bar progress-bar-danger" style="width: 10%">
  </div>
</div>

積み上げプログレスバー