Расширение нескольких блоков

igorbond · **igorbond** 23 мар 2017, 21:14 Сообщение

Уважаемый админ, можно ли сделать то, что вы мне помогали сделать для сайта

Только в виде расширения?

CabinetAdmin · **CabinetAdmin** 24 мар 2017, 16:47 Сообщение

Это для вложения? Или просто для любого содержимого, на вроде ббкода?

igorbond · **igorbond** 24 мар 2017, 16:49 Сообщение

CabinetAdmin писал(а):Источник цитаты Это для вложения? Или просто для любого содержимого, на вроде ббкода?

ну я думаю в основном для вложений.

CabinetAdmin · **CabinetAdmin** 25 мар 2017, 09:41 Сообщение

Тогда на мой взгляд лучше всего использовать ббкод. Нужно только немного переименовать блоки, чтобы конфликтов не было, и единственное что придётся сделать - добавить скрипт непосредственно в шаблон. В твоём случае можно добавить в конец ca_scripts.js. Это связано с тем, что jquery библиотека находится в футере и использовать скрипт в самом ббкоде не получится.

Ббкод:

Код: Выделить всё

[tabsattach={TEXT1}]{TEXT2}[/tabsattach]

Замена:

Код: Выделить всё

<div class="tabs-attach-container">
	<ul class="tabs-attach">
		<li><a title="tab-attach1" href="#">Скачать без ожидания</a></li>
		<li><a title="tab-attach2" href="#">Скачать с ожиданием</a></li>
	</ul>
 
	<div class="content-tabs">
		<div id="tab-attach1">{TEXT1}</div>
		<div id="tab-attach2">{TEXT2}</div>
	</div>
</div>
<style>
.tabs-attach { overflow: hidden;width: 100%;margin: 0 !important;padding: 0;list-style: none; }
.tabs-attach  li { float: left;width: 50%; }
.tabs-attach  a { position: relative;background: #4F493D;padding: .8em 3.5em;text-decoration: none;color: #fff;display: block;text-align: center;margin: 1em 2em;z-index: 1;font-size: 15px;vertical-align: middle;-webkit-transition: background-color 0.3s, color 0.3s;transition: background-color 0.3s, color 0.3s; }
.tabs-attach  a::before { content: '';position: absolute;top: 0;left: 0;right: 0;bottom: 0;border: 2px solid #4F493D;z-index: -1;opacity: 0;-webkit-transform: scale3d(0.6, 0.6, 1);transform: scale3d(0.6, 0.6, 1);-webkit-transition: -webkit-transform 0.3s, opacity 0.3s;transition: transform 0.3s, opacity 0.3s;-webkit-transition-timing-function: cubic-bezier(0.75, 0, 0.125, 1);transition-timing-function: cubic-bezier(0.75, 0, 0.125, 1); }
.tabs-attach  a:focus { outline: 0; }
.tabs-attach  .current a { background: #DAD4CB;color: #4F493D; }
.tabs-attach  a:hover, .tabs-attach  .current a:hover {background-color: #fff;color: #4F493D; }
.tabs-attach  a:hover::before { -webkit-transform: scale3d(1, 1, 1);transform: scale3d(1, 1, 1);opacity: 1; }
.content-tabs { padding: 2em;position: relative;z-index: 2; }
</style>

Скрипт:

Код: Выделить всё

<script type="text/javascript">
$(function() {
	$(".content-tabs > div").hide();
	$('.tabs-attach a').click(function(e) {
		e.preventDefault();        
		$(".content-tabs > div").hide();
		$(".tabs-attach li").attr("class","");
		$(this).parent().attr("class","current");
		$('#' + $(this).attr('title')).fadeIn();
	});
});
</script>