Bootstrapでプログレスバーの値を自由に制御するレッスン

Bootstrapでプログレスバーを制御する

Bootstrapにはホームページやウェブアプリで使える汎用性の高いさまざまなコンポーネントが用意されています。今日のレッスンでは、進捗率を表すのに有効なプログレスバーをモーダルダイアログと組み合わせた応用を扱いました。

Bootstrapのモーダルダイアログは、ダイアログが起動した瞬間に任意のJavaScriptを実行できるように、イベントハンドラが用意されています。イベントハンドラには、ダイアログを起動したボタンやリンクなどのHTML要素から任意のデータを受け取る仕組みがあるので、クリックしたボタンに応じて別々の内容を1つのダイアログだけで表示することができます。

モーダルダイアログにデータを引き渡す

教材系のウェブアプリで、学習の進捗状況をデータベースから取得してプログレスバーの表示に反映するなど、実用的な使い方ができそうですね。