Определение доступности атрибута HTML5 с помощью JavaScript

Сегодня мы посмотрим, как можно организовать проверку доступности атрибута HTML5 с помощью JavaScript. Проверять будем работу элементов details и summary.

HTML

<details>
<summary>W Group Site Navigation</summary>
<a href=#>Aeronautics</a>
<a href=#>Pharma</a>
<a href=#>Railways</a>
<a href=#>Shipping</a>
</details>

Добавляем стили

Применяем стили к элементам summary и details. Для более общего представления для разных браузером начнём с следующих стилей:

summary, details { display: block; }
details { visibility: hidden; }
details > summary { visibility:  visible; }
summary.no-det:before { content: "?"; padding-right: 5px; font-size: 1.2em; }
details[open] summary.no-det:before { content:"?"; }
details[open] { visibility: visible; }

Добавляем стили при доступности элементов

Следующий код написан на jQuery и обычно распологается у закрывающего тега body. Для начала, мы проверяем доступность атрибута open элемента details. Если тест провалится, то к элементу будет прикреплён класс no-det. При клике по элементу summery, будет добавляться атрибут open:

<script>
function supports_details() {
  	if (!('open' in document.createElement('details'))) {
return "no-details"; }
}

if (supports_details() == "no-details" ) {
	$("details").addClass("no-det");
}
$('details.no-det summary').click(function() {
$details = $(this).parent();
	if ($details.attr('open')) {
	$details.removeAttr('open');
	} else {
	$details.attr('open', 'open');
	}
});
</script>

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: http://demosthenes.info/blog/680/Feature-Detection-and-Styling-For-The-HTML5-details-Element
Перевел: Станислав Протасевич
Урок создан: 30 Августа 2016
Просмотров: 14533
Правила перепечатки

5 последних уроков рубрики "HTML5"

  • Расширяем возможности HTML за счёт создания собственных тегов

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

  • HTML5: API работы с вибрацией

    HTML5 - глоток свежего воздуха в современном вебе. Она повлиял не только на классический веб, каким мы знаем его сейчас. HTML5 предоставляет разработчикам ряд API для создания и улучшения сайтов с ориентацией на мобильные устройства. В этой статье мы рассмотрим API для работы с вибрацией.

  • Создание форм с помощью Webix Framework — 4 практических примера

    Веб дизайнеры частенько сталкиваются с необходимостью создания форм. Данная задача не простая, и может вызвать головную боль (особенно если вы делаете что-то не стандартное, к примеру, много-страничную форму). Для упрощения жизни можно воспользоваться фрэймворком. В этой статье я покажу вам несколько практических приёмов для создания форм с помощью фрэймворка Webix.

  • Знакомство с фрэймворком Webix

    В этой статье мы бы хотели познакомить вас с фрэймворком Webix. Для демонстрации возможностей данного инструмента мы создадим интерфейс online аудио плеера. Не обольщайтесь — это всего лишь модель интерфейса. Исходный код доступен в демо и на странице GitHub.

  • Отключение HTML5 валидации

    Бесит валидация, которая добавляется к полям формы, если вы пользуетесь HTML5? Её можно без проблем отключить.

^ Наверх ^