Как сделать спойлер на сайте?
Спойлер на сайте предназначен для того, чтобы скрыть слишком большой текст на странице, и дать возможность открыть его при нажатии на некоторую ссылку (заголовок спойлера).
Делают спойлеры, как правило, для удобства пользователей, и чтобы не загромождать страницу большими поясняющими текстами. Кто захочет уточнений, откроет спойлер и прочитает.
Либо же таким образом намеренно скрывается часть текста, которая нежелательна для открытого чтения. Например, на кинофорумах скрывают в спойлер детали сюжета фильма, чтобы не раскрыть его подробностей для тех, кто фильм не смотрел.
Здесь я приведу пример универсального спойлера, который будет работать на любом сайте, даже на обычной html-страничке.
Итак, по порядку. Во-первых, в заголовке страницы перед тэгом
добавить следующие скрипты:Делают спойлеры, как правило, для удобства пользователей, и чтобы не загромождать страницу большими поясняющими текстами. Кто захочет уточнений, откроет спойлер и прочитает.
Либо же таким образом намеренно скрывается часть текста, которая нежелательна для открытого чтения. Например, на кинофорумах скрывают в спойлер детали сюжета фильма, чтобы не раскрыть его подробностей для тех, кто фильм не смотрел.
Здесь я приведу пример универсального спойлера, который будет работать на любом сайте, даже на обычной html-страничке.
Итак, по порядку. Во-первых, в заголовке страницы перед тэгом
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$("div.spoiler div.name span").toggle(function(){
$(this).parent("div.name").parent("div.spoiler").children("div.text").show();
$(this).parent("div.name").parent("div.spoiler").css("backgroundPosition", " -15px 0");
},function(){
$(this).parent("div.name").parent("div.spoiler").children("div.text").hide();
$(this).parent("div.name").parent("div.spoiler").css("backgroundPosition", " 0 -15px");
});
});
</script>
Первый скрипт подключает к сайту библиотеку jQuery. Это нужно делать, если она у вас не подключена.
Второй скрипт отвечает непосредственно за функционирование спойлера.
Во-вторых, само тело спойлера:
<div class="spoiler">
<div class="name">
Заголовок спойлера</div>
<div class="text">
Текст в спойлере</div>
</div>
Этот код нужно поместить туда, где вы хотите разместить спойлер.
Заголовок спойлера - это то, что будет отображаться всегда. При нажатии на заголовок открывается скрытый текст.
Текст в спойлере - это и есть скрытый текст.
В-третьих, необходимо добавить код CCS:
div.spoiler div.text {display: none;}
div.spoiler div.name {text-decoration: underline; color: #2775C7; cursor: pointer;}
div.spoiler div.text {}
Первая строчка кода скрывает текст, написанный в спойлере. Она обязательна!
Вторая и третья строки отвечают за оформление заголовка и скрытого текста соответственно. Здесь можно написать любой код оформления.
В моем примере я оформил заголовок спойлера, как обычную ссылку, т.е. подчеркивание, цвет, и изменение курсора при наведении. Текст в спойлере никак по-особенному не оформлен.
Пожалуй, самый простой способ сделать спойлер на сайте.
Понравился пост? Поделись с друзьями!
Labels
Создание сайтов
Post A Comment
Комментариев нет :