![]() | Автор: Никита Иванов | 29 мая 2014 12:42 |
Практически на каждом сайте Вы можете увидеть кнопки - Подробнее, Информация, Открыть/Скрыть информацию и подобные им. При нажатии на них плавно раскрывается блок с соответствующей информацией. Как это реализовать?
Достаточно просто. При помощи JS (библиотеки jQuery). Подключим её с сервера Google:
Теперь пример целиком. Чтобы не разбирать его по частям и не путать Вас, прокомментирую все основные моменты прямо в нём.
Не забываем, что в данном примере происходит удалённое подключение jQuery. На локалке без доступа в интернет пример работать не будет.
Смотрим результат работы открытия и скрытия блока на jQuery:
Демонстрация Скачать исходники
По многочисленным просьбам читателей создаю отдельный раздел с примером и файлами для скачивания. Если у Вас несколько блоков-спойлеров, которые нужно плавно открывать и закрывать на jquery, если нужны команды закрыть или открыть всё, то смотрим пример ниже:
Пример собран полностью. Нужно лишь только подключение к Интернету, чтобы с Google-библиотек загрузился jQuery.
Демонстрация Скачать исходники
Спасибо за внимание! Экономьте место и не перегружайте сайт вторичным текстом!)
Достаточно просто. При помощи JS (библиотеки jQuery). Подключим её с сервера Google:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
Теперь пример целиком. Чтобы не разбирать его по частям и не путать Вас, прокомментирую все основные моменты прямо в нём.
<!DOCTYPE html>
<html>
<head>
<!-- Подключаем jQuery -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
<!-- Скрипт плавного открытия и закрытия блока -->
<script type='text/javascript'>
$(document).ready(function() {
$("A#trigger").toggle(function() {
// Отображаем скрытый блок
$("DIV#box").fadeIn(); // fadeIn - плавное появление
return false; // не производить переход по ссылке
},
function() {
// Скрываем блок
$("DIV#box").fadeOut(); // fadeOut - плавное исчезновение
return false; // не производить переход по ссылке
}); // end of toggle()
}); // end of ready()
</script>
</head>
<body>
<a href='#' id='trigger'>Открыть/скрыть информацию</a> <!-- Всё происходит при нажатии на ссылку -->
<div id='box' style='display: none;padding:10px;background-color:#f1f1f1;margin:10px;width:210px;'>Содержимое скрытого блока</div>
</body>
</html>
Не забываем, что в данном примере происходит удалённое подключение jQuery. На локалке без доступа в интернет пример работать не будет.
Смотрим результат работы открытия и скрытия блока на jQuery:
![]() | На будущее: подобное формирование скрытой информации достаточно сильно экономит место на сайте, не делает его информационно перезагруженным и используется почти на всех ресурсах! |
Как создать спойлеры на jquery или несколько блоков открыть/закрыть?
По многочисленным просьбам читателей создаю отдельный раздел с примером и файлами для скачивания. Если у Вас несколько блоков-спойлеров, которые нужно плавно открывать и закрывать на jquery, если нужны команды закрыть или открыть всё, то смотрим пример ниже:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Спойлеры</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.spoiler_links').click(function(){
$(this).parent().children('div.spoiler_body').toggle('normal');
return false;
});
});
</script>
<style type="text/css">
.spoiler_body {display:none;}
.spoiler_links {cursor:pointer;}
</style>
</head>
<body>
<div>
Спойлер №1 <a href="" class="spoiler_links">показать / скрыть</a>
<div class="spoiler_body">
Текст в первом спойлере
Текст в первом спойлере
</div>
</div>
<div>
Спойлер №2 <a href="" class="spoiler_links">показать / скрыть</a>
<div class="spoiler_body">
Текст во втором спойлере
Текст во втором спойлере
</div>
</div>
<input type="button" value="Закрыть все" onclick=$("div[class^='spoiler_body']").hide('normal')>
<input type="button" value="Открыть все" onclick=$("div[class^='spoiler_body']").show('normal')>
</body>
</html>
Пример собран полностью. Нужно лишь только подключение к Интернету, чтобы с Google-библиотек загрузился jQuery.
Спасибо за внимание! Экономьте место и не перегружайте сайт вторичным текстом!)
Как создать кнопку вверх или вертикальное прокручивание страницы на jQuery? Следующая статья
Как распечатать web-страницу с помощью jQuery?
Похожие статьи
16 апреля 2014 17:33 |
![]() |
17 октября 2013 12:57 |
![]() |
21 января 2014 11:15 |
![]() |
19 июня 2014 11:00 |
![]() |
27 ноября 2013 18:55 |
![]() |