FFCMS Wiki

Официальная документация разработчика и администратора

Инструменты пользователя

Инструменты сайта


helper:bootstrap:nav

Bootstrap помощник: Навигация (Nav)

Помощник навигация (nav) предназначен для быстрой и безопасной генерации меню и элементов навигации по структуре фреймворка bootstrap. По своей сущности, помощник навигация наследует реализации помощника списки (Listing) с дополненными значениями по умолчанию для генерации bootstrap совместимого html кода.

Класс Nav содержит один статический метод - display(array) в качестве аргументов которого принимается массив параметров генерируемого меню.

Введение в использование

Рассмотрим простой пример использования nav для генерации меню:

Nav::display([
    'property' => ['class' => 'nav-tabs'],
    'tabAnchor' => 'n',
    'items' => [
        ['type' => 'link', 'text' => 'Link to main', 'link' => ['main/index', 'test']],
        ['type' => 'tab', 'text' => 'Tab 1', 'content' => 'This is tab 1 content with allowed <s>html</s> data!', 'htmlContent' => true],
        ['type' => 'tab', 'text' => 'Tab 2', 'content' => 'This is tab 2 content'],
        ['type' => 'tab', 'text' => 'Tab 3', 'content' => 'This is a tab 3 content']
    ]
]);

в результате интерпритации данного кода будет сгенерирован следующий html каркас:

    <ul class="nav nav-tabs">
        <li><a href="{$base_url}/main/index/test">Link to main</a></li>
        <li role="presentation" class="active"><a aria-controls="n1" role="tab" data-toggle="tab" href="#n1">Tab 1</a></li>
        <li role="presentation"><a aria-controls="n2" role="tab" data-toggle="tab" href="#n2">Tab 2</a></li>
        <li role="presentation"><a aria-controls="n3" role="tab" data-toggle="tab" href="#n3">Tab 3</a></li>
    </ul>
    <div class="tab-content">
        <div role="tabpanel" class="tab-pane fade in active" id="n1">This is tab 1 content with allowed html data!</div>
        <div role="tabpanel" class="tab-pane fade" id="n2">This is tab 2 content</div>
        <div role="tabpanel" class="tab-pane fade" id="n3">This is a tab 3 content</div>
    </div>

который будет иметь следующий вид:

Данный пример требует пояснения. В данном случае мы использовали класс Nav для генерации элемента bootstrap menu в котором 1ый элемент является обычной ссылкой, а последующие 3 - контентными «табами».

Передаваемый массив параметров в метод Nav::display(array()) может иметь следующие атрибуты(ключи):

  • property - необязательный параметр, устанавливает атрибуты корневого тега <ul[properties]></ul>
  • tabAnchor - необязательный параметр, устанавливает имя для tab'ов, если они обозначены в массиве items
  • blockProperty - необязательный параметр, устанавливает глобальные атрибуты для основного блока div
  • items - обязательный массив параметров, обозначает множество элементов отображаемого меню

Массив элементов меню - items

Данный атрибут является основным для генерации элементов меню. Именно в атрибуте items должно быть определено все множество элементов меню. Рассмотрим элемент из примера выше:

    'items' => [
        ['type' => 'link', 'text' => 'Link to main', 'link' => ['main/index', 'test']],
        ['type' => 'tab', 'text' => 'Tab 1', 'content' => 'This is tab 1 content with allowed <s>html</s> data!', 'htmlContent' => true],
        ['type' => 'tab', 'text' => 'Tab 2', 'content' => 'This is tab 2 content'],
        ['type' => 'tab', 'text' => 'Tab 3', 'content' => 'This is a tab 3 content']
    ]

Как видно, атрибут items представляет собой двухуровневый массив: в качестве первого уровня представлен список элементов, а в качестве второго - конкретные атрибуты данного элемента. Рассмотрим конкретный элемент меню:

['type' => 'link', 'text' => 'Link to main', 'link' => ['main/index', 'test']]

данное меню является ссылкой (link) на контроллер/действие/add «main/index/test» , с текстом «Link to main». Для каждого элемента меню могут быть назначены следующие атрибуты:

  • type - тип элемента меню. Допустимые значения: link, tab, dropdown
  • text - текст элемента меню
  • link - массив указателя ссылки
  • content - html-содержимое вкладки, если type = 'tab'
  • все доступные атрибуты для элементов списка Listing

Следует помнить, что помощник Nav наследует свои возможности от помощника Listing, поэтому останавливаться более подробно на этих возможностях снова мы не будем.

Специфичные элементы меню

Более подробно следует остановиться на таких специфичных элементах меню как tab'ы и dropdown'ы, которые очень часто могут потребоваться для реализации классических функциональных элементов сайта.

Следует помнить, что именно из-за специфических реализаций данный помощник выделен отдельно от классических списков Listing!

Как вы знаете, dropdown'ы позволяют объединить ту или иную группу элементов меню в один элемент. Более подробные html/js/css примеры есть на сайте bootstrap. Для генерации таких списков в элементах меню при помощи помощника навигация необходимо использовать следующую конструкцию:

'items' => [
        ['type' => 'dropdown', 'text' => 'Test dropdown', 'items' => [
            ['type' => 'link', 'text' => 'Test 1 tab', 'link' => ['main/test']],
            ['type' => 'link', 'text' => 'Google link', 'link' => 'https://google.com']
        ]]
]

Как видно из примера, родительский элемент обозначается как type=dropdown, а в атрибуте items указываются все входящие в него элементы выпадающего списка с уже знакомыми вам атрибутами. Выглядит данная конструкция следующим образом:

Кроме выпадающих сгруппированных элементов, вам могут понадобиться элементы меню с «вкладками» (tabs). Вкладки позволяют пользователю переключаться между разделами меню без перезагрузки страницы и видеть какой-либо динамично изменяющийся контент, в зависимости от выбранной вкладки. Более подробные html/css/js примеры есть на сайте bootstrap.

Генерация вкладок с некоторым содержимым была приведена выше:

        ['type' => 'tab', 'text' => 'Tab 1', 'content' => 'This is tab 1 content with allowed <s>html</s> data!', 'htmlContent' => true],
        ['type' => 'tab', 'text' => 'Tab 2', 'content' => 'This is tab 2 content'],
        ['type' => 'tab', 'text' => 'Tab 3', 'content' => 'This is a tab 3 content']

Для обозначения элемента меню как «вкладка» используется атрибут type=tab, а в атрибуте content устанавливается содержимое данной вкладки.

helper/bootstrap/nav.txt · Последние изменения: 2017/09/06 10:58 — zenn