JavaScriptの勉強（その3）プログレスバーの表示

JavaScript


プログレスバーを表示するライブラリに、プログレスバー.jsがある。
簡単にプログレスバーを表示できて、描画は非常にきれいだ。しかし、div要素で表示させるので、一つのバーを描画すると改行されてしまう。二つのバーを横に並べられないのだなー。

サンプルを書いてみる。ボタンを押すと値が5ずつ減っていくようにする。

<!--<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
-->
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="ja" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<title> None </title>
<link href1="sample_progress.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="./html5jp/progress.js"></script>
<script type="text/javascript">
(function() {
window.onload = function() {
  var p1 = {
          width: 200,
          height: 16,
          from: 100.0,
          to:   100.0,
          bar_bgc: "green",
          nd: 1,
          animation: 1
  };
  var p2 = {
          width: 200,
          height: 16,
          from: 100.0,
          to:   100.0,
          bar_bgc: "yellow",
          nd: 1,
          animation: 1
  };
  var o1 = new html5jp.progress("sample1", p1);
  var o2 = new html5jp.progress("sample2", p2);
  o1.draw();
  o2.draw();
  document.getElementById("decr").onclick=function() {
    o1.decr(5);
    o2.decr(5);
  };
};
})();
</script>
</head>
<body>
<h1> Test1 </h1>

<div id="sample1"></div>
<h1> Test2 </h1>
<div id="sample2"></div>
<p>
  <button id="decr">-5</button>
</p>
</body>
</html>

実際の画面はこんな感じ。