Создание сайта, например создание интернет магазина, всегда происходит в контакте с Заказчиком, который может в процессе работы предъявить самые неожиданные требования, первоначально отсутствовавшие в техническом задании.
Но иногда приходится иметь дело и с типовыми блоками, для которых по тем или иным причинам необходимо изменить разметку. Рассмотрим один из таких случаев.
Верстальщик имеет совершенно безобидный код типа:
<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"/>')
});
});
Заинтересовались? Звоните нам по телефонам +375 (29) 774-35-89 и +375 (44) 774-35-89 в Минске. Мы будем рады помочь Вам в реализации Вашего проекта.