yii2 активный пункт меню
Управление меню в Yii2. Часть 1
Дата публикации: 2017-09-08
От автора: приветствую вас, друзья. Мы продолжаем цикл статей, посвященных знакомству с фреймворком Yii2. В этой статье мы с вами рассмотрим работу с виджетом Menu фреймворка Yii2. Данный виджет позволяет создавать и управлять меню в Yii2.
Итак, в предыдущих статьях мы с вами перенесли сверстанный шаблон в структуру фреймворка. Давайте на примере внедренного шаблона рассмотрим работу с виджетом меню, который предлагает нам фреймворк из коробки. Вот как выглядит меню в шаблоне сейчас:
Как видим, это стандартный список, при помощи которого и принято делать типовые меню. В нем есть активный пункт, для указания которого используется класс active. Также такой список удобен для реализации многоуровневого, выпадающего или вертикального меню. Для этого достаточно немного изменить верстку, добавив вложенные пункты для многоуровневого меню и изменить стили для получения необходимого формата меню.
Фреймворк Yii2. Быстрый старт
Получите курс и узнайте, как с помощью фреймворка Yii2 разрабатывать веб-приложения на примере блога
На самом деле при реализации меню на сайте совсем не обязательно для этого использовать виджет. Мы вполне можем оставить имеющуюся верстку, изменив в ней ссылки и переименовав пункты. Но можем и воспользоваться при желании виджетом. Давайте попробуем это сделать.
Используя виджет меню, нам необходимо передать массив параметров, ключевым из которых является элемент items, в нем перечислены пункты меню. Элемент items в свою очередь также является массивом, в котором каждый из пунктов меню представлен в виде массива с элементами label и url. Label – наименование пункта меню, url – ссылка. Итого, вызов виджета в шаблоне будет таким:
Несколько полезных приемов для разработки на Yii 2
Для начала создадим простое CRUD-приложение с одной моделью Product.
Несколько атрибутов в одной колонке грида
Допустим, мы хотим объединить колонки «Created At» и «Updated At» в одну, для экономии места, но при этом хотим сохранить конфигурацию колонок и сортировку по ним. Для этого надо создать отдельный небольшой класс для комбинированной колонки, унаследованный от обычного «DataColumn» и указать его в конфигурации.
Сделаем, чтобы сортировка по умолчанию была по id DESC.
Исправление навигации для активных пунктов меню
Добавим управление пользователями. Поставим модуль «dektrium/yii2-user», применим миграции, добавим пользователя admin (с паролем 123456, как же без него), поправим ссылки в меню в «layouts/main.php». Зайдем на страницу «/user/login». Ссылка «Login» в меню неактивна.
Это происходит потому, что модуль добавляет свои правила роутинга. Чтобы такие ссылки были активными, надо указывать в них результирующий URL, который получится после применения этих правил (в данном случае «/user/security/login»). Нам это не подходит, потому что зачем нам тогда роуты для красивых URL.
Добавим TimestampBehavior в модель Product
Пока что все работает нормально. Мы к этому еще вернемся.
Маппинг таблиц на другие названия
Сделаем приложение чуть сложнее. Добавим хранение сессий в базе данных и RBAC для управления правами доступа.
Также добавим в таблицу «product» колонки «user_id» и «category_id».
Заглянем в нашу базу данных
Что-то много у нас таблиц стало, так сразу и не поймешь что откуда взялось, какие к приложению относятся, а какие к второстепенным модулям. Что если их переименовать? И желательно при этом ничего не менять в коде.
название таблицы «__user__user» выглядит немного странно, можно ее не переименовывать, здесь просто для наглядности
Переименование таблиц не нужно делать миграцией. Если склонировать проект с такими настройками и запустить миграции, то таблицы будут созданы уже с новыми именами. Также довольно сложно переименовать в миграции саму таблицу «migration». Можно потанцевать с бубном вокруг копирования таблицы и проверки наличия ее с новым именем, но вряд ли это оправдано.
Почему TimestampBehavior обновляет свойство updated_at, если ничего не изменено
Зайдем в редактирование какого-нибудь продукта и установим пользователя и категорию. Заметим, что свойство «Updated At» обновилось. Теперь снова зайдем в редактирование и, ничего не меняя, нажмем «Сохранить». Свойство «Updated At» снова обновилось. Так быть не должно.
Чтобы это исправить, надо добавить фильтрацию значений в метод rules().
Для свойств, которые not null, все довольно просто, приводим их к int. Для свойств, которые могут быть null, надо написать callback. В нашем приложении второй вариант.
Bootstrap DateTimePicker — 2 разных формата для показа в интерфейсе и для отправки значения на сервер
Но есть одна проблема, в них нельзя задать разные форматы для отображения и для хранения значения. В результате на сервер может отправляться что-то типа «14 junio 2016, mar.». Исправить это можно, добавив в рендеринг hidden-поле с новым форматом. В Datetimepicker можно задать опции linkField и linkFormat, а в Datepicker надо ловить событие changeDate и форматировать вручную. Также надо обрабатывать нажатие на кнопку очистки значения.
Yii Framework
активный пункт меню(CMenu)
активный пункт меню(CMenu)
Сообщение Bupyc » 2010.02.16, 16:15
Re: активный пункт меню(CMenu)
Сообщение samdark » 2010.02.16, 18:20
Re: активный пункт меню(CMenu)
Сообщение slavcodev » 2010.02.16, 18:24
Re: активный пункт меню(CMenu)
Сообщение greatdane » 2010.11.05, 19:52
Re: активный пункт меню(CMenu)
Сообщение BuCeFaL » 2010.11.05, 20:08
когда то делал в связи с хитрой версткой.
Re: активный пункт меню(CMenu)
Сообщение greatdane » 2010.11.05, 20:28
Re: активный пункт меню(CMenu)
Сообщение C0vax » 2012.10.24, 12:38
В голову приходит брать напрямую строку запроса из url и сравнивать с ссылкой на пункте.. но насколько это правильно с позиции Yii-style? )) Есть ли какие встроенные методы для получения строки url и сравнения двух url между собой?
Создание древовидного меню в yii2 при хранении элементов в БД методом «Nested Sets».
Данному виджету необходимо передать массив элементов в определенном формате, например:
Для формирования массива из данных хранимых в БД по методу Nested Sets используем специальный класс NestedSetsTree, который можно найти на разных сайтах в слегка измененном виде. Я так же внес некоторые коррективы в его работу. Разместить класс можно в common/services/NestedSetsTree.php т.к. он может потребовать для меню и backend и frontend (да и не только для меню). Для фреймворка версии basic можно просто создать общий каталог «services» в корне проекта.
В результате работы метода tree получаем готовый массив, тем не менее его нужно слегка подкорректировать, т.к. у виджета yii\widgets\Menu есть свои требования.
Для корректировки создадим свой класс отнаследовав его от NestedSetsTree. Для примера я создам меню frontend, поэтому разместим в frontend/services/NestedSetsTreeMenu.php :
Т.к.корневой элемент в меню не используется и создавался только для хранения данных в БД методом Nested Sets, тут мы его удаляем строкой
Осталось только вывести виджет в нужном месте, например где-то в frontend/views/layouts/main.php :
Строкой
передаем массив данных для меню и далее я указал некоторые опции, которые можно поменять или удалить. Подробнее про них можно почитать непосредственно в файле виджета vendor/yiisoft/yii2/widgets/Menu.php
Указание метода запроса для пункта меню.
Т.к. меню это ссылки с названиями элементов, обычно осуществляется GET запрос для перехода на нужную страницу, но иногда необходимо отправить запрос типа POST или другой.
В yii2 используется VerbFilter, который указывает каким типом запроса должен вызываться тот или иной метод. Так, например, в frontend/controllers/SiteController.php в методе behaviors можно увидить:
Т.е. при вызове действия ‘logout‘ необходим POST запрос. Просто перейдя по ссылке «/logout» получим исключение « MethodNotAllowedHttpException ».
Тут я добавил всего одну строку
Теперь когда код виджета будет создавать ссылку, он заменит на значение указанное в элементе массива «method».
Добавим этот элемент в массив, для этого создадим еще один метод в классе NestedSetsTreeMenu:
Осталось подключить свой класс виджета, который был переопределен:
Тут я указал новое пространство имен класса Menu и дописал свойство « linkTemplate» виджета, которое определяет как должна выглядеть ссылка, добавил в нее атрибут «data-method».
Итак, в зависимости от структуры вашего меню, вывод виджета без оформления стилей CSS может выглядеть, например, так:
Yii2 всплывающее/скрывающееся боковое меню
Начал изучать фреймворк Yii2.
Хочу сделать боковое меню, которое появлялось бы при клике. Как, например, на тостере. Там при увеличении масштаба страницы боковое меню исчезает, и появляется значок, при клике на него меню появляется.
Я хочу сделать, чтобы меню всегда была скрыто.
Например, меню хейдера в шаблоне на Yii2 реализовано следующим образом:
Как инструментами Yii2, Bootstrap реализовать такое меню?
Рылся в интернете, толком ничего не нашел.
Могу, конечно, написать всплывающее/скрывающееся боковое меню с нуля (HTML+CSS+JS), но боюсь изобрести велосипед.
2 ответа 2
Вопрос касается исключительно верстки. Так как в yii2 по умолчанию подключен bootstrap, то и делать проще на bootstrap. Крайне советую прочитать всю документацию, особенно про grid>> Так например:
Будет скрыт на маленьких дисплеях и совсем не важно, что в нем. Хоть меню, хоть калькулятор дырок в сыре, хоть фотография трансформатора. Для того что бы по клику на какую-то кнопку делать его видимым, юзаем jquery, достаточно убирать class hidden-xs, например:
Как видите не слова о yii. Тут вопрос знаний css, bootstrap и jquery только. Прежде чем использовать yii2, крайне рекомендую хотя бы немного разобраться с ними.