Наша шкала будет состоять из внешнего прямоугольника fakeMeter, представляющего общую длину шкалы; внутреннего прямоугольника, который будет называться fill; и текстовой метки для вывода суммы в долларах. Также к элементу будут присоединены стили. После того как новый элемент будет готов, мы заменим тег <meter> собственной реализацией.
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 = $("<div></div>");
- fakeMeter.addClass("meter");
10 label = $("<span>" + labelText + "</span>");
- label.addClass("label");
-
- fill = $("<div></div>");
- fill.addClass("fill");
15 fill.css("width",(value / max * 100) + "%");
- fill.append("<div style='clear:both;'><br></div>");
- 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;
}
Кіру не тіркелу пікір қалдыру үшін