От автора: Довольно часто на страницах сайта возникает потребность в так называемом спойлере. Спойлер — это блок, который можно скрывать и вновь показывать. Довольно часто Вы можете увидеть его в новостных блоках, где изначально показан краткий текст новости, а полный текст скрыт и показывается по желанию читателя. Подобный спойлер мы с Вами уже делали в уроке "Как сделать FAQ на сайте с использованием PHP-MySQL-jQuery".
Эффект появления/скрытия спойлера хоть и привлекателен, но уже довольно обыден.
Этот момент можно исправить при помощи библиотеки jQuery User Interface (jQuery UI), предоставляющей готовые потрясающие эффекты jquery.

JavaScript. Быстрый старт
Изучите основы JavaScript на практическом примере по созданию веб-приложения
Узнать подробнееДля работы нам понадобится, прежде всего, обычная страница 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):

JavaScript. Быстрый старт
Изучите основы JavaScript на практическом примере по созданию веб-приложения
Узнать подробнееи ядро эффектов с нужными эффектами (рис. 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 — дайте знать, и мы запишем урок, демонстрирующий использование этого элемента.
Удачи и до новых встреч!

JavaScript. Быстрый старт
Изучите основы JavaScript на практическом примере по созданию веб-приложения
Узнать подробнее
JavaScript. Полное руководство
Изучите самый популярный язык разработки и станьте высокооплачиваемым профи
Подробнее
Спасибо, за виртуальное занятие. Самому уследить за всеми новинками JQUERY довольно сложно. Перевод отличный. Я вижу, что Ваша команда следит за комментариями и прекрасно работает. Благодарю.
Пожалуйста
Только это не перевод… авторский урок
А, понятно. Тогда вдвойне молодцы!
Спасибо большое!
Понравилось, попробую сделать сам.
Спасибо за ценную информацию. К сожалению у меня самого времени нет для этого. Не могли бы сбросить информацию мне на почту о том возможно ли заказать это у Вас и сколько стоят Ваши услуги
С уважением
Валерий
Мы не предоставляем такого рода услуги.
Очень интересно
Спасибо! Очень понравилось. Просто и доходчиво.
Огромное спасибо! Как раз подумывал о простых, но эффектных элементах на сайте.
Спасибо! Не думал что есть такие эффекты. А где можно посмотреть полный список эффектов UI? Покопался на офф сайте, не нашел.
А вот по этой ссылке —http://jqueryui.com/demos/effect/
Здравствуйтеhttp://webformyself.com/wp-admin/install.php с полными правами установки. Хорошо что меня а не того, кто вам почистил бы базу данных.
Что вы делали с сайтом? Обновляли WordPress?
Подумайте о безопасности меня 3 минуты перебрасывало на страницу
Спасибо за заботу
На самом деле там нечего было чистить, БД была пуста и мы ее попросту восстанавливали.
С сайтом не делали ничего. У хостера были технические проблемы, за что приносим свои извинения.
Пожалуйста.
Когда вы восстановите форум?
С форумом та же беда была… Уже восстановили
Пожалуйста
Кстати, узнаю движок
Спасибо за полезную статью!
Применил на сайте forexstart.my1.ru
Жду новых статей.
Я новичок и первый раз пробовал, что-то сделать на юкоз — спешил, думал сразу все пойдет. Вторая попытка — saga.ucoz.ru шла более спокойно, но когда я нашел ваш сайт на котором Вы обстоятельно все объясняете мне захотелось сделать, что-то самому, а не по бесплатному шаблону. Спасибо и удачи!
Классный урок. Классные эффекты.
Но у меня возникла проблема.
Попробовал сделать на своей странице на сайте. При открытии страницы показывается текст, который должен быть скрыт. Остальное всё работает. Видно идёт какой-то конфликт. Как можно устранить данную проблему?
Спасибо за ответ!
С уважением!
Без кода вопрос немного абстрактен.форуме код, а еще лучше, ссылку на страницу и Вам помогут.
Содержимое скрывается указанием свойства display.
Выложите на нашем
Добавил стиль и всё заработало, как надо.
Поздравляю, что разобрались самостоятельно… опыт, приобретенный на своих ошибках с их решением — ценнее всего
ID на странице неповторим. Если на одной странице необходимо сделать несколько таких кнопочек с выезжающим содержимым, с эффектами, то под каждый вариант необходимо писать отдельный код джава, или как-то можно реализовать это в указанном коде? Если можно, то как?
Используйте класс для обращения к элементам. На сайте из примера к уроку именно так и сделано. Ну и можно посмотреть ещеурок по созданию FAQ на сайте.