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

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

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

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

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

Как сделать.

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

Определяем положение иконок, в удобном месте помещая две кнопки — скрыть и показать. Предлагаю это делать сразу под переменной {$mod.title}:

<div class="hide-a-btn a{$mod.id}"><img src="http://cdn.flaticon.com/png/24/10/10442.png" /></div>
<div class="show-a-btn a{$mod.id}"><img src="http://cdn.flaticon.com/png/24/7/7584.png" /></div>

Далее оборачиваем тело модуля в div:

<div class="anima_hiding_block a{$mod.id}">
	<div class="{$mod.css_prefix}modulebody">{$mod.body}</div>
</div>

В конце нашего файла вставляем скрипт.

<script> 
	$(document).ready(function {/literal}function{$mod.id}{literal}() {
		$(".anima_hiding_block.a{/literal}{$mod.id}{literal}").css('display',
		localStorage.getItem('anima_hiding_block{/literal}{$mod.id}{literal}'));
		var inStorage{/literal}{$mod.id}{literal} = localStorage.getItem('anima_hiding_block{/literal}{$mod.id}{literal}');
		$(".hide-a-btn.a{/literal}{$mod.id}{literal}").click(function () {
			$( ".anima_hiding_block.a{/literal}{$mod.id}{literal}" ).slideUp( "medium", function() {
				localStorage.setItem('anima_hiding_block{/literal}{$mod.id}{literal}', 'none');
			});
		});
		$(".show-a-btn.a{/literal}{$mod.id}{literal}").click(function () {
			$( ".anima_hiding_block.a{/literal}{$mod.id}{literal}" ).slideDown( "medium", function() {
				localStorage.setItem('anima_hiding_block{/literal}{$mod.id}{literal}', 'block');
			});
		});
		if (inStorage{/literal}{$mod.id}{literal} == 'none') { 
			$(".show-a-btn.a{/literal}{$mod.id}{literal}").show();
			$(".hide-a-btn.a{/literal}{$mod.id}{literal}").hide();
		} else { 
			$(".show-a-btn.a{/literal}{$mod.id}{literal}").hide();
			$(".hide-a-btn.a{/literal}{$mod.id}{literal}").show();
		};
		$(".hide-a-btn.a{/literal}{$mod.id}{literal}").click(function () {
			$(".show-a-btn.a{/literal}{$mod.id}{literal}").show();
			$(".hide-a-btn.a{/literal}{$mod.id}{literal}").hide();   
		});
		$(".show-a-btn.a{/literal}{$mod.id}{literal}").click(function () {
			$(".hide-a-btn.a{/literal}{$mod.id}{literal}").show();
			$(".show-a-btn.a{/literal}{$mod.id}{literal}").hide();   
		});
	});
</script>

В css вписываем

.hide-a-btn, .show-a-btn {
  position:absolute;
  top:0;
  right:0;
}
.hide-a-btn img, .show-a-btn img {
  width: 16px;
  height: 16px;
  padding: 2px;
  cursor:pointer;
}
.show-a-btn img {
  background: #FF9A9A;
}
.hide-a-btn img {
  background: #5CEBB4;
}
.module {position:relative;}

Переходим в редактирование модуля и выбираем шаблоном модуля module_hide.tpl.
Остальное стилизируем в стилях на своё усмотрение. Такой шаблон вывода вполне подойдёт для статических блоков или навязчивой рекламы.

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

Также вынужден заявить, что дальнейшая разработка на заказ прекращается в связи с постоянной занятостью.

Дополнительный шаблон статьи [InstantCMS 1.10.*]

Вёрстка компонента фото для InstantCMS 1.10.6

1.10.6 шаблон модуля

4 комментария

Реклама #

R161Net 9 лет назад #

Просто красиво и здорово. Суперски!!

Valera 9 лет назад #

+

Для форума можете так сделать ?

eoleg 9 лет назад #

Для дефолтного шаблона:
Олег Васильевич - адаптивность!
Джехутимери - свертываемость!
Кто следущий? smile

Erwin 9 лет назад #

Ну молодцы! Ребята стараются!!!! И показывают что первую не стоит хоронить а развивать и развивать. Люди к ней привыкли.

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

Как сделать.

Реклама #

R161Net 9 лет назад #

Valera 9 лет назад #

eoleg 9 лет назад #

Erwin 9 лет назад #

Еще от автора

Портальный шаблон MTheme для InstantCMS 2.6.1 - глобальное обновление

Виджет "Список групп" для InstantCMS 2.5.1

Портальный шаблон MTheme

InstantCMS Team

О проекте

Поддержка

Дополнения