Наша шкала будет состоять из внешнего прямоугольника fakeMeter, представляющего общую длину шкалы; внутреннего прямоугольника, который будет называться fill; и текстовой метки для вывода суммы в долларах. Также к элементу будут присоединены стили. После того как новый элемент будет готов, мы заменим тег собственной реализацией.

html5_meter/javascripts/fallback.js

1 if (noMeterSupport()) {

- var fakeMeter, fill, label, labelText, max, meter, value;

- meter = $("#pledge_goal");

- value = meter.attr("value");

5 max = meter.attr("max");

- labelText = "$" + meter.val();

-

- fakeMeter = $("");

- fakeMeter.addClass("meter");

10 label = $("" + labelText + "");

- label.addClass("label");

-

- fill = $("");

- fill.addClass("fill");

15 fill.css("width",(value / max * 100) + "%");

- fill.append("
");

- fakeMeter.append(fill);

- fakeMeter.append(label);

- meter.replaceWith(fakeMeter);

20 }

Если в этом коде что-то покажется вам непонятным, в приложении Б приведен краткий обзор основных возможностей jQuery.

Когда код JavaScript будет готов, можно переходить к стилевому оформлению шкалы.

html5_meter/stylesheets/style.css

.meter{

border: 1px solid #000;

display: block;

position: relative;

width: 280px;

}