HTML5 & lt; meter & gt; ярлык

HTML5 & lt; meter & gt; ярлык

В моем руководстве «Различия в HTML4 и HTML5» я упоминаю тег meter>, говоря, что он не имеет встроенного визуального представления в браузерах. После быстрой проверки оказалось, что я ошибался, и большинство браузеров уже представляют этот тег в виде прямоугольника, заполненного до определенного уровня. В этом руководстве я дам несколько рекомендаций о том, как правильно использовать этот тег и как убедиться, что он будет правильно отображаться и в старых браузерах..

Начальная настройка

Начнем со структуры очень простой страницы, содержащей тег счетчика:

!DOCTYPE html>
html>
голова>
мета-кодировка = "utf-8" />
заголовок> метка счетчика / заголовок>
ссылка rel = "stylesheet" type = "text / css" href = "style.css">
script type = "text / javascript" src = "jquery-1.8.3.min.js"> / script>
тип скрипта = "text / javascript" src = "func.js"> / script>
/ голова>
тело>
h1> Что такое 3/10: / h1>
идентификатор счетчика = "прогресс" мин = "0" макс = "100" значение = "30" title = "проценты"> 30% / метр>
/ body>
/ html>

Стандартный HTML5 Doctype, кодировка UTF-8, заголовок, файл stely.css, который мы добавим через некоторое время, включение jQuery 1.8.3 и файла func.js, который мы также добавим позже.

В теле у нас есть название и счетчик. Мы установили атрибуты id, min, max, value и title на счетчике. min и max вы можете догадаться, что они показывают минимальное и максимальное значение нашего счетчика соответственно. Чаще всего минимальное значение равно 0, но в особых случаях оно может быть другим. Например, минимальный балл в школе — 2. Однако важно то, что эти минимальный и максимальный баллы являются числами..

value выражает текущее значение и наш счетчик будет там заполнен.

в названии упоминается единица измерения.

Давайте теперь добавим на страницу несколько основных стилей:

@charset "utf-8";
* {маржа: 0; отступ: 0; } html, body {width: 100%; высота: 100%; }
тело {фон: # E0E0E0; цвет: # 000; шрифт: обычный 12px Arial, Helvetica, без засечек; }
h1 {padding-top: 30 пикселей; } h1, #progress {размер шрифта: 250%; выравнивание текста: центр; } #progress {display: block; ширина: 400 пикселей; высота: 30 пикселей; маржа: 20 пикселей автоматически 30 пикселей; граница: 1px solid # B0B0B0; }

Читать также:  Настроить вебпакет

Первоначальный результат

Вот что у нас есть на данный момент с самыми популярными браузерами:

HTML5 & lt; meter & gt; ярлык

Как видите, Chrome, Firefox и Opera поддерживают предварительный просмотр тегов. Даже зеленый цвет заливки практически такой же (светлее только Opera). Разница в том, что Chrome и Firefox также добавляют светлые тени..

Проблема в том, что с Internet Explorer (даже версии 10) и Safari все выглядит не так хорошо. Чтобы наш счетчик выглядел терпимым, нам нужно использовать небольшой JavaScript, чтобы сделать несколько

Манипуляции с DOM

Идея здесь такая: сделать один контейнер div на весь счетчик, содержащий внутри другой div, который будет отвечать за заполнение..

Однако мы также должны добавить в наши стили следующие строки:

#progress {позиция: относительная; } #progress .value {ширина: 0; высота: 100%; маржа: 0 авто 0 0; фон: # 90BE29; }

Мы устанавливаем margin: 0 auto 0 0;, потому что в IE7 div.value центрируется в родительском контейнере с равными полями слева и справа..

Примечание: хотя в этом случае мы используем теги DIV, рассматриваемые изменения могут быть внесены с другими (например, span), в случае, если ваш счетчик размещен во встроенном элементе..

Вот код JavaScript, который мы добавим, и ниже приведены пояснения:

var newTags = [‘метр’];
для (var t в newTags) {document.createElement (newTags [t]); }
jQuery (function ($) {//! document.createElement (‘meter’). hasOwnProperty (‘min’) — не работает в Firefox if (document.createElement (‘meter’) [‘min’] == undefined) { $ (‘meter’). each (function) (var divMeter = $ (‘div id = "’ + $ (this) .attr) (‘id’) + ‘"> div class = "value"> / div> / div> ‘);
var value = ($ (this) .attr (‘значение’) — $ (this) .attr (‘min’)) / ($ (this) .attr (‘max’) — $ (this) .attr (‘ min ‘));
divMeter.find (‘. значение’). css (‘ширина’, значение * 100 + ‘%’);
$ (это) .replaceWith (divMeter); }); }});

Читать также:  DISC категоризация людей в зависимости от того как они работают

В массиве newTags мы записываем список всех тегов HTML5, которые мы используем, чтобы добавить их поддержку в IE7 / 8. В общем, вам может понадобиться часть кода для добавления всех тегов HTML5, но для упрощения примера я добавил только счетчик..

Мы продолжаем работу с функцией, которая работает на DOMContentLoaded. В этой функции мы сначала проверяем, поддерживает ли текущий браузер тег счетчика. Мы можем выполнить аналогичную проверку для каждого тега, создав новый экземпляр программно из JavaScript следующим образом:

var meter = document.createElement (‘метр’);

Вместо "счетчика" можно использовать название любого другого тега..

После того, как мы создали новый экземпляр, мы можем проверить, поддерживает ли этот новый объект специфические для него свойства. Поскольку тег meter поддерживает атрибут min, мы можем проверить, есть ли у него свойство min как элемент DOM, следующим образом:

var meter = document.createElement (‘метр’); var missingsSupport =! meter.hasOwnProperty (‘мин’);

Однако при тестировании этого метода у меня возникли проблемы с Firefox, поэтому я прокомментировал эту проверку и попробовал другой способ:

var missingsSupport = document.createElement (‘meter’) [‘min’] == undefined;

Здесь мы снова создаем новый экземпляр, но напрямую берем его свойство min и сравниваем его с неопределенной переменной undefined..

неопределенный

Этот момент с неопределенной переменной немного тонок, но вы можете найти его во многих местах, поэтому вот несколько слов по этому поводу:

В одном из первых руководств по JavaScript мы говорили о переменных, имеющих тип. Доступ к этому типу можно получить с помощью typeof (varName). Если мы попытаемся взять тип переменной, которая не определена, результатом функции typeof () будет undefined. Я намеренно цитирую результат, тем самым подчеркивая, что сам результат является строкой, но ее значение «undefined»..

Читать также:  Глубокие ссылки Часть 1

В JavaScript нет неопределенного слова, поэтому мы можем создать такую ​​переменную. С другой стороны, если бы мы не создавали его, а пытались получить доступ к типу через typeof (), то мы получили бы результат undefined.

В приведенном выше примере мы можем использовать:

var missingsSupport = typeof (document.createElement (‘meter’) [‘min’]) == ‘undefined’;

но мы выбрали более короткую версию, чтобы пропустить typeof и проверить, отсутствует ли это свойство (min), поскольку нет определения для переменной undefined.

Однако эта короткая версия не сработает, если кто-то решит пошутить и предположит, что он создал неопределенную переменную. Имейте в виду, что если кто-то попытается, он может сломать эту короткую версию..

Привод счетчика IE

Вернемся к счетчику сейчас.

После того, как мы проверили, поддерживает ли браузер функциональность этого тега, мы выполняем короткую замену во всех местах, где тег встречается в разметке..

Мы создаем наш контейнер с вложенным div, чтобы выразить значение, присваивая ему идентификатор, который совпадает с идентификатором заменяемого счетчика:

var divMeter = $ (‘div id = "’ + $ (this) .attr (‘id’) + ‘"> div class = "value"> / div> / div>’);

Затем мы вычисляем значение метра в процентах и ​​используем эти проценты для изменения ширины заливки div.value.

var value = ($ (this) .attr (‘значение’) — $ (this) .attr (‘min’)) / ($ (this) .attr (‘max’) — $ (this) .attr (‘ min ‘));
divMeter.find (‘. значение’). css (‘ширина’, значение * 100 + ‘%’);

Наконец, мы просто заменяем разметку счетчика той, которую мы подготовили в переменной divMeter:

$ (это) .replaceWith (divMeter);

Вы можете увидеть финальную версию на https://magadanski.com/demo/meter/

Если вы хотите, чтобы счетчик выглядел одинаково во всех браузерах, вы можете удалить проверку поддержки тегов и запустить JavaScript для всех браузеров, так что только стили, которые вы добавили для дополнительных тегов, будут играть роль..

Понравилась статья? Поделиться с друзьями:
Что нужно знать пользователю?