27 сентября 2013 г.

Как сделать спойлер на сайте?

Спойлер на сайте предназначен для того, чтобы скрыть слишком большой текст на странице, и дать возможность открыть его при нажатии на некоторую ссылку (заголовок спойлера).

Делают спойлеры, как правило, для удобства пользователей, и чтобы не загромождать страницу большими поясняющими текстами. Кто захочет уточнений, откроет спойлер и прочитает.

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

Здесь я приведу пример универсального спойлера, который будет работать на любом сайте, даже на обычной 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 {}

Первая строчка кода скрывает текст, написанный в спойлере. Она обязательна!

Вторая и третья строки отвечают за оформление заголовка и скрытого текста соответственно. Здесь можно написать любой код оформления.

В моем примере я оформил заголовок спойлера, как обычную ссылку, т.е. подчеркивание, цвет, и изменение курсора при наведении. Текст в спойлере никак по-особенному не оформлен.

Пожалуй, самый простой способ сделать спойлер на сайте.
Понравился пост? Поделись с друзьями!

И смотри дальше:

0 коммент. :

Отправить комментарий