Сворачивание и разворачивание элементов на JavaScript (JQuery)
Здравствуйте, уважаемый посетитель!
Сегодня рассмотрим применение эффекта сворачивания и разворачивания элементов сайта. Такой способ преобразования контента в основном предназначен для экономии места на веб-странице. Но кроме того использование такого механизма может придать сайту и определенный презентабельный вид.
Поэтому довольно часто можно встретить на различных ресурсах возможность плавного сворачивания и разворачивания фрагментов текста, изображений, или какого-либо другого рода элементов.
Данный механизм мы рассмотрим на примере ранее установленного слайдера изображений. При этом все необходимые преобразования управляемых элементов будут выполняться с использованием библиотеки jQuery JavaScript и предусматривать выполнение следующих действий:
- сворачивание основного слайдера, размещенного центральной части страницы, с одновременным разворачиванием его копии в сайдбаре;
- обратное действие по разворачиванию основного слайдера с одновременным сворачиванием в сайдбаре;
Кроме того, чтобы при последующих запросах пользователя управляемые элементы отображались в соответствии с последними изменениями, посмотрим, как можно сохранять их состояние персонально для каждого пользователя.
Несмотря на то, что приведенное здесь решение привязано к конкретному примеру, основные моменты, которые будут показаны, возможно использовать и в других аналогичных случаях.
Надеюсь, что эта статья будет интересна тем, кто хочет несколько преобразить свой сайт, применив для этого такой своеобразный эффект как сворачивание разворачивание его элементов.
Содержание
- Сворачивание элемента
- Разворачивание элемента
- Сохранение состояния элементов с использованием cookies
- Исходные файлы сайта
Сворачивание элемента
Как было выше сказано, сворачивание и разворачивание мы будем производить на примере слайдера изображений, порядок установки которого был ранее показан здесь.
Чтобы иметь возможность на слайдер воздействовать, добавим в него в качестве элемента управления дополнительный блок Рис.1 Фрагмент кода слайдера с добавленным элементом управления Ну а для того, чтобы изобразить элемент управления в виде ссылки, назначим ему в таблице стилей main.css соответствующие свойства CSS. #rtr-control { position:absolute;top:.75em;right:1.25em; font-size:.875em; color:blue; font-weight:bold; text-decoration:underline; cursor:pointer; } #rtr-control:hover { text-decoration:none; } Рис.2 Стилизация элемента управления по вид ссылки В итоге в правом верхнем углу слайдера должна появиться ссылка Свернуть, как показано на следующем скриншоте. Рис.3 Блок слайдера с элементом управления После этого осталось добавить соответствующий JavaScript-код в файл $flexslider_script.js, в котором находится скрипт слайдера. $('#rtr-control').click (function() { //Вызов функции выполнения анимации по событию клика на элемент управления $('section').slideUp(800); //Выполнение анимации сворачивания слайдера }); Рис.4 JavaScript-код анимации сворачивания слайдера В данном случае при клике на элемент управления с идентификатором rtr-control (поз.1) с помощью метода jQuery .slideUp (поз.2) будет выполняться с заданной длительностью в 800 миллисекунд сворачивание контейнера , в котором размещен основной слайдер. Используемый здесь метод jQuery .slideUp предназначен специально для скрытия элемента на странице за счет плавного уменьшения его высоты. Однако, практически тот же самый результат можно получить используя другой, более универсальный метод - .animate. При котором анимация происходит за счет плавного изменения различных CSS-свойств (высоты, ширины, прозрачности и т.д.).. В этом варианте строка 2 скрипта приняла бы следующий вид: $('section').animate({height:'hide'},800); //Альтернативный способ сворачивания элемента Рис.5 Альтернативный способ сворачивания элемента Ну а теперь, после произведенных преобразований можно посмотреть как это будет выглядеть на практике. Рис.6 Сворачивание основного слайдера Как видно, при клике по ссылке "Свернуть" слайдер, размещенный в центральной области сайта, стал сворачиваться с заданной длительностью в 0.8 секунд. Таким образом, первую часть преобразований мы выполнили. А далее перейдем к следующему этапу - к разворачиванию слайдера, который будет отображаться в сайдбаре. Для того, чтобы иметь возможность развернуть слайдер в сайдбаре, необходимо сначала сформировать в нем блок с соответствующим HTML-кодом. По существу, этот код будет представлять урезанную копию основного блока, размещенного в контейнере (рис.1), но в уменьшенном виде с меньшим объемом сопроводительного текста. Ниже показан вариант слайдера, предназначенного для разворачивания в сайдбаре, в котором в качестве элемента управления предусмотрен блок Рис.7 HTML-код блока слайдера в сайдбаре А для того, чтобы этот блок принял необходимый внешний вид, назначим ему в таблице стилей main.css следующие свойства CSS. #bar-slides { background-image:linear-gradient(to top, #c4c4c4 0%, #e9e9e9 1.5%, #eaeaea 10%, #eaeaea 94%, #f7f7f7 98%, #fafafa 100%); border-radius:.625em; box-shadow:0 0 3.75em 0 #fff; border-top:.0625em solid #dedede; font-size:.875em; color:#212a68; overflow:hidden; margin:0 0 .9375em 0; position:relative; } #bar-control { position:absolute;top:.5625em;right:1.25em; font-size:1em; color:blue; font-weight:bold; text-decoration:underline; cursor:pointer; } #bar-control:hover { text-decoration:none; } #bar-screen { padding:2.25em 1em 0 1em; } #bar-slider { border-radius:.375em; border-top:.25em solid #888; border-left:.25em solid #888; border-bottom:.25em solid #fff; border-right:.25em solid #fff; } #bar-block p { text-indent:1em; margin:-.5em 1.125em 1.25em 1.125em; } Рис.8 Стилизация блока слайдера в сайдбаре И теперь, после того, как блок слайдера в сайдбаре создан, осталось только дополнить файл $flexslider_script.js соответствующим JavaScript-кодом (выделено светлым фоном). $('#rtr-control').click (function() { //Вызов функции выполнения анимации по клику ссылки "Свернуть" $('section').slideUp(800); //Сворачивание основного слайдера $('#bar-slides').slideDown(800); //Разворачивание слайдера в сайдбаре }); Рис.9 Разворачивание вновь созданного слайдера в сайдбаре В данном случае при клике на элемент управления (поз.1), помимо сворачивания основного слайдера (поз.2), также будет разворачиваться с помощью метода jQuery .slideDown его копия, размещенная в элементе сайдбара с идентификатором bar-slides(поз.3). Как и в предыдущем случае здесь используется метод jQuery .slideDown, который специально предназначен для такого действия, а именно: скрытия элемента на странице за счет плавного увеличения его высоты. При этом, как ранее отмечалось, тот же самый результат можно получить используя универсальный метод - .animate. При котором анимация происходит за счет плавного изменения различных CSS-свойств. В этом случае строка 3 приняла бы следующий вид: $('#bar-slides').animate({height:'show'},800); //Альтернативный способ разворачивания элемента Рис.10 Альтернативный способ разворачивания элемента И теперь можно проверить как по клику по ссылке "Свернуть" будет сворачиваться основной слайдер и одновременно с этим разворачиваться уменьшенная его копия в сайдбаре. Рис.11 Сворачивание основного слайдера с одновременным разворачиванием в сайдбаре А для того, чтобы получить обратные преобразования, следует дополнить JavaScript-код аналогичными элементами (рис.12), но предназначенными теперь для выполнения противоположных действий, а именно: для сворачивания слайдера в сайдбаре (поз.6) и разворачивания его в центральной части страницы (поз.7). Причем это должно теперь происходить от клика по ссылке "Развернуть", расположенной в элементе слайдера сайдбара с идентификатором bar-slides (поз.5). Рис.12 JavaScript-код анимации сворачивания и разворачивания слайдера с обратными преобразованиями В результате мы получим возможность приведения слайдера в исходное состояния используя тот самый эффект сворачивания и разворачивания элементов. Рис.13 Поочередное сворачивание/разворачивание слайдера В принципе, задачу по сворачиванию, разворачиванию элементов, в нашем случае слайдера, мы выполнили. Однако, этот механизм можно дополнить еще одной функциональной возможностью, заключающейся в сохранении состояния элементов после выполнения последнего преобразования. Дело в том, что на данный момент при каждом последующем переходе, не зависимо от того, какие производились до этого действия, страница будет всегда открываться в исходном состоянии - с развернутым слайдером в ее центральной части и свернутом в сайдбаре. Поэтому хорошо бы сделать так, чтобы для каждого пользователя состояние слайдера всегда оставалось в том положении, которое им было установлено при последнем посещении. Довольно удобно для этого использовать cookies. В этом случае для хранения состояния слайдера можно создать в устройстве пользователя определенную cookie, значение которой и будет определять положение слайдера при загрузке страницы. Для этого сначала добавим в рассмотренный выше JavaScript-код две строки (выделено светлым фоном), которые в зависимости от состояния слайдера будут присваивать cookie с именем slider значение section или sidebar. Рис.14 Присвоение cookie с именем slider значения section или sidebar Затем в файле start.php, который выполняется в самом начале генерации динамической страницы, добавим проверку на наличия cookie с именем slider. И в зависимости от ее значения, будем присваивать PHP-переменным $sect (для основного слайдера) и $bar (для копии слайдера в сайдбаре) нужные значения пользовательского атрибута data-slider, как показано на рис.13. Рис.15 Формирование PHP-переменных с пользовательским атрибутом data-slider А далее через переменные и $sect и $bar добавим сформированный пользовательский атрибут data-slider в соответствующие HTML-элементы: в с содержимым основного слайдера: и в После чего с помощью свойств CSS следует определять состояние отображения элементов в зависимости от значения пользовательского атрибута data-slider: section[data-slider="on"],#bar-slides[data-slider="on"] { display:block; } section[data-slider="off"],#bar-slides[data-slider="off"] { display:none; } Рис.16 Отображение/скрытие элементов в зависимости от значения пользовательского атрибута data-slider Так, при значении on пользовательского атрибута data-slider при загрузке страницы элемент будет отображаться. При значение off - будет исключаться из общего потока, и следовательно, не отображается. На этом все необходимые действия выполнены. Осталось только проверить результат. Более наглядно это можно сделать на текущем ресурсе с использованием встроенного фрейма. Либо проверить непосредственно на ресурсе avtobezugona.ru, размещенном в интернете. скриншот 54 Дополнительные материалы бесплатно предоставляются только зарегистрированным пользователям. Для скачивания исходных файлов необходимо авторизоваться под своим аккаунтом через соответствующую форму. Для тех кто не зарегистрирован, можно это сделать на вкладке Регистрация. С уважением,
Разворачивание элемента
Сохранение состояния элементов с использованием cookies
Исходные файлы сайта
Исходные файлы сайта с обновлениями, которые были сделаны в данной статье, можно скачать из прилагаемых дополнительных материалов:
Комментарии
Если у Вас возникли вопросы, или есть какие-либо пожелания по представлению материала, либо заметили какие-нибудь ошибки, а быть может просто хотите выразить свое мнение, пожалуйста, оставьте свои комментарии. Такая обратная связь очень важна для возможности учета мнения посетителей.
Буду Вам за это очень признателен!