Seditio.by

Создание сайта, например создание интернет магазина, всегда происходит в контакте с Заказчиком, который может в процессе работы предъявить самые неожиданные требования, первоначально отсутствовавшие в техническом задании.

Но иногда приходится иметь дело и с типовыми блоками, для которых по тем или иным причинам необходимо изменить разметку. Рассмотрим один из таких случаев.

Верстальщик имеет совершенно безобидный код типа:

<div class="block">
  <h2>Заголовок блока</h2>
  <p>Контент блока.</p>
  <p>Еще контент блока.</p>
  <p>Последний блока.</p>
</div>

По странной прихоти нам придется изменить эту совершенно правильную разметку. Заголовок сделаем div'ом, а следующие за ним элементы объединим в div-обертку.

Сперва займемся подготовкой. Создадим в каталоге со скином (или темой) папку js. В ней будут храниться наши jquery плагины и скрипт-инициализатор js.js. Подключим его через шаблон header.tpl:

<script type="text/javascript" src="./skins/{PHP.skin}/js/my.js" ></script>

Для Котонти Сиена используем файл ресурсов nemesis.rc.php:

cot_rc_add_file($cfg['themes_dir'].'/'.$usr['theme'].'/js/js.js');

Теперь займемся заголовком:

$('div.block').children('h2').contents().unwrap().wrap('<div class="blockHeader"/>');

Добавим wrapper для остальных элементов:

$('div.block').children(':gt(0)').wrapAll('<div class="blockWrapper"/>')

И окончательный вариант кода, который изменит HTML разметку под необходимые требования:

$().ready(function() {
	$('.block').each(function(){
		$(this).children('h2').contents().unwrap().wrap('<div class="blockHeader"/>');
		$(this).children(':gt(0)').wrapAll('<div class="blockWrapper"/>')
	});
});