<meter> polyfill (jQuery プラグイン)

横長のグレーのバーの中に、緑色のバーが重なり、ゲージを表しています。

<meter> polyfill は、HTML5 で新たに導入された meter 要素をサポートしていないブラウザーでも meter 要素がレンダリングされるようにする jQuery プラグインです。Chrome や Opera など、すでに meter 要素をサポートしているブラウザーには何も作用しません。このプラグインは、Internet Explorer 6, 7, 8, 9 でも動作します。

ダウンロード

Release Date Size (byte) Download
1.0.0 39,155 jquery_html5jpMeterPolyfill_1_0_0.zip

使い方

JavaScript/CSS
<script src="jquery.min.js"></script>
<script src="jquery.html5jpMeterPolyfill.js"></script>
<script>
$(document).ready(function() {
  $('meter').html5jpMeterPolyfill();
});
</script>
<style>
meter {
  display: inline-block;
  width: 5em;
  height: 1em;
  vertical-align: -0.2em;
}
</style>
HTML
<meter value="20"
  min="0" low="30" high="70" max="100" optimum="100"></meter>
<meter value="50"
  min="0" low="30" high="70" max="100" optimum="100"></meter>
<meter value="75"
  min="0" low="30" high="70" max="100" optimum="100"></meter>
レンダリング

このコードによって、HTML に存在するすべての meter 要素が表示されます。

meter 要素の CSS スタイルのうち、display, width, height, vertical-align プロパティの値を明示的にセットしてください。width, height, vertical-align プロパティの値は変更可能です。

meter 要素の value 属性の値をスクリプトを使って動的に変更する場合には、変更後に jQuery の meter 要素のオブジェクトの html5jpMeterPolyfill() メソッドを再度呼び出してください。

JavaScript/CSS
<script src="jquery.min.js"></script>
<script src="jquery.html5jpMeterPolyfill.js"></script>
<script>
$(document).ready(function() {
  var m = $('#m');
  m.html5jpMeterPolyfill();
  var val = parseFloat(m.attr('value'), 10);
  var max = parseFloat(m.attr('max'), 10);
  var min = parseFloat(m.attr('min'), 10);
  window.setInterval(function() {
    val ++;
    if( val > max ) { val = min; }
    m.attr('value', val);
    m.html5jpMeterPolyfill();
  }, 50);
});
</script>
<style>
meter {
  display: inline-block;
  width: 15em;
  height: 3em;
  vertical-align: -0.2em;
}
</style>
HTML
<meter id="m" value="0"
  min="0" max="100" low="30" high="70" optimum="100"></meter>
レンダリング

バージョンアップ履歴

2012-05-06

  • ver 1.0.0 リリース

著作権・謝辞

著作権

Copyright 2007-2012 HTML5.JP

このJavaScriptライブラリは、MIT ライセンスのもとに配布します。