Как стать автором
Обновить

igoogle like drag drop portal: делаем страницу с передвигаемыми контейнерами

Время на прочтение 2 мин
Количество просмотров 450
Поискав по хабру и не найдя похожего, решил накидать заметку. Давным давно зайдя на страницу igoogle нашел интересной идею с передвигаемыми контейнерами. Недавно решил использовать эту красоту у себя локально для личного удобства. Немного погуглив наткнулся на реализацию от michel hiemstra, которая уже имела версию 2.0 и имела поддержку сохранения положения контейнеров в бд mysql.
Ниже некоторые подробности настройки

Первым делам качаем код.
В начале save.php закоменчена процедура создания бд под стандартный пример, если вам нужно больше контейнеров просто добавьте дополнительные.
к примеру:
INSERT INTO `blocks` VALUES(1, 'block-1', 'column-1', 0);
INSERT INTO `blocks` VALUES(2, 'block-3', 'column-2', 0);
INSERT INTO `blocks` VALUES(3, 'block-2', 'column-3', 0);
INSERT INTO `blocks` VALUES(4, 'block-4', 'column-2', 1);

Первое поле просто индекс, второе название блока, третье номер столбца и последнее номер контейнера в столбце.
Для сохранения значений в бд также нужно раскомментировать строку с mysql Insert в save.php
Также в save.php и get_blocks.php нужно указать параметры для коннекта к бд.
Все изменения размеров ширины контейнеров, шапок и тп производятся в css, находящихся в папке assets/css.
В частности мне требовались всего два столбца сверху и один внизу. Для данной задачи достаточно было изменить в portal.css параметр width у .menu .blocks и .sidebar на 620px 620px и 1235px соответственно ( это для 1280x1024).
В демке в контейнере находится обычный текст, но на практике в такой контейнер можно положить все, что угодно (например, у меня там картинки графиков).
Вобщем вышесказанным более хотел отметить общую настраиваемость и масштабируемость системы, нежели дать какие-то конкретные рекомендации.
ЗЫ автор просил оставлять комменты вот тут.
Теги:
Хабы:
-4
Комментарии 6
Комментарии Комментарии 6

Публикации

Истории

Ближайшие события

Московский туристический хакатон
Дата 23 марта – 7 апреля
Место
Москва Онлайн
Геймтон «DatsEdenSpace» от DatsTeam
Дата 5 – 6 апреля
Время 17:00 – 20:00
Место
Онлайн