MaxSite.org 11 лет
Блог вебмастера о сайтостроении
Внимание! Данная запись отмечена как устаревшая и может содержать неточную или неактуальную информацию!

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

MaxSite CMS / Общие вопросыПросмотров: 12330 (190)

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

Сама по себе верстка колонок несложная и как правило базируется на нескольких 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);

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

14
25
3

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

$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 Понравилась статья? Сделай твит!

Комментариев: 1 RSS

1Вячеслав19-08-2012 15:00

Ну круто, я колонки на главной вручную верстаю, а теперь можно будет этот класс использовать.

Оставьте комментарий!

Комментарий будет опубликован после проверки. Вы соглашаетесь с правилами сайта.

(обязательно)

О сайте

Здесь вы получите самую полную информацию о создании сайтов на MaxSite CMS.