友達とウェブサイトを作っている中、Bootstrapのプログレスバーの進捗状況を動的に変更したくなったので、jQueryを使って実装してみました。
Bootstrap プログレスバーの用意
まずは、プログレスバーを用意する必要があります。簡単な例が本家のサイトにあるので、そちらも参考にしてください。
1 2 3 4 5 6 | <div class="container"> <span class="label label-default" id="labelRequirement">Units Requirement</span> <div class="progress progress-striped active "> <div class="bar" style="width:0%;"></div> </div> </div> |
今回は、アメリカの留学生が１学期に取らなくてはならない最低単位数とユーザーの履修予定のクラスの単位数のパーセンテージをバーに表示します。
jQuery 側の実装
jQuery を使うのはほとんど初めてだったんですが、意外に簡単にできました。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | <script><!-- var selectedUnits = 0.0; $(".thumbnail").click(function(event){ var thisUnits = $(this).data(('units')); var thisUnitsFloat = parseFloat(thisUnits); selectedUnits = thisUnitsFloat + selectedUnits; console.log("This Units :" + thisUnitsFloat); console.log("Total Units :" + selectedUnits); var $bar = $(".bar"); // Minimum requirement is 12 units var percent = Math.round((selectedUnits/12)*100); if(percent > 100) percent = 100; $bar.width(percent + "%"); $bar.text(percent + "%"); }); //--></script> |
html側は下記のようになっています。
1 2 3 | <div class="span4 col-xs-12 col-sm-6 col-md-3 col-lg-4 thumb"> <a class="thumbnail" data-units="4.0"><img class="img-responsive" src="http://placehold.it/250x200"></a> </div> |
まず、<a>タグに data-units という属性を追加しておき、ユーザーが履修したいクラスをクリックします。それらの情報を元に、あとどの程度の単位数を履修するべきか計算させ、新しいクラスがクリックされるたびに、バーを動的に更新しています。
