jQuery UI の progressbar プラグインの進捗バーを使った進捗度比較表。
進捗度は視覚化するとわかりやすい。
実装例（サンプル）
| プロジェクト名 | 進捗度 | 進捗バー |
|---|---|---|
| Ａプロジェクト | 40% | |
| Ｂプロジェクト | 90% | |
| Ｃプロジェクト | 60% |
実装例（サンプル）について
- Ａプロジェクトは、value オプションの値に「40」を指定してあるので、バーの40%がグレーになっている。
- Ｂプロジェクトは、value オプションの値に「90」を指定してあるので、バーの90%がグレーになっている。
- Ｃプロジェクトは、value オプションの値に「60」を指定してあるので、バーの60%がグレーになっている。
実装例（サンプル）のソースコード
読み込み
パスは、それぞれ、アップロードした場所を指定する。
まとめて読み込む場合
<link rel="stylesheet" href="themes/base/jquery.ui.all.css" />
<script type="text/javascript" src="jquery-1.4.2.js"></script>
<script type="text/javascript" src="ui/jquery-ui-1.8.12.custom.min.js"></script>
<script type="text/javascript" src="jquery-1.4.2.js"></script>
<script type="text/javascript" src="ui/jquery-ui-1.8.12.custom.min.js"></script>
個別に読み込む場合
<link rel="stylesheet" href="themes/base/jquery.ui.all.css" />
<script type="text/javascript" src="jquery-1.4.2.js"></script>
<script type="text/javascript" src="ui/jquery.ui.core.js"></script>
<script type="text/javascript" src="ui/jquery.ui.widget.js"></script>
<script type="text/javascript" src="ui/jquery.ui.progressbar.js"></script>
<script type="text/javascript" src="jquery-1.4.2.js"></script>
<script type="text/javascript" src="ui/jquery.ui.core.js"></script>
<script type="text/javascript" src="ui/jquery.ui.widget.js"></script>
<script type="text/javascript" src="ui/jquery.ui.progressbar.js"></script>
JavaScript
<script>
<!--
jQuery( function() {
jQuery( '#jquery-ui-progressbar-a' ) . progressbar( {
value: 40
} );
jQuery( '#jquery-ui-progressbar-b' ) . progressbar( {
value: 90
} );
jQuery( '#jquery-ui-progressbar-c' ) . progressbar( {
value: 60
} );
} );
// -->
</script>
<!--
jQuery( function() {
jQuery( '#jquery-ui-progressbar-a' ) . progressbar( {
value: 40
} );
jQuery( '#jquery-ui-progressbar-b' ) . progressbar( {
value: 90
} );
jQuery( '#jquery-ui-progressbar-c' ) . progressbar( {
value: 60
} );
} );
// -->
</script>
CSS
<style>
<!--
#jquery-ui-progressbar-table {
font-size: 13px;
}
#jquery-ui-progressbar-table th , #jquery-ui-progressbar-table td {
border: 1px solid gray;
vertical-align: middle;
color: dimgray;
}
-->
</style>
<!--
#jquery-ui-progressbar-table {
font-size: 13px;
}
#jquery-ui-progressbar-table th , #jquery-ui-progressbar-table td {
border: 1px solid gray;
vertical-align: middle;
color: dimgray;
}
-->
</style>
HTML
<table id="jquery-ui-progressbar-table">
<tr class="ui-widget-header ">
<th style="width: 150px;">プロジェクト名</th>
<th style="width: 100px;">進捗度</th>
<th>進捗バー</th>
</tr>
<tr>
<td>Ａプロジェクト</td>
<td>40%</td>
<td><div id="jquery-ui-progressbar-a"></div></td>
</tr>
<tr>
<td>Ｂプロジェクト</td>
<td>90%</td>
<td><div id="jquery-ui-progressbar-b"></div></td>
</tr>
<tr>
<td>Ｃプロジェクト</td>
<td>60%</td>
<td><div id="jquery-ui-progressbar-c"></div></td>
</tr>
</table>
<tr class="ui-widget-header ">
<th style="width: 150px;">プロジェクト名</th>
<th style="width: 100px;">進捗度</th>
<th>進捗バー</th>
</tr>
<tr>
<td>Ａプロジェクト</td>
<td>40%</td>
<td><div id="jquery-ui-progressbar-a"></div></td>
</tr>
<tr>
<td>Ｂプロジェクト</td>
<td>90%</td>
<td><div id="jquery-ui-progressbar-b"></div></td>
</tr>
<tr>
<td>Ｃプロジェクト</td>
<td>60%</td>
<td><div id="jquery-ui-progressbar-c"></div></td>
</tr>
</table>