Класс xtables\base\Menu
обеспечивает создание множества меню двух типов:
'vertical'
- вертикальное меню в виде списка ul
, поддерживающее вложенность без ограничения;
'popup'
- горизонтальное меню в виде кнопок с одним вложенным уровнем элементов.
'vertical'
По умолчанию, если специально не определено в настройках, определяется данный тип меню.
Функционирование меню обеспечивается файлом xtables.js
.
Меню поддерживает уровень вложенности пунктов без ограничений. Состояние пуктов меню (свернут, раскрыт) запоминается в cookie
.
Меню поддерживает разграничение на уровни доступа и показывает только те пункты, которые доступны конкретному пользователю
(то есть у всех групп пункты могут отличаться).
Данное меню поддеживает уведомления (алерты).
Для использования меню необходимо создать настройки в /config/menu
, а также вывести меню на страницу.
Вывод меню может быть осуществлен двумя путями:
xtables\base\Layout
. См. Layout (данный способ
является предпочтительным);
xtables\base\Menu
.
Для вызова через Layout
нужно определить массив menus
с названиями меню, которые должны быть подключены,
в настройках лейаутов в файле /config/Layouts/all-layouts.php
либо передав его в конструктор класса Layout
при его вызове в конкретном классе проекта.
Создание меню через прямой вызов класса Menu
(каждый экземпляр класса создает одно меню):
use xtables/base/Menu;
$menu = new Menu(['menu' => 'menu_name'])
return $menu->get();
Для настройки в файле /config/menu/menus.php
нужно определить правила для всех используемых меню путем создания
массива, ключами в котором являются названия используемых меню, а значениями настройки для каждого меню.
config/menu
в папке с названием,В каждой папке, соответствующей по названию названию меню, определенному в настройках, должны быть созданы три файла:
all-items.php
- массив со всеми возможными пунктами меню;
handler.php
- файл-обработчик, где указываются правила определения уровня меню;
alerts.php
необязательно
- этот файл нужно создать, если в меню используется вывод алертов (уведомлений).
levels
- массив с названиями уровней доступа меню с указанием названия файла (пути от папки,
соответствующей названию меню) с составом этого уровня для каждого уровня;
type
- тип меню: popup
- горизонтальное меню; для использования вертикального меню можно
не определять данный параметр либо указать vertical
.
btn_color_class
- цвет кнопок для горизонтального (popup) меню; один из классов css фреймворка
Bootstrap:
btn-success
, btn-warning
...
fa_icons
необязательно - (для вертикального меню)
массив с наименованиями иконок Font awesome:
closed
- иконка для обозначения закрытой группы пуктов, по умолчанию,
если не определена, используется ;
opened
- иконка для обозначения открытой группы пунктов, по умолчанию, если не определена,
используется
fa_icons
с пустыми строками для параметров opened, closed
.
'fa_icons' => [
'opened' => '',
'closed' => ''
]
'general' => [ // menu name
'levels' => [
'free' => 'level-free.php',
],
'type' => 'vertical' // popup | vertical; default vertical
'fa_icons' => [
'opened' => 'fa-hand-paper-o', // by default if not set fa-chevron-down
'closed' => 'fa-hand-rock-o' // by default if not set fa-chevron-right
]
]
html
теги для отображения иконок или иного содержимого, декорации содержимого.
Например:
return [
'basic' => '<b>Общие сведения</b>',
'about' => '<a href="/app/#about"><i class="fa fa-list-alt" aria-hidden="true"></i> О приложении</a>',
'depend' => '<a href="/app/#dependencies"><i class="fa fa-list-alt" aria-hidden="true"></i> Зависимости</a>',
'str' => '<a href="/app/#structure"><i class="fa fa-list-alt" aria-hidden="true"></i> Структура</a>',
'install' => '<a href="/app/#install"><i class="fa fa-list-alt" aria-hidden="true"></i> Установка</a>',
'core' => '<b>xTables core</b>',
'index' => '<a href="/app/core/#input-script"><i class="fa fa-list-alt" aria-hidden="true"></i> Входной скрипт</a>',
'main_class' => '<a href="/app/core/#xtables"><i class="fa fa-list-alt" aria-hidden="true"></i> Главный класс</a>'
]
levels
- файлы, соответствующие указанным в параметре 'levels'
файла menus.php
файлы содержимого групп пользователей, например: level-free.php
;
ключи в массиве соответствуют заголовкам пунктов меню с группами элементов внутри, по которым обеспечивается
раскрытие и сворачивание, значения соответствуют простым элементам меню
пунктов меню в массиве с ключом 'items'
.
Например:
return [
'basic' => [
'about',
'depend',
'str',
'install'
]
];
menu-alerts.php
- файл с данными алертов (уведомлений меню, например, о новых записях);
в массиве в качестве ключей должны указываться те же имена, что выбраны как ключи для пунктов меню в файле
all-items.php
, в приведенном примере это цифры;
в качестве значений массива могут использоваться:
callable
функции, которые указываются как строка и будут возвращать какое-то значение уведомления в html
тегах;
html
теги с иконками, цифрами, текстом, другим содержимым;
Например:
return [
'about' => 'someClass::menuAlertTest', // callable function
'install' => '<span class="glyphicon glyphicon-star"></span>', // some icon
'str' => '<span class="label label-success">new</span>' // text or other
];
ajaxDispatcher
, что не замедляет загрузку страницы.
handler.php
- файл обработчик, который должен возвращать массив уровней доступа (групп пользователей), названия которых
должны соответствовать тем, что определены в all-level-groups.php; для создания правил может использоваться сессионная
переменная Session::get('ses_access')
, которая содержит уровень доступа соответствующего пользователя
после авторизации.
Например:
if (Session::exists('ses_access')) {
if (Session::get('ses_access') === 'group1') {
return ['group1'];
} elseif (Session::get('ses_access') === 'group2') {
return ['group2', 'group1'];
} elseif (Session::get('ses_access') === 'group3') {
return ['group3'];
} else {
return [];
}
}
Для настройки внешнего вида вертикального меню определите css
классы в файле /css/style.css
или переопределите их.
.app-menu {
padding: 10px 10px;
}
.app-menu li {
list-style-type: none;
}
.app-menu ul {
margin-left: 5px;
padding-left: 5px;
}
.app-menu a, .app-menu div {
padding: 0 10px;
color: #777777;
text-transform: uppercase;
line-height: 2.2;
text-decoration: none;
}
.app-menu a:hover, .app-menu div:hover {
text-decoration: none;
color: #000;
cursor: pointer
}
Горизонтальное меню построено на классах css фреймворка Bootstrap
.
Можно определить цвет кнопок путем указания в настройках меню 'btn_color_class'
класса для кнопок btn-success
и т.д.
Вертикальное меню с алертами
нажмите на пункты для раскрытия вложенных пунктов
перезагрузите страницу, чтобы увидеть сохранение состояния меню
Горизонтальное меню (popup menu)
Класс xtables\base\PopupMenu
используется для создания простого горизонтального меню.
Класс xtables\base\Menu
использует данный класс для построения своего более сложного горизонтального меню.
Для использования нужно создать экземпляр класса xtables\base\PopupMenu
и воспользоваться тремя доступными методами:
setBtn($btn)
- добавить кнопку; может быть передан массив с настройками или строка с содержанием кнопки (названием и ссылкой);
setAdditional($additional)
- передать дополнительные данные в виде строки (например, js для меню или какой-то текст сбоку от меню);
get()
- получить готовое меню.
При добавлении кнопки методом setBtn($btn)
могут быть переданы параметры в массиве:
use xtables\base\PopupMenu;
$popup = new PopupMenu();
$btn = [
'title' => 'Some title',
'btn_color_class' => 'btn-primary',
'items' => [
'<a href="/some_url">Item name</a>',
'divider',
'<a href="/some_url2">Item name2</a>',
],
// ... additional params
];
$popup->setBtn($btn);
title (string)
Название группы. По умолчанию, если не определено, используется иконка .
'title' => 'Some title'
subtitle (string)
Название внутри открывающегося списка меню.
'subtitle' => 'Some title'
btn_color_class (string)
Класс css фреймворка Bootstrap
для определения цвета кнопки.
'btn_color_class' => 'btn-primary'
dropup (boolean)
Если необходимо открытие меню вверх, то нужно включить данный параметр со значеним true
.
'dropup' => true
items (array)
Массив с элементами вложенного меню (простые названия с ссылками); для добавления разделителя между
пунктами используйте значение'divider'
.
'items' => [
'<a href="/some_url">Item name</a>',
'divider',
'<a href="/some_url2">Item name2</a>',
]
access (array)
Массив с группами пользователей, которым показывается кнопка; если не нужно ограничение, то не нужно определять данный параметр.
'access' => [
'SomeAccessLevel',
'SomeAccessLevel2'
]