От автора: Довольно часто на страницах сайта возникает потребность в так называемом спойлере. Спойлер — это блок, который можно скрывать и вновь показывать. Довольно часто Вы можете увидеть его в новостных блоках, где изначально показан краткий текст новости, а полный текст скрыт и показывается по желанию читателя. Подобный спойлер мы с Вами уже делали в уроке "Как сделать FAQ на сайте с использованием PHP-MySQL-jQuery".
Эффект появления/скрытия спойлера хоть и привлекателен, но уже довольно обыден.
Этот момент можно исправить при помощи библиотеки jQuery User Interface (jQuery UI), предоставляющей готовые потрясающие эффекты jquery.
Для работы нам понадобится, прежде всего, обычная страница HTML и библиотека jQuery. Это нужно для того, чтобы для начала написать простейший спойлер, использующий методы jQuery (например, show(), hide(), slideDown() или slideUp()).
Скачаем последнюю библиотеку с офсайта (на момент записи урока это версия 1.7) и подключим ее к нашему документу:
|
1 |
<script type="text/javascript" src="jquery-1.7.min.js"></script> |
Теперь напишем простейший спойлер. Нам понадобится 2 блока, первый из которых будет объектом для показа/скрытия второго. Подробно на этих вещах я не останавливаюсь, поскольку все это уже объяснял в уроке "Как сделать FAQ на сайте с использованием PHP-MySQL-jQuery".
Итак, код:
|
1 2 3 4 5 6 7 8 9 10 |
<div class="c"> <div id="s">Показать</div> <div id="t"> <p>Это скрытый текст</p> <p>Это скрытый текст</p> <p>Это скрытый текст</p> <p>Это скрытый текст</p> <p>Это скрытый текст</p> </div> </div> |
Здесь мы сделали 3 блока, где блок с классом "с" центрируется в документе. Напишем для них стили:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
<style type="text/css"> .c{ width:250px; height:400px; position:absolute; top:50%; left:50%; margin:-200px 0 0 -125px; } #s{ width:200px; border:1px solid #ccc; margin-bottom:5px; padding:5px; cursor:pointer; } #t{ width:200px; border:1px solid #ccc; padding:5px; display:none; } </style> |
Поскольку блок спойлера изначально скрыт, мы задали этому блоку свойство "display:none".
Следующим шагом будет создание переключателя toggle(), который по нечетным кликам по блоку с id "s" будет раскрывать спойлер, а по четным кликам — скрывать его:
|
1 2 3 4 5 6 7 8 9 10 11 |
<script type="text/javascript"> $(document).ready(function(){ $('#s').toggle(function(){ $('#t').show(500); $('#s').text('Свернуть'); }, function(){ $('#t').hide(500); $('#s').text('Показать'); }); }); </script> |
Отлично!
Мы добились стандартного эффекта для спойлера. Теперь давайте придадим этим эффектам оригинальности. Здесь нам уже потребуется библиотека jQuery UI. Документацию с примерами Вы можете найти по ссылке //jqueryui.com/
Мы остановимся на двух эффектах (один для показа, второй для скрытия), которые мне понравились — это эффекты "slide" и "explode". Для их использования потребуется скачать библиотеку jQuery UI с нужными компонентами. В частности, нам потребуется само ядро UI (рис. 1):
и ядро эффектов с нужными эффектами (рис. 2):
Все это можно получить в разделе Download.
В полученном архиве в папке js находим нужную библиотеку и подключаем ее к нашему документу:
|
1 |
<script type="text/javascript" src="jquery-ui-1.8.16.custom.min.js"></script> |
Все, что осталось — это вызвать метод effect(), именно он отвечает за все эффекты используемой библиотеки. Данный метод имеет несколько параметров:
|
1 |
effect( effect, [options], [speed], [callback] ) |
Первый параметр является обязательным — в нем указывается название выбранного эффекта — остальные три параметра опциональны, т.е. необязательны:
в параметре options передаются специальные опции (проценты, размер, связанный объект), которые необходимы для эффектов, связанных с изменением размера (эффекты "scale", "size" и "transfer");
параметр speed отвечает за продолжительность эффекта;
в параметре callback можно указать функцию, которая будет вызвана по окончании эффекта.
Итак, заменим наши методы show()/hide() на метод effect() с необходимыми параметрами:
|
1 2 3 4 5 6 7 8 9 10 11 |
<script type="text/javascript"> $(document).ready(function(){ $('#s').toggle(function(){ $('#t').effect('slide', 1000); $('#s').text('Свернуть'); }, function(){ $('#t').effect('explode', 1000); $('#s').text('Показать'); }); }); </script> |
Супер!
Мы получили то, что и хотели — 2 потрясающих оригинальных эффекта для нашего спойлера (эффекты jquery). Но только эффектами библиотека jQuery UI не ограничивается, в ней есть масса других готовых оригинальных решений — календарь, аккордеон, вкладки и др.
Использование всех этих вещей ограничено лишь Вашей фантазией.
На этом наш урок завершен. Если Вы столкнетесь с трудностями при использовании того или иного элемента библиотеки jQuery UI — дайте знать, и мы запишем урок, демонстрирующий использование этого элемента.
Удачи и до новых встреч!
Комментарии (24)