Помощь начинающим веб
разработчикам

Создание выезжающих панелей в Drupal 7

04.07.2012

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

Выглядят они довольно эффектно. В принципе для небольшого сайта необходимость в них отпадает, а вот если ваш ресурс разросся и вам просто не хватаем места на странице для размещения информации, то вам такие панели будут в самый раз. Строятся такие панели на JS и Jquery, плюс CSS (куда же без него). Сейчас я вам пошагово попытаюсь объяснить как такую панель разместить у себя на сайте под Drupal 7 и для удобства выведем этот блок в качестве региона, что бы мы не залазили каждый раз в код, а просто размещали в данной панели именно тот блок, который нам необходим. Итак приступим:

1.Для начала нам нужен сам скрипт этой панели (написать можно и самому), но я возьму уже готовый, что бы зря не тратить время да и к тому же он мне тоже нравится. Скачать мой вариант панели из статьи можно отсюда. (Это не мой скрипт, я лишь почистил его от мусора).

2.Распаковываем и смотрим, что внутри у нас находится папка с изображениями, стили, и индексный файл. Откроем файл «index.html» и видим, что к ней у нас подключаются следующие элементы:

  1. Стили – файл style.css
  2. Библиотека Jquery – с url откуда подкачать файл библиотеки
  3. И перед закрывающим тегом head - вставлен выполняющий скрипт.


Пример подключения я проведу в drupe 7 на шаблоне «Crisp».

3.Первоначально создадим дополнительный регион в шаблоне «Crisp» (про установку данного шаблона я писал раньше). Для этого идём в файл

  1. crisp.info

и пишем новый регион:

  1. regions[newRegionDrupalfly] = drupalfly

4.Далее нам надо вывести новый регион в разметке страницы. Для этого открываем файл

  1. page.tpl.php

и пишем код вывода данного региона. Замечу, что блок я возьму из разметки индексного файла в скрипте нашей панели, а именно создам блок с классом «panel» в любом месте контента страницы (так как блок абсолютно позиционирован).


И далее заменяем весь наш контент в новом регионе на стандартную переменную вывода :

  1. print render($page['newRegionDrupalfly']);

5. Проверим появился ли у нас новый регион в админке сайта , а именно в структура->блоки


Если вы всё сделали правильно, то регион должен у вас появиться. (Замечу, что после изменений в шаблоне Drupal – шаблон нужно пересохранить, что бы подцепились новые элементы).

6. Далее нам необходимо применить стили, а именно подцепить стилевый таблицы нашего скрипта к нашей странице. Есть два варианта, либо дописать существующий файл шаблона style.css, либо подключить отдельный файл. Я выбираю второй вариант, поэтому – переименую файл скрипта из style.css в panel.css и скопирую его в папку со стилями в нашем шаблоне.


Теперь пропишем в файле

  1. crisp.info

подключение к странице нашего нового стиля:

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

А так же скопирую все изображения из папки «images» нашего скрипта в папку «images» - нашего шаблона. Думаю с этим вы без труда справитесь. Не забудьте только переписать url с картинками в стилях.

7.Теперь нам необходимо подключить скрипты, это библиотека Jquery и выполняющий скрипт. Данный скрипт работает только с библиотекой 1.3.2 –поэтому я подключать буду её. (Хотя в Drupal JQuery библиотека идёт из коробки, но в любом случае в Drupal 7 присутствует новая версия библиотеки). Поэтому открываем файл «html.tpl» (структура этого шаблона не совсем обычная, контент страницы и head разнесены в разные файлы. Но в этом нет ничего страшного.) И вписываем туда подключение нашей старой библиотеки и выполняющего скрипта, а именно копируем это всё из файла index.html.

Замечу, что по правилам API Drupal все скрипты нужно выносить в отдельный файл и подключать через файл

  1. Название_темы.info

подробнее об этом можно почитать вот здесь. Теперь пересохраняем весь наш шаблон. Идём в пункт Cтруктура->Блоки. Создадим новый блок, внутри блока может быть всё что угодно, в моём случае это просто текст и поместим его в регион «drupalfly»

Сохраняем и переходим на сайт и видими язычок нашего региона.

При клике по которому у нас открывается содержимое нашего нового блока.

На этом всё. Надеюсь это кому ни-будь пригодиться.

Узнавай о новых статьях сайта - первым. Просто подпишись на рассылку.

Комментарии (15)

Profile picture for user Алексей
1541
02.11.2012

Спасибо. Долго искал нечто подобное.

Profile picture for user pantey
pantey
02.11.2012

Пожалуйста. Рад, что пригодилось.

Profile picture for user Алексей
1541
03.11.2012

А как сделать чтобы он не двигался при скроле?

Profile picture for user pantey
pantey
05.11.2012

в стилях (файл style.css) прописать вместо

.panel{
position:absolute;
}

вот это

.panel{
position:fixed;
}

А вместо

a.trigger{
position:absolute;
}

Вот это

a.trigger{
position:fixed;
}
Profile picture for user Алексей
1541
14.11.2012

Спасибо. Помогло.:) сам не докопал, ибо в отьезде был.
И еще вот тут:

a.trigger:hover{
position: fixed;
Profile picture for user Алексей
purityname
28.06.2013

молодец!

Profile picture for user Алексей
drupalprog
13.04.2014

А как сделать чтобы панель была видна только анонимам?

Profile picture for user Алексей
Алексей
04.10.2015

у меня блок оказывается развёрнутым при входе на сайт как сделать чтоб изначально он был свёрнут

и как убрать дублирование заголовков меню при выводе в блок
заранее спасибо.

Profile picture for user Алексей
Алексей
13.12.2015

У меня содержимое не отображается,хотя блок помещен в этот регион.

Profile picture for user Алексей
Наталия
10.02.2016

В друпал 7 - не работает

Profile picture for user Алексей
Наталия
11.02.2016

Проверила еще раз, работает! Благодарю за урок!

Profile picture for user Алексей
Василий
28.06.2017

У меня не работает, все сделал по инструкции. Такое впечетление, что библиотека Jquery не подгружается. Даже не работает в примере Index.html

 

Profile picture for user Алексей
Василий
29.06.2017

Новая библиотека, и все заработает

https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js

Profile picture for user Алексей
Татьяна
01.07.2017

Здравствуйте, в первые сталкиваюсь со скриптами. И даже по пошаговой инструкции у меня ничего не получалось. Но последний комментарий спас ситуацию.

Действительно, требуется указать ссылку на новую библиотеку https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js

Но у меня вопрос: так и оставить ссылку на библиотеку на стороннем сайте или ее надо лучше загрузить на свой сайт и сделать уже ссылку к себе? 

Спасибо за помощь и автору и комментатору.

Profile picture for user pantey
pantey
01.07.2017

из CDN скорость загрузки выше. Можете оставить сторонний ресурс

Добавить комментарий

- Оповестить о новом комментарии.
- Все комментарии
- Только мои комментарии