Создание раздела с дополнительной информацией
Элемент details создает раздел документа, который пользователь может открыть и расширить, чтобы получить более подробную информацию по данной теме. В таблице 10-12 представлен элемент details.
Таблица 10-12: Элемент details| Элемент | details |
| Тип элемента | Потоковый |
| Разрешенные родительские элементы | Любой элемент, который может содержать потоковые элементы |
| Локальные атрибуты | open |
| Содержание | Элемент summary (опционально) и потоковый контент |
| Стиль тегов | Открывающий и закрывающий теги |
| Новый в HTML5 | Да |
| Изменения в HTML5 | N/A |
| Соглашение по стилям | details { display: block; } |
Элемент details обычно содержит элемент summary, который создает ярлык или название для раздела с дополнительной информацией. В таблице 10-13 представлен элемент summary.
Таблица 10-13: Элемент summary| Элемент | summary |
| Тип элемента | N/A |
| Разрешенные родительские элементы | Элемент details |
| Локальные атрибуты | Нет |
| Содержание | Фразовый контент |
| Стиль тегов | Открывающий и закрывающий теги |
| Новый в HTML5 | Да |
| Изменения в HTML5 | N/A |
| Соглашение по стилям | summary { display: block; } |
В листинге 10-10 показано, как используются оба элемента details и summary.
Листинг 10-10: Использование элементовsummaryиdetails
<!DOCTYPE HTML>
<html>
<head>
<title>Example</title>
<meta name="author" content="Adam Freeman" />
<meta name="description" content="A simple example" />
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
<style>
h1, h2, h3, article > footer {
background: grey;
color: white;
}
hgroup > h1 {
margin-bottom: 0;
margin-top: 0;
}
hgroup > h2 {
background: grey;
color: white;
font-size: 1em;
margin-top: 0px;
margin-bottom: 2px;
}
body > header *, body > footer * {
background: transparent;
color: black;
}
body > article > section,
body > article > section > section {
margin-left: 10px;
}
body > header {
border: medium solid black;
padding-left: 5px;
margin: 10px 0 10px 0;
}
article {
border: thin black solid;
padding: 10px;
margin-bottom: 5px;
}
details {
border: solid thin black;
padding: 5px;
}
details > summary {
font-weight: bold;
}
</style>
</head>
<body>
<header>
<hgroup>
<h1>Things I like</h1>
<h2>by Adam Freeman</h2>
</hgroup>
</header>
<article>
<header>
<hgroup>
<h1 id="activitiesilike">Activities I like</h1>
<h2>It hurts, but I keep doing it</h2>
</hgroup>
</header>
<section>
<p>
I like to swim, cycle and run. I am in training for my first
triathlon, but it is hard work.
</p>
<details>
<summary>Kinds of Triathlon</summary>
There are different kinds of triathlon - sprint, Olympic and so on.
I am aiming for Olympic, which consists of the following:
<ol>
<li>1.5km swim</li>
<li>40km cycle</li>
<li>10km run</li>
</ol>
</details>
</section>
</article>
</body>
</html>
Вы можете увидеть, как браузер отображает эти элементы, на рисунке 10-13. Не все браузеры поддерживают должным образом элемент details. Например, у IE9 есть с этим сложности.
Рисунок 10-13: Использование элементовsummaryиdetails
Как вы видите по рисунку, браузер предоставляет своеобразную панель управления интерфейсом, которая при активации открывается и отображает содержимое элемента details. Если элемент details закрыт, тогда видно только содержание элемента summary. Если вы хотите, чтобы элемент details был открыт, когда страница отображается в первый раз, нужно применить атрибут open.
