Задача
Мы хотим использовать на нашем сайте jQuery табы для загрузки наших Ресурсов через AJAX. Как это сделать в MODx? Этот урок покажет как легко этого достичь в MODx Revolution.
Создание Ресурсов****
Создайте Ресурсы, которые вы хотите загружать через табы, с пустым Шаблоном blank (или просто минимальным шаблоном с некоторыми элементами, которые вы хотите иметь всередине табов). Это даст нам уверенность в том, что мы не загружаем целую страницу с шапкой и подвалом в наш таб.
Фронт-энд загрузка****
Используем jQuery комманду tabs() для создания системы загрузки на фронт-энде. Код будет выглядеть приблизительно вот так (взято из jquery UI доков):
<script type=“text/javascript”> $(function() { $("#tabs").tabs(); }); </script>
<div id=“tabs”> <ul> <li><a href="[[~92]]">Resource with ID 92</a></li> <li><a href="[[~546]]">Resource with ID 546</a></li> <li><a href="[[~123]]">Resource with ID 123</a></li> </ul> </div>
Отлично! Страницы загружаются с помощью Ajax.
Вставляем Названия страниц в заголовки табов!
Есть несколько способов сделать это; во-первых, вы можете использовать getResources, Wayfinder, или сниппет getField.
Использование getResources
Для getResources создайте чанк ‘myRowTpl’(или любое другое название) и укажите его название в параметре ’tpl’, например такой:
<li id="[[+id]]"><a href="[[~[[+id]]]]" title="[[+longtitle]]">[[+pagetitle]]</a></li> и на вашей странице с табами:
<script type=“text/javascript”> $(function() { $("#tabs").tabs(); }); </script>
<div id=“tabs”>
<ul>
[[getResources? &parents=123 &depth=1 &tpl=myRowTpl &includeContent=1 &includeTVs=1]]
</ul>
</div>
Использование Wayfinder
Для Wayfinder создайте шаблон-чанк rowTpl, который вы можете назвать ‘myRowTpl’ (или пo-другому), например такой:
<li[[+wf.id]][[+wf.classes]]><a href="[[+wf.link]]" title="[[+wf.title]]">[[+wf.linktext]]</a></li> код на странице табов будет иметь следующий вид:
<script type=“text/javascript”> $(function() { $("#tabs").tabs(); }); </script>
<div id=“tabs”>
[[Wayfinder? &startId=123 &level=1 &rowTpl=myRowTpl]]
</div>
Использование сниппета getField
Вы можете также использовать Сниппет, например такой:
<?php /**
- Берёт поле из указанного Ресурса / / Установка некоторых свойств по-умолчанию */ $id = $modx->getOption(‘id’,$scriptProperties,false); $field = $modx->getOption(‘field’,$scriptProperties,‘pagetitle’);
if ($id) { /* берёт объект ресурс / $resource = $modx->getObject(‘modResource’,$id); if ($resource == null) return ‘’; } else { / Если id не определён использует текущий doc */ $resource =& $modx->resource; }
/* Возврат значения поля */ return $resource->get($field); ?>
Вызовите сниппет getField следующим образом на странице с табами:
<script type=“text/javascript”> $(function() { $("#tabs").tabs(); }); </script>
<div id=“tabs”>
<ul>
<li><a href="[[~92]]">[[getField? &id=92 &field=pagetitle]]</a></li>
<li><a href="[[~546]]">[[getField? &id=546 &field=pagetitle]]</a></li>
<li><a href="[[~123]]">[[getField? &id=123 &field=pagetitle]]</a></li>
</ul>
</div>
Однако решение со сниппетом getField не настолько быстрое и элегантное как решение с Wayfinder, так как оно должно делать запрос к каждому табу.
Выводы
Обратите внимание, что всё, что вы реально делаете – это привязка тегов href к реальным ID документов, также как и обычная вставка ссылок. Особенность состоит в том, что вы делаете ваш шаблон для Документов пустым (либо с минимальными элементами) поэтому он загружает лишь пропарсенный контент.