Формирование колонок в MaxSite CMS

Вывод данных колонками довольно интересный способ. Особенно неплохо он смотрится, когда колонок несколько с разной «колоночностью».

Сама по себе верстка колонок несложная и как правило базируется на нескольких float-блоках внутри одного родителя. Что-то вроде такого:

<div class="box">
	<div class="left w33"> первый </div>
	<div class="left w33"> второй </div>
	<div class="left w33"> третий </div>
</div>

Ну и разные вариации с wrap-блоками, разными ширинами и пр.

Сложности возникают, когда необходимо организовать колонки, состоящие из нескольких вложенных блоков. Например на главной странице две колонки, в каждой из которых по 3 записи из двух рубрик. И хотя основа css-стилей останется той же, но придется организовывать некий счетчик рубрик, записей и уже от этого вставлять открывающие и закрывающие DIV'ы.

В MaxSite CMS 0.74 (но лучше использовать последний prelatest), появился отдельный php-класс, который берет на себя организацию колонок, избавляя вебмастера от необходимости вручную что-то считать и прописывать тэги/css.

Класс доступен в default-шаблоне в каталоге stock/class-columns/. Для использования необходимо скопировать файлы в свой каталог.

Покажу небольшой пример.

Первым делом нужно подключить библиотеку:

require_once(getinfo('template_dir') . 'stock/class-columns/class-columns.php');

Далее нужно определить способ формирования колонок. Если он автоматический, то при инициализации следует указать общее количество блоков в колонке. Скрипт сам будет считать когда нужно прописать нужные DIV'ы.

Для простоты зададим массив $pages вручную.

$pages = array(1, 2, 3, 4, 5);

Элементы массива будем выводить в колонках последовательно:

Выполним инициализацию:

$my_columns = new Columns(2, count($pages));

Здесь мы указали две колонки, а count() сам посчитает количество элементов массива.

Дальше мы запускаем привычный цикл foreach, в котором выводим элементы массива.

foreach ($pages as $page)
{
	$my_columns->out('left w50');
		
	pr($page); // вывод элемента
	
	$my_columns->next(); // следующая итерация
}

Метод out() отмечает начало вывода одного блока данных внутри колонки. В первом параметре можно указать css-класс этого блока. Поскольку верстка основана на DIV'ах, то для имитации клонок используется float:left. В нашем случае мы явно указываем два класса left (float:left) и w50 (width:50%) для задания ширины, но в принципе можно указать любой другой класс и задать его в css-стилях шаблона.

Дальше мы выводим данные элемента массива ($page) и в конце цикла выполняем метод next(), который сообщает о завершении текущей итерации.

После отработки цикла необходимо проверить закрытие всех DIV'ов колонки. Это делает метод close(). Ну и будет нелишним освободить переменную $my_columns.

$my_columns->close(); // завершение вывода
unset($my_columns); // удалим переменную

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

HTML-структура колонок будет следующей (на примере трех колонок):

div.columns
	div.columns-wrap
	
		div.column (указанные классы в out) column-1 column-1-of-3 column-first
			div.column-content
				содержимое блока
			/div
		/div
		
		div.column (указанные классы в out) column-2 column-2-of-3
			div.column-content
				содержимое блока
			/div
		/div
		
		div.column (указанные классы в out) column-3 column-3-of-3 column-last
			div.column-content
				содержимое блока
			/div
		/div
	/div
/div
	
<div class="clearfix"></div>

Ну и LESS/CSS-стили:

@col_padding: 15px; // расстояние между колонками
 
div.columns {
	margin-right: -@col_padding;
 
	div.column-content {
		margin-right: @col_padding;
		padding: 0 5px; // и отступ
	}
}

В общем, незатейливый простой вариант, но универсальный и вполне рабочий.

Иногда нужно сделать более сложный вывод колонками. Например в ситуации, когда в каждом блоке колонки используется свой цикл вывода записей. То есть здесь немного удобней будет явно указывать начало и конец каждой колонки. Приведу упрощенный код.

$my_columns = new Columns;
 	
$my_columns->new_col('left w50'); // старт колонки

	$pages = array(...); // массив записей
		... вывод записей ... 
	
$my_columns->end_col(); // конец колонки
	
	
$my_columns->new_col('left w50'); // старт колонки
	
	$pages = array(...); // массив записей
		... вывод записей ... 
	
$my_columns->end_col(); // конец колонки
	
$my_columns->close(); // закрыть колонки 
unset($my_columns); // удалим переменную

По сути это тоже самое, только мы явно указываем начало колонки методом new_col() и конец end_col(). Сам же вывод осуществляется между этими методами произвольно.

ps Понравилась статья? Сделай твит!