Как сделать табы modx
Как реализовать табы Bootstrap в MODX REVO + MIGX
Всем ДВС!
Подскажите может кто нибудь сталкивался с реализацией табов
Всего табов 6, 4 открытые, и 2 закрытые
Сначала хотел реализовать через pdoResources и каждому ресурсу присвоить поля для отображения в табах, но не получилось т.к. tabs Bootstrap(у) необходима связь между пангинацией (вкладками) и самим телом. А тело выполнено в виде контейнера с блоками (в моем случае ресурсами).
Можно попробовать реализовать в виде дополнительных полей, но это 5 классов машин, в каждом по 5 видов мойки, в каждом виде около 5-7 полей, это около 150 штук, просто не вариант такую грамотень городить)
Может быть кто нибудь сталкивался с данной проблемой, есть готовое решение, или какая то информация по этому поводу?
Комментарии: 8
А есть в MIGX first b last tpl?
А то у меня вверстка получается
.col-md-3 * 4
.col-md-4 col-md-offset-2 * 2
Как их вывести то?
Или возможно вывести pdoResources а внутри уже MIGX?
Отбой pdoResouces нужно тогда ресурсы создавать…
Я почему и на fenom перешел, так как разные операции да еще и со сложными массивами и проверками сильно упрощаются.
Ну а в вашем случае, в чанке результата доступны плейсхолдеры (Вот документация)
С их помощью творите что вам угодно
Добрый день!
В общем нашел решение, хочу выложить возможно кому то будет полезно, т.к. я бился над этой проблемой около 17 часов…
Задача была следующая, есть прайс-лист, он выполнен в виде вкладок (tab bootstrap), нужно настроить все так, что бы конечный пользователь сайта без труда мог редактировать данные табы из админки.
Поэтому в итоге я отказался от этой затеи, посчитал что конечный пользователь не разберется, так как он очень далек от всего этого.
Написав на форуме и попутно штудируя интернет, я пришел к решению вложенности MIGX в MIXG.
Прочитав куча информации, просмотрев куча примеров и изучив несколько видео приступил к работе.
Структура MIXG полей у меня получилась следующая:
Создал три поля с типом ввода MIGX:
1) Вкладки формы class-auto:
Разметка колонок
На выходе получаем следующее: 
Устанавливаю значение для шаблона на котором я хотел выводить данное поле (главная страница).
2) Вкладки формы price-meta:
Разметка колонок Доступно для шаблонов ни чего не устанавливаю.
На выходе получаю следующее:
Теперь я могу добавить второй уровень вложенности
3) Вкладки формы price-tabs:
Разметка колонок Доступно для шаблонов ни чего не устанавливаю.
На выходе получаю следующее: 
Теперь я могу добавить третий уровень вложенности, значения цены, времени проводимых работ и услуги которые относятся к тому или другому методу мойки машины.
Все готово, теперь необходимо осуществить вызов сниппета getImageList и отобразить все на сайте.
Первым делом выводим сниппет в шаблоне на котором я хотел выводить все данный, у меня этот чанк называется [[$Price]]
Второй я создал чанк class-auto и в нем вывел
Третий чанк price-class имеет вывод, т.к. у меня по 6 элементов в теле вкладок, я решил осуществить вывод с классом col-md-2:
И последний чанк price-meta
Сначало я все делал без разметки вкладок что бы понять как и что будет выводится.
Получилась следующая структура
Я столкнулся с трудностью, которую так и не смог решить, если кто то подскажет буду очень признателен.
Трудность состоит в том, что структура кода вкладок Bootstrap выглядит следующим образом:
А я получил что то типа:
Так как родительские пункты утверждены и они не измены я подумал что заказчик вряд ли захочет изменять их название, поэтому вывод в чанке [[$Price]] я сделал следующий:
Элементы навигации я сделал статичными и вывел за пределы сниппета getImageList.
Для работоспособности прописал классы А в самом выводе тела указал следующий код:
Так как родительских пунктов у меня всего 5, и следовательно тел с элементами (табами) у меня тоже пять, я могу точно знать порядковый номер. Вывод плейсхолдера [[+idx]] соответствует прописанному классу в навигации.
Вот и все, пошаманив над стилями все получилось!
Написал для себя, что бы не забыть как делать, ну и потратил на всю работу реально 17 часов, возможно кому то это приходится.
Возможно решение корявое, но по крайней мере рабочее, лучше я со своими знаниями придумать ничего не смог!
Задача
Мы хотим использовать на нашем сайте jQuery табы для загрузки наших Ресурсов через AJAX. Как это сделать в MODx? Этот урок покажет как легко этого достичь в MODx Revolution.
Создание Ресурсов
Создайте Ресурсы, которые вы хотите загружать через табы, с пустым Шаблоном blank (или просто минимальным шаблоном с некоторыми элементами, которые вы хотите иметь всередине табов). Это даст нам уверенность в том, что мы не загружаем целую страницу с шапкой и подвалом в наш таб.
Фронт-энд загрузка
Используем jQuery комманду tabs() для создания системы загрузки на фронт-энде. Код будет выглядеть приблизительно вот так (взято из jquery UI доков):
Отлично! Страницы загружаются с помощью Ajax.
Вставляем Названия страниц в заголовки табов!
Есть несколько способов сделать это; во-первых, вы можете использовать getResources, Wayfinder, или сниппет getField.
Для getResources создайте чанк ‘myRowTpl'(или любое другое название) и укажите его название в параметре ‘tpl’, например такой:
и на вашей странице с табами:
Использование Wayfinder
Для Wayfinder создайте шаблон-чанк rowTpl, который вы можете назвать ‘myRowTpl’ (или пo-другому), например такой:
код на странице табов будет иметь следующий вид:
Использование сниппета getField
Вы можете также использовать Сниппет, например такой:
Вызовите сниппет getField следующим образом на странице с табами:
Однако решение со сниппетом getField не настолько быстрое и элегантное как решение с Wayfinder, так как оно должно делать запрос к каждому табу.
Выводы
Обратите внимание, что всё, что вы реально делаете – это привязка тегов href к реальным ID документов, также как и обычная вставка ссылок. Особенность состоит в том, что вы делаете ваш шаблон для Документов пустым (либо с минимальными элементами) поэтому он загружает лишь пропарсенный контент.
Аргнист
Wayfinder? &startId=`123` &level=`1` &rowTpl=`myRowTpl`
Wayfinder сам выводит ul по умолчанию, здесь лишние.
Viktorminator
Алексей
В принципе получилось. Есть одно но. Почему то возникает задержка для перехода на другой таб или ссылку после перехода по табам. Как решить? Пока другим решением пользуюсь, несколько не удобно, но быстро и без задержек http://ndfo.ru/index.php?id=44
Андрей
А если юзер по ссылке или другим способом попадет на такой документ с пустым шаблоном?
Максим
привет. сделал на Ajax, не очень понял зачем нужно использовать getResources, Wayfinder, или сниппет getField.
вопрос- как сделать ссылки в меню, чтобы сразу открывалась определённая вкладка?
Как сделать табы modx
Пишем интерфейс: окно редактирования подписки
Теперь нам нужно добавить окно изменения подписки, и сложность здесь в управлении подписчиками — нам нужно окно с вкладками.
На первой те же поля, что и при создании, а на второй — добавление и удаление пользователей.
Окно в вкладками
Как вы уже знаете, в ExtJS можно вкладывать одни компоненты внутрь других. Мы это видели на примере простого окна, где внутри была форма с кнопочками.
Теперь нам нужно эту же самую форму обернуть в табы. Мы работаем с Sendex.window.UpdateNewsletter и нам нужно указать xtype: ‘modx-tabs’ в параметре fields:
Редактирование подписки работает. Переходим к таблице пользователей.
Таблица пользователей
Здесь работаем по тем же правилам, что и в таблице подписок: нужно создать новый xtype и добавить для него процессоры.
Обратите внимание на
Процессоры подписчиков будут располагаться внутри директории с процессорами подписок — так логичнее. А вот параметр newsletter_id нам нужно отправить, чтобы процессор знал, от какой именно подписки показывать пользователей.
Ну а таблица подписчиков отправит на сервер id подписки, чтобы получить только нужные записи. Добавляем записи в лексикон, чистим кэш и обновляем страницу. 
Таблица появилась, нужно написать процессор выборки.
Выборка подписчиков
Первым делом нам нужен процессор getlist, который будет выдавать подписанных юзеров.
Создаём директорию subscriber внутри /processors/newsletter/ и добавляем туда файл getlist.class.php:
Ну вот, таблица больше не ругается, что «процессор не найден». Правда, выводить новому процессору еще нечего.
Нужно написать добавление пользователей.
Добавление подписчиков
Обычно такие вещи делают через всплывающие окна, но я придумал более простой и симпатичный вариант — комбобокс с пользователями вверху таблицы. Там будет поиск, и выбор при клике.
Это уже продвинутый уровень написания компонентов: там есть работа с шаблонами и событиями.
Добавляем оформление для этого комбобокса в файл /assets/components/sendex/css/mgr/main.css
Если вы забыли — он подключается у нас в контроллере index.class.php и может задавать стиль всему компоненту.
Ну а теперь самое интеерсное — добавляем новый xtype а таблицу подписчиков. Она нам нужна в tbar: 
Расширяем таблицу подписчиков — нужно добавить метод обработки выбора комбобокса: 
Последний штрих — добавляем процессор создания подписчика /core/components/sendex/processors/mgr/newsletter/subscriber/create.class.php
Удаление подписчика
Подписчика можно добавить, но нельзя удалить. Для этого добавляем в таблицу контекстное меню:
Добавляем запись в лексикон, чистим кэш и проверяем: 
Обратите внимание, что в методе удаления подписчика используется MODx.msg.confirm — это окошко, которое выводит подтверждение и 2 кнопки: да или нет. Вот документация по таким окошкам.
Добавляем в лексиконы запись sendex_subscriber_remove_confirm и проверяем: 
Если нажать «Нет» — окно просто закроется, а если «Да», то пойдёт запрос на процессор mgr/newsletter/subscriber/remove, нужно его написать:
Ну вот и всё: пользователи добавляются и удаляются. Коммит со всеми изменениями.
Заключение
В принципе, можно было бы потратить еще немного времени, и написать свой процессор для выборки юзеров с цетом подписок, но мне кажется, что в рамках обучения это лишнее. Просто имейте в виду, что вы можете написать компонент ExtJS с любой функциональностью.
На следующем уроке мы займёмся созданием и отправкой писем. Может, даже нарисуем таблицу с очередью сообщений.
Обновлено 03.12.2013
После публикации урока, в комментариях подсказали ошибку: окно изменения подписки рендерится только один раз, поэтому при открытии нескольких окон у них всегда одна и та же таблица с подписчиками.
Поэтому я изменил регистрацию окна так, чтобы существующее окошко уничтожалось, и каждый раз рендерилось новое.
Прямой эфир
paic 23 января 2021, 09:45
paic 23 января 2021, 08:50
CheD 23 января 2021, 05:42
tiptop 18 января 2021, 18:41
alexbeep 18 января 2021, 14:25
alexbeep 18 января 2021, 14:24
andrey56 15 января 2021, 12:38
Aharito 14 января 2021, 12:06 [EVO]
alexbeep 14 января 2021, 10:35
Инфо о авторе топика
Топики пользователя
Вопросы
Категории
Подразделы блога
Блоги
[REVO] Реализация табов с возможностью добавления вкладок из админки
14 комментариев
Почитать документацию по ExtJs, взять к примеру наиболее подходящии примеры и изучить их.
попробовать разные способы а потом уже задавать вопрос, если у вас что-то не получилось.
Ну и сам вопрос у вас не понятен, что за табы пользователь может добавлять?
В админке у вас пользователи или менеджеры всё же? и.т.д…
И на последок, если вам это что-то даст
и добавляем новый таб
пользователь имел возможность лично добавлять новые вкладки таба из админки?
Да не вопрос — делает новый ресурс и все.
через вафиндер, как саб-меню, просто стилями оформил бы как таб, и для каждого таба сделал свой шаблон, в котором выводил бы нужные ТВ.
По факту табы ни чем не отличаются от вывода другой информации потому делать можно на чем угодно:)
тоесть нам нужно поля: заголовок и контент — это можно реализовать или через MIGX
или вложенными дочерними документами(зависит от задачи)
далее вместо стандартного 1 вызова просто делаем 2:
1 выводим заголовки тоесть формируем закладки табов
2 выводим непосредственно контент
Как работают дополнения MODX. Часть 2 — ExtJS Panel
23 октября 2017, 12:48
Для того, чтобы добавить свои стили и скрипты на страницу дополнения, в классе modExtraManagerController есть метод loadCustomCssJs. Давайте, воспользуемся им, чтобы запустить наш первый ExtJS-скрипт.
Пример кода я взял из статьи, найденной в Яндексе по запросу «Уроки ExtJS». Единственное — нам не надо подключать скрипты и стили самого ExtJS, так как за нас это уже сделал MODX.
Чтобы каждый раз не очищать кеш браузера, можно указать дополнительный параметр у файла. Не забудьте потом удалить его, когда закончите разработку:
В ExtJS принят объектно-ориентированный подход. В JavaScript как такового ООП нет и каждый фреймворк реализует его по-своему. Если объяснить простыми словами, то всё в ExtJS является объектами: дерево ресурсов, панель редактирования ресурса, панель системных настроек. Даже любое поле или чекбокс — это объект. Каждый объект может находиться внутри другого объекта — для реализации вложенности у объектов ExtJS есть свойство items.
ExtJS items
Если у объекта есть родительский элемент, то объект будет размещён (или отрендерен) внутри этого родительского элемента. Но вы можете изменить это поведение, указав свойство renderTo — оно указывает, где отобразить конкретный объект. Обычно свойство renderTo указывается только у тех объектов, у которых нет родителя.
ExtJS xtype
В этом свойстве указывается тип объекта. По аналогии можно сказать, что xtype — это класс объекта. В зависимости от xtype у объекта могут быть дополнительные свойства, методы, может быть прописано какое-то поведение и даже набор дочерних объектов.
Вся работа с ExtJS обычно построена следующим образом:
MODX создаёт DIV с на странице компонента. Вот в нём мы и будем создавать всю внутреннюю структуру. Добавить объект в этот div можно с помощью команды MODx.add(). Загрузку нашего компонента будем производить по окончании загрузки страницы. Воспользуемся аналогом записи $(document).ready():
Обновляем страницу компонента и видим, что ничего не изменилось)) Но это на первый взгляд. Посмотрите в инспекторе кода — ExtJS вставил заголовок внутрь дива modx-panel-holder, но не напрямую, а сгенерировал целый набор вложенных дивов. Так он работает.
Преимущество ExtJS в том, что мы можем избавиться от дублирования кода и, в то же время, использовать его повторно, если нам это нужно. Для этого определим новый ExtJS-компонент — тогда мы сможем обращаться к нему из любого места и даже переопределять некоторые его свойства:
Как же нам теперь переопределить свойства нашего объекта? Нужно всего лишь передать их внутри config. У нашего объекта есть только свойство components. Давайте его и переопределим, ради эксперимента:
Компонент — это, обычно, просто контейнер, который содержит в себе объекты, которые мы собираемся использовать. Поэтому часто можно увидеть, что сам компонент не содержит элементов. А уже его дочерние объекты являются разными сущностями — страницы, панели, таблицы, окна и прочее.
Для удобства доступа к тем или иным дочерним объектам, разделим их на группы:
ExtJS TabPanel
Немного украсим нашу страничку и, заодно, посмотрим, как добавлять на неё элементы. Для начала добавим панели класс container, чтобы появились отступы от других элементов админки. А так же добавим блок с табами и описанием. У объекта табов xtype — tabpanel, но в MODX есть свой объект табов, который расширяет Ext.TabPanel. Этот объект добавляет CSS-классы, чтобы табы смотрелись более органично внутри админки. Кроме того, табы MODX могут быть ещё и вертикальными. Поэтому мы будем использовать более «навороченные» MODX-табы:
Как вы поняли, кроме документации по ExtJS, нужно смотреть ещё и в исходный код MODX. В основном, все стандартные ExtJS-объекты в MODX лежат в папке /manager/assets/modext/widgets/
Примеры кода у нас начали разбухать, поэтому я буду пропускать некоторые строки, будьте внимательны, чтобы не затереть нужное.
В следующей статье «оживим» наш интерфейс — рассмотрим отправку запросов и обработку ответа.