Реализация графического меню при помощи модуля GBFilePicker

UniiX · Post by **UniiX** » Sat Mar 16, 2013 10:21 am

Реализация графического меню при помощи модуля GBFilePicker и плагина content_dump.

Для начала необходимо вставить в шаблон страницы следующею строчку:

Code: Select all

{content_module block="menu_icon" module="GBFilePicker" mode='browser' label="Изображение для меню " dir="images/menu_icon" assign="menu_icon"}

Этот код позволяет прикрепить к странице контента изображение при помощи модуля GBFilePicker и естественно он настраивается согласно вашим нуждам, в моем примере подключен только режим обозревателя и подключен путь до директории где будут лежать загруженные изображения.

Должно получиться что то вроде этого:

Code: Select all

{content_module block="menu_icon" module="GBFilePicker" mode='browser' label="Изображение для меню " dir="images/menu_icon" assign="menu_icon"}
<!DOCTYPE html>
<__html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>{title}</title>

Далее идем в шаблон вашего меню (Менеджер меню).

Здесь уже необходимо получить массив данных о странице контента:

Code: Select all

{content_dump assign="icon_menu_arr" depth="1" extensions="menu_icon"}

Эта строчка записывает в переменную $icon_menu массив данных а параметр depth="1" показывает что нужно брать контент только первого уровня, можно конечно указать и так depth="1,2" брать первый и второй уровень и так далее.

Последний штрих, это добавить где будет выводиться ваше изображение, а делается это путем ставки тега img

Code: Select all

<img src="/uploads/{$icon_menu_arr[$node->index]->extensions->menu_icon->data}" alt=""/>

Естественно это самый элементарный пример вы так же можете делать вставку изображения путем добавления стиля например:

Code: Select all

<li class="" style="background: url(/uploads/{$icon_menu_arr[$node->index]->extensions->menu_icon->data}") no-repeat"><a href="{$node->url}"><span>{$node->menutext}</span></a></li>

И конечно можно делать проверку на наличие изображения:

Code: Select all

{if $icon_menu_arr[$node->index]->extensions->menu_icon->data}
<img src="/uploads/{$icon_menu_arr[$node->index]->extensions->menu_icon->data}" alt=""/>
{/if}

Вот отрывок моего варианта меню (сырого конечно но все же работоспособного) за основу которого взят шаблон меню по умолчанию.

Code: Select all

{assign var='number_of_levels' value=10000}
{if isset($menuparams.number_of_levels)}
  {assign var='number_of_levels' value=$menuparams.number_of_levels}
{/if}
[b]{content_dump assign="icon_menu_arr" depth="1" extensions="menu_icon"}[/b]
{if $count > 0}
<ul>
{foreach from=$nodelist item=node}
{if $node->depth > $node->prevdepth}
{repeat string="<ul>" times=$node->depth-$node->prevdepth}
{elseif $node->depth < $node->prevdepth}
{repeat string="</li></ul>" times=$node->prevdepth-$node->depth}
</li>
{elseif $node->index > 0}</li>
{/if}

{if $node->parent == true or $node->current == true}
  {assign var='classes' value='menuactive'}
  {if $node->parent == true}
    {assign var='classes' value='menuactive menuparent'}
  {/if}
  {if $node->children_exist == true and $node->depth < $number_of_levels}
    {assign var='classes' value=$classes|cat:' parent'}
  {/if}
  <li class="{$classes}"><img src="/uploads/{$icon_menu_arr[$node->index]->extensions->menu_icon->data}" alt=""/><a class="{$classes}" href="{$node->url}"><span>{$node->menutext}</span></a>

{elseif $node->children_exist == true and $node->depth < $number_of_levels and $node->type != 'sectionheader' and $node->type != 'separator'}
<li class="parent"><a class="parent" href="{$node->url}"><span>{$node->menutext}</span></a>

{elseif $node->current == true}
<li class="currentpage"><h3><span>{$node->menutext}</span></h3>

{elseif $node->type == 'sectionheader'}
<li class="sectionheader"><span>{$node->menutext}</span>

{elseif $node->type == 'separator'}
<li class="separator" style="list-style-type: none;"> <hr />

{else}
<li class=""><img src="/uploads/{$icon_menu_arr[$node->index]->extensions->menu_icon->data}" alt=""/><a href="{$node->url}"><span>{$node->menutext}</span></a>

{/if}

{/foreach}
{repeat string="</li></ul>" times=$node->depth-1}</li>
</ul>
{/if}

CMS Made Simple Forums

Реализация графического меню при помощи модуля GBFilePicker

Помогла ли вам статья?

Реализация графического меню при помощи модуля GBFilePicker