Информационный портал

Информационно-новостной портал

Новости рекламы и маркетинга. Новости Интернета.
Море полезной информации на сайте RetailDepartment.ru
Поделиться ссылкой с друзьями

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

Twitter
Нравится
RedLine

Сегодня мы посмотрим как можно организовать проверку доступности атрибута 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>

Источник: http://feedproxy.google.com/~r/ruseller/CdHX/~3/Lfh7Zu4h1xg/lessons.php

Add comment

Правила добавления комментариев


Security code
Refresh

Download SocComments v1.3