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

1236
Здравствуйте.

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

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

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

Как сделать.

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

Определяем положение иконок, в удобном месте помещая две кнопки - скрыть и показать. Предлагаю это делать сразу под переменной {$mod.title}:
Код HTML:
  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:
Код HTML:
  1. <div class="anima_hiding_block a{$mod.id}">
  2. <div class="{$mod.css_prefix}modulebody">{$mod.body}</div>
  3. </div>
В конце нашего файла вставляем скрипт.

Код JAVASCRIPT:
  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 вписываем

Код 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.
Остальное стилизируем в стилях на своё усмотрение. Такой шаблон вывода вполне подойдёт для статических блоков или навязчивой рекламы.

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

Также вынужден заявить, что дальнейшая разработка на заказ прекращается в связи с постоянной занятостью.
Вёрстка компонента фото для InstantCMS 1.10.6 | Дополнительный шаблон статьи [InstantCMS 1.10.*]
Комментарии (4)
MegaRostov 28 марта 2015 в 09:03 +1
Просто красиво и здорово. Суперски!!
Valera 28 марта 2015 в 10:10 0
+

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