Menu

Category

Archive

logo


jQuery と Bootstrap で動的なプログレスバー

2013-11-26 00:02:00 +0900
  • このエントリーをはてなブックマークに追加

友達とウェブサイトを作っている中、Bootstrapのプログレスバーの進捗状況を動的に変更したくなったので、jQueryを使って実装してみました。

Bootstrap プログレスバーの用意

まずは、プログレスバーを用意する必要があります。簡単な例が本家のサイトにあるので、そちらも参考にしてください。

1 <div class="container">
2   <span class="label label-default" id="labelRequirement">Units Requirement</span>
3   <div class="progress progress-striped active ">
4     <div class="bar" style="width:0%;"></div>
5   </div>
6 </div>

今回は、アメリカの留学生が1学期に取らなくてはならない最低単位数とユーザーの履修予定のクラスの単位数のパーセンテージをバーに表示します。

jQuery 側の実装

jQuery を使うのはほとんど初めてだったんですが、意外に簡単にできました。

 1 <script><!--
 2     var selectedUnits = 0.0;
 3     $(".thumbnail").click(function(event){
 4         var thisUnits = $(this).data(('units'));
 5         var thisUnitsFloat = parseFloat(thisUnits);
 6  
 7         selectedUnits = thisUnitsFloat + selectedUnits;
 8         console.log("This  Units :" + thisUnitsFloat);
 9         console.log("Total Units :" + selectedUnits);
10  
11         var $bar = $(".bar");
12         // Minimum requirement is 12 units 
13         var percent = Math.round((selectedUnits/12)*100);
14         if(percent > 100) percent = 100;
15         $bar.width(percent + "%");
16         $bar.text(percent + "%");
17  
18     });
19 //--></script>

html側は下記のようになっています。

1 <div class="span4 col-xs-12 col-sm-6 col-md-3 col-lg-4 thumb">
2   <a class="thumbnail" data-units="4.0"><img class="img-responsive" src="http://placehold.it/250x200"></a>
3 </div>

まず、<a>タグに data-units という属性を追加しておき、ユーザーが履修したいクラスをクリックします。それらの情報を元に、あとどの程度の単位数を履修するべきか計算させ、新しいクラスがクリックされるたびに、バーを動的に更新しています。