Найти на сайте

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

+33
2.9K
  2. Блоги
  3. Сворачивание блоков в сайдбаре с запоминанием позиции в cookies
Тут уже была статья о сворачивающихся блоках — 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>
Вот собственно и все.
Авторесайз внешних изображений в bbcodes через Fancybox
cookiesjquerysidebartoogle
+1
ByMind ByMind 13 лет назад #
работает пока
косяков не найдено
хорошо сработано, спасибо!
0
Алхимик Алхимик 13 лет назад #
Благодарю за отзыв, а то тихо как-то, думаю вдруг там людей уже в живых после установки нет )
+2
ByMind ByMind 13 лет назад #
просто все оторваться не могут))
на 1.7 работает идеально
вот народ и залипает)))
каюсь, сам сворачивал-разворачивал сидел, циклов 10 нафигачил кряду)))
такое ощущение, что смазку проверял)))))
+2
HolyGun HolyGun 13 лет назад #
Небольшая доработка. Выкладываю с разрешения автора.

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

Стили:
Код 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 13 лет назад #
честно говоря "Модуль № такой-то" лично мне довольно здорово помогает))
и кнопка работает нормально))
кстати, проверил на всех модулях(кроме меню) - работает замечательно не только на сайдбаре! на всем
0
Алхимик Алхимик 13 лет назад #
С меня там автор - через пень колоду ), просто прикрутил на Instant ввиду потребности сей полезной фичи.
0
googlebot googlebot 13 лет назад #
прикольный скрипт, не знаю уж насколько полезно, особенно если скрывать рекламные модули:), но сайт оживляет.
0
Алхимик Алхимик 13 лет назад #
Рекламные модули можно и не скрывать по желанию, просто оставить стандартный module.tpl в нужном модуле и никуда он не будет сворачиваться. Или допилить это дело, как советовал forlord, чтобы сворачиваемость модуля назначалась в настройках конкретного модуля в быстрой настройке прямо на страницах сайта.
0
Blit Blit 13 лет назад #
Отлично! У меня вопрос. Я сделал вкладки пользователя отдельно от профиля, можно ли сделать чтобы при открытии отдельной вкладки, страница также разворачивалась, как и блоки?
0
Алхимик Алхимик 13 лет назад #
Думаю да.
Посмотри ссылки для ознакомления, которые приводились в посте о toogle и cookies - и модифицируй шаблон соответствующим образом.
+1
Soviet-Girl Soviet-Girl 13 лет назад #
Здорово, только вот пользователь вряд ли поймёт, что на заголовок модуля можно нажать для свёртывания. Если только случайно тыкнет =)
0
Алхимик Алхимик 13 лет назад #
Думаю администратор всегда сможет грамотно уведомить пользователей ресурса о нововведениях производимых с интерфейсом которым они пользуются.
0
Soviet-Girl Soviet-Girl 13 лет назад #
Это да, до существующих пользователей можно как-то донести, а что с новенькими делать? Может быть, сделать рядом с названием заголовка модуля ссылочку меленьким шрифтом "свернуть"? Или что-то типа того) Может, это я уже придираюсь, но по опыту знаю, для многих пользователей расширенный интерфейс и так как японская грамота, им всё надо наглядно и в глаза демонстрировать, носом тыкать.
0
WALTERZ WALTERZ 13 лет назад #
Я так и сделал, маленьким шрифтом чуть ниже "свернуть\развернуть"
0
eskimoss eskimoss 12 лет назад #
Все работает, но как сохранить оформление заголовков если шаблон не дефолтный?
+1
googlebot googlebot 12 лет назад #
просто оберните ваш заголовок тегом Н6, а содержимое модуля положите внутрь <div class="toggle-container"> да почистите css для h6 и класса toggle-container.

Еще от автора

Авторесайз внешних изображений в bbcodes через Fancybox

Авторесайз внешних изображений в bbcodes через Fancybox

(Больших под ширину блога, маленьких по их истинному размеру.) Пример: [hide] http://alhimik.org.ua/blogs/nemonomicon/primer-avtoresaiza.
14

InstantCMS Team

Связь с нами
Email dev@instantcms.ru

Делаем полезные Интернет проекты с 2008 года 💫

О проекте

Поддержка

Дополнения

Используя этот сайт, вы соглашаетесь с тем, что мы используем файлы cookie.