Сворачивание блоков в сайдбаре с запоминанием позиции в cookies

+33
2.58K
Тут уже была статья о сворачивающихся блоках — instantcms.ru/blogs/narabotochki/svorachivanie-blokov.html, но там не было запоминания их позиций т.е. покинул страницу и сворачивай/разворачивай заново — что есть очень не халяльно.
Cookies печеньки — это все прекрасно решают. Что позволяет в свернутом состоянии блоков значительно экономить пространство sidebar.

Приступим.
Качаем файл — instantcms.ru/users/files/download956.html
И с найденным в нем поступаем таким образом:

Копируем module_toogle.tpl в modules /templates/_default_/modules/
Копируем toogle.js в /templates/_default_/js/
(В toogle.js уже встроен jquery.cookie)
Вставляем в конец своего styles.css такие строки:
  1.  
  2. .toggle-wrapper {
  3. overflow:hidden;
  4. display:block;
  5. }
  6. .toggle-wrapper .toggle-container {
  7. position:relative;
  8. overflow: hidden;
  9. }
  10. .toggle-wrapper h6.trigger {
  11. cursor:pointer;
  12. padding: 10 10 16px;
  13. margin:18;
  14. }
  15.  
  16. .toggle-wrapper h6.active {
  17. padding:10 10 10 16px;
  18. }
  19.  
Добавляем в template.php
между <head>...</head>
  1. <script type="text/javascript" src="/templates/_default_/js/toogle.js"></script>
  2.  
При настройке модуля теперь в "Шаблон модуля" появится — module_toogle.tpl
Выбираем его для соответствующих модулей в sidebar и смотрим как оно все — входит и выходит, вообщем замечательно выходит.

Для понимания как оно все работает и его доработки и улучшения — читать тут.
www.tobypitman.com/multiple-collapsable-panels-with-cookies/
stackoverflow.com/questions/4258021/jquery-toggle-with-cookies-how-to-get-collapsed-state-by-default-and-remain-acce

Все вышеописанное именно для блоков в сайдбаре, для main придется подправить код, чтобы не конфликтовали стили.
Как это выглядит и работает можно посмотреть тут —
Группе, к которой вы принадлежите, запрещено просматривать этот скрытый текст
при нажатии на название блока он будет сворачиваться и разворачиваться, сворачиваться и разворачиваться, вообщем осторожно не зависните.

Вести с полей
HolyGun дошаманил сворачивалку, чтобы было максимально похоже на дефолтный дизайн.
Кнопка конфига водворена на ее законное место и не выводится надпись "№ модуля ..." — для админа. Проделывать сию процедуру могут те, кому не нравится отображение модуля для админа, для обычного пользователя никаких изменений до и после — не заметно.
Глянуть можно o-bike.ru/ (актуально для незарегистрированных тут людей)
Вот и скриншоты появились:
Раскрыто: floomby.ru/content/VyvBleUJHE/
Свернуто: floomby.ru/content/2yXzKyMM6k/
Измените то, что вставляли
в style.css
на
  1. .toggle-wrapper {
  2. overflow:hidden;
  3. display:block;
  4. }
  5. .toggle-wrapper .toggle-container {
  6. position:relative;
  7. overflow: hidden;
  8. }
  9. .toggle-wrapper h6.trigger {
  10. cursor:pointer;
  11. }
и содержимое module_toogle.tpl
на
  1. <div class="{$mod.css_prefix}module">
  2. {if $mod.showtitle neq 0}
  3. <div class="toggle-wrapper">
  4. {if $cfglink}
  5. <div style="display: inline-block; float: right;">
  6. <a href="javascript:moduleConfig({$mod.module_id});" title="Настроить модуль">
  7. <img src="/templates/_default_/images/icons/settings.png" />
  8. </a>
  9. </div>
  10. {/if}
  11. <h6 class="trigger" style="font-weight: normal;">
  12. <span class="{$mod.css_prefix}moduletitle" style="padding-bottom: 10px;">{$mod.title}</span>
  13. </h6>
  14. {/if}
  15. <div class="toggle-container">
  16. <div class="{$mod.css_prefix}modulebody">{$mod.body}</div>
  17. </div>
  18. </div>
  19. </div>
Вот собственно и все.
+1
ByMind ByMind 11 лет назад #
работает пока
косяков не найдено
хорошо сработано, спасибо!
0
Алхимик Алхимик 11 лет назад #
Благодарю за отзыв, а то тихо как-то, думаю вдруг там людей уже в живых после установки нет )
+2
ByMind ByMind 11 лет назад #
просто все оторваться не могут))
на 1.7 работает идеально
вот народ и залипает)))
каюсь, сам сворачивал-разворачивал сидел, циклов 10 нафигачил кряду)))
такое ощущение, что смазку проверял)))))
+2
HolyGun HolyGun 11 лет назад #
Небольшая доработка. Выкладываю с разрешения автора.

Я тут немного подшаманил сворачивалку твою...
Чтобы максимально похоже было на дефолтный шаблон.
Ну и надпись, хоть и для админов, "Модуль № такой-то" не выводится. И кнопка конфигурации модуля работает.

Стили:
Код PHP:
.toggle-wrapper {
	overflow:hidden;
	display:block;
}
.toggle-wrapper .toggle-container {
	position:relative;
	overflow: hidden;
}
.toggle-wrapper h6.trigger {
        cursor:pointer;
}
Шаблон module_toogle.tpl
Код PHP:
<div class="{$mod.css_prefix}module">
    <div class="toggle-wrapper">
    {if $mod.showtitle neq 0}
            {if $cfglink}
		<div style="display: inline-block; float: right;">
                    <a href="javascript:moduleConfig({$mod.module_id});" title="Настроить модуль">
                        <img src="/templates/_default_/images/icons/settings.png" />
                    </a>
		</div>
            {/if}
	<h6 class="trigger" style="font-weight: normal;">
		<span class="{$mod.css_prefix}moduletitle" style="padding-bottom: 10px;">{$mod.title}</span>
	</h6>
    {/if}
	    <div class="toggle-container">
    		<div class="{$mod.css_prefix}modulebody">{$mod.body}</div>
	    </div>
    </div>
</div>
У меня на http://o-bike.ru/ работает нормально.
http://floomby.ru/content/VyvBleUJHE/
http://floomby.ru/content/2yXzKyMM6k/
0
ByMind ByMind 11 лет назад #
честно говоря "Модуль № такой-то" лично мне довольно здорово помогает))
и кнопка работает нормально))
кстати, проверил на всех модулях(кроме меню) - работает замечательно не только на сайдбаре! на всем
0
Алхимик Алхимик 11 лет назад #
С меня там автор - через пень колоду ), просто прикрутил на Instant ввиду потребности сей полезной фичи.
0
googlebot googlebot 11 лет назад #
прикольный скрипт, не знаю уж насколько полезно, особенно если скрывать рекламные модули:), но сайт оживляет.
0
Алхимик Алхимик 11 лет назад #
Рекламные модули можно и не скрывать по желанию, просто оставить стандартный module.tpl в нужном модуле и никуда он не будет сворачиваться. Или допилить это дело, как советовал forlord, чтобы сворачиваемость модуля назначалась в настройках конкретного модуля в быстрой настройке прямо на страницах сайта.
0
Blit Blit 11 лет назад #
Отлично! У меня вопрос. Я сделал вкладки пользователя отдельно от профиля, можно ли сделать чтобы при открытии отдельной вкладки, страница также разворачивалась, как и блоки?
0
Алхимик Алхимик 11 лет назад #
Думаю да.
Посмотри ссылки для ознакомления, которые приводились в посте о toogle и cookies - и модифицируй шаблон соответствующим образом.
+1
Soviet-Girl Soviet-Girl 11 лет назад #
Здорово, только вот пользователь вряд ли поймёт, что на заголовок модуля можно нажать для свёртывания. Если только случайно тыкнет =)
0
Алхимик Алхимик 11 лет назад #
Думаю администратор всегда сможет грамотно уведомить пользователей ресурса о нововведениях производимых с интерфейсом которым они пользуются.
0
Soviet-Girl Soviet-Girl 11 лет назад #
Это да, до существующих пользователей можно как-то донести, а что с новенькими делать? Может быть, сделать рядом с названием заголовка модуля ссылочку меленьким шрифтом "свернуть"? Или что-то типа того) Может, это я уже придираюсь, но по опыту знаю, для многих пользователей расширенный интерфейс и так как японская грамота, им всё надо наглядно и в глаза демонстрировать, носом тыкать.
0
WALTERZ WALTERZ 11 лет назад #
Я так и сделал, маленьким шрифтом чуть ниже "свернуть\развернуть"
0
eskimoss eskimoss 10 лет назад #
Все работает, но как сохранить оформление заголовков если шаблон не дефолтный?
+1
googlebot googlebot 10 лет назад #
просто оберните ваш заголовок тегом Н6, а содержимое модуля положите внутрь <div class="toggle-container"> да почистите css для h6 и класса toggle-container.

Еще от автора

Авторесайз внешних изображений в bbcodes через Fancybox
(Больших под ширину блога, маленьких по их истинному размеру.) Пример: [hide] http://alhimik.org.ua/blogs/nemonomicon/primer-avtoresaiza.
Используя этот сайт, вы соглашаетесь с тем, что мы используем файлы cookie.