Выдвигающаяся панель на jQuery для Drupal 7.

Опубликовано 02.07.2017 - 14:50 пользователем Админ

Модерация материалов на этом сайте

Рубрики:

Выдвигающаяся панель на jQuery для Drupal 7.. Интернет, IT

Нет пределов совершенству. Вот и на этом сайте очень много еще работы над дизайном. Но вчера я решилась наконец-то взяться за выдвигающуюся панель. Я давно хотела перенести форму входа и меню пользователей в боковую выплывающую панель, в которую на многих сайтах прячут контактную форму.

Содержание:
1. Как создать регион в шаблоне Drupal 7?
2. Как сделать прячующуюся панель?

Поиск в Yandex выдал множество тем с решениями. И все разные. Но решила я остановиться на простеньком решении из 5 строчек кода, тем более, что автор предложил пошаговую инструкцию с указанием в каком файле и что менять. Это было для меня, новичка, очень важно. Ссылка на оригинальную инструкцию. Я внесла несколько серьезных изменений, которые были мне необходимы, о чем расскажу в процессе. Итак как сделать регион на сайте и поместить его в выдвигающуюся панель?

В предложенной панели есть ярлычок (trigger) при клике, по которому появляется панель. Снова клик по ярлычку - панель прячется.

Начните с того, что во вложении загрузите файлы с моим css и изображениями.

Как создать регион в шаблоне Drupal 7?

Начинаем с создания региона в шаблоне. Для чего? Просто в регион через админку потом можно будет добавлять и настраивать вывод любых блоков. Это удобно.

Открываем .info файл темы (он находится прямо в корне папки с темой),. В нем уже есть строчки с указанием регионов. Допустим, тема называется Kitty, а новый регион hide-panel. Вот под ними и добавляем еще строчку:

regions[side-panel] = Hiding panel

Теперь надо добавить этот регион в шаблон страниц сайта. Для этого в файл page.tpl.php в самом низу, после закрывающего тэга, добавляем следующие строчки:

<?php if ($page['side_panel']): ?>
<div class="panel"><?php print render($page['side_panel']); ?></div>
<a class="trigger" href="#"></a>
<?php endif; ?>

Код в оригинальном уроке не имел условия, т.е. выводил регион на всех страницах независимо от того, есть в нем содержимое или нет. Пришлось добавить функцию if. Теперь регион с выезжающей панелью может быть, а может, и не быть. Код располагаем внизу, т.к. это удобно, а сам div мы с помощью css потом поместим туда, где он нам нужен.

Чистим кэш (КОнфигурация - Производительность). Теперь в админпанели в Структура - Блоки у нас должен появиться новый регион. Если нет, значит, что-то не так.

Читайте также:
Как сделать адаптивный дизайн?
Сворачивающиеся фильтры для Views на Drupal 7?

Как сделать прячущуюся панель на Drupal 7?

Теперь оформляем саму панель. Начнем со стилей. Я загрузила для начала файл из примера, чтобы потом увидеть панель. После я css переделала под свои нужды.

1. Копируем картинки из образца в папку images темы. Если в другое место, то в css коде для панели измените адреса к этим картинкам.

2. Из кода выше мы видим, что у нас на сайте появилось два новых элемента: class .panel и class .trigger. И каждый из них у нас будет в нескольких состояниях: начальном, при наведении курсором, после клика для раскрытия и после клика для того, чтобы спрятать. Это и надо отразить в css.

CSS код мы можем вставить в уже имеющийся файл темы style.css, где-нибудь в конце. Но можем поместить его в папку стилей css в виде отдельного файла. Например, назовем файл panel.css. В таком случае, в .info файл темы сообщаем об этом, добавив строчку:

stylesheets[all][] = css/panel.css

3. Теперь мы готовы к Jquery. Есть два способа подключить скрипт - добавить header или в папку js.

В первом случае открываем файл html. php в папке templates в папке темы. И где-то между тэгами <head></head> добавляем код:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
   $(".trigger").click(function(){
       $(".panel").toggle("fast");
       $(this).toggleClass("active");
       return false;
   });
});
</script>

Отмечу, что оригинальный код у меня не сработал, а потому пришлось поискать правила оформления js файлов и сделать сслыку на новую версию библиотеки Jquery.

4. В Структура - Блоки добавляем в новы регион нужный нам блок, например логин панель. Чистим кэш и проверяем, что получилось. Если ничего не получилось, значит, надо или искать ошибки или ссылку на новую библиотеку.

Несколько интересных лайфхаков JQuery я нашла и здесь. Еще хочется отметить, что хоть и мизерный, но процент посетителей могут отключить возможности JavaScript у себя в настройках. И тогда вся красота на смарку. Поэтому я все же предусмотрела ссылку на страницу для входа вне выдвигающейся панели.