Дополнительный шаблон модуля для InstantCMS [1.10.6].

+26
1.68K
Здравствуйте.

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

Смотрим демо.

Принцип работы: посетитель нажимает на первую иконку, тело модуля прячется, иконка меняется. Нажимая на новую иконку, тело модуля появляется. Выбор хранится в куках.

Как сделать.

Клонируем module.tpl и называем его на своё усмотрение, например module_hide.tpl

Определяем положение иконок, в удобном месте помещая две кнопки — скрыть и показать. Предлагаю это делать сразу под переменной {$mod.title}:
  1. <div class="hide-a-btn a{$mod.id}"><img src="http://cdn.flaticon.com/png/24/10/10442.png" /></div>
  2. <div class="show-a-btn a{$mod.id}"><img src="http://cdn.flaticon.com/png/24/7/7584.png" /></div>
Далее оборачиваем тело модуля в div:
  1. <div class="anima_hiding_block a{$mod.id}">
  2. <div class="{$mod.css_prefix}modulebody">{$mod.body}</div>
  3. </div>
В конце нашего файла вставляем скрипт.

  1. <script>
  2. $(document).ready(function {/literal}function{$mod.id}{literal}() {
  3. $(".anima_hiding_block.a{/literal}{$mod.id}{literal}").css('display',
  4. localStorage.getItem('anima_hiding_block{/literal}{$mod.id}{literal}'));
  5. var inStorage{/literal}{$mod.id}{literal} = localStorage.getItem('anima_hiding_block{/literal}{$mod.id}{literal}');
  6. $(".hide-a-btn.a{/literal}{$mod.id}{literal}").click(function () {
  7. $( ".anima_hiding_block.a{/literal}{$mod.id}{literal}" ).slideUp( "medium", function() {
  8. localStorage.setItem('anima_hiding_block{/literal}{$mod.id}{literal}', 'none');
  9. });
  10. });
  11. $(".show-a-btn.a{/literal}{$mod.id}{literal}").click(function () {
  12. $( ".anima_hiding_block.a{/literal}{$mod.id}{literal}" ).slideDown( "medium", function() {
  13. localStorage.setItem('anima_hiding_block{/literal}{$mod.id}{literal}', 'block');
  14. });
  15. });
  16. if (inStorage{/literal}{$mod.id}{literal} == 'none') {
  17. $(".show-a-btn.a{/literal}{$mod.id}{literal}").show();
  18. $(".hide-a-btn.a{/literal}{$mod.id}{literal}").hide();
  19. } else {
  20. $(".show-a-btn.a{/literal}{$mod.id}{literal}").hide();
  21. $(".hide-a-btn.a{/literal}{$mod.id}{literal}").show();
  22. };
  23. $(".hide-a-btn.a{/literal}{$mod.id}{literal}").click(function () {
  24. $(".show-a-btn.a{/literal}{$mod.id}{literal}").show();
  25. $(".hide-a-btn.a{/literal}{$mod.id}{literal}").hide();
  26. });
  27. $(".show-a-btn.a{/literal}{$mod.id}{literal}").click(function () {
  28. $(".hide-a-btn.a{/literal}{$mod.id}{literal}").show();
  29. $(".show-a-btn.a{/literal}{$mod.id}{literal}").hide();
  30. });
  31. });
  32. </script>
В css вписываем

  1. .hide-a-btn, .show-a-btn {
  2. position:absolute;
  3. top:0;
  4. right:0;
  5. }
  6. .hide-a-btn img, .show-a-btn img {
  7. width: 16px;
  8. height: 16px;
  9. padding: 2px;
  10. cursor:pointer;
  11. }
  12. .show-a-btn img {
  13. background: #FF9A9A;
  14. }
  15. .hide-a-btn img {
  16. background: #5CEBB4;
  17. }
  18. .module {position:relative;}
Переходим в редактирование модуля и выбираем шаблоном модуля module_hide.tpl.
Остальное стилизируем в стилях на своё усмотрение. Такой шаблон вывода вполне подойдёт для статических блоков или навязчивой рекламы.

На этом всё. Скачать готовые файлы можно здесь.

Также вынужден заявить, что дальнейшая разработка на заказ прекращается в связи с постоянной занятостью.
+1
MegaRostov MegaRostov 7 лет назад #
Просто красиво и здорово. Суперски!!
0
Valera Valera 7 лет назад #
+

Для форума можете так сделать ?
+1
eoleg eoleg 7 лет назад #
Для дефолтного шаблона:
Олег Васильевич - адаптивность!
Джехутимери - свертываемость!
Кто следущий? smile
+2
Erwin Erwin 7 лет назад #
Ну молодцы! Ребята стараются!!!! И показывают что первую не стоит хоронить а развивать и развивать. Люди к ней привыкли.

Еще от автора

Портальный шаблон MTheme для InstantCMS 2.6.1 - глобальное обновление
Здравствуйте, дорогие пользователи InstantCMS. Рад предоставить вашему вниманию обновленный шаблон MTheme для InstantCMS 2.6.1.
Виджет "Список групп" для InstantCMS 2.5.1
Обычный виджет вывода списка групп. О нём забыли в коробке Внешний вид. Настройки: Демо | Скачать Установка стандартная.
Портальный шаблон MTheme
Здравствуйте, сообщество. Представляю Вам шаблон MTheme, разработанный для порталов на основе InstantCMS 2.5.1.
Используя этот сайт, вы соглашаетесь с тем, что мы используем файлы cookie.