Jump to main content Jump to doc navigation

Проблема

Мы хотим на нашем сайте использовать jQuery's tabs загрузить наши ресурсы через AJAX. Как мы это делаем в MODX? Из этого туториала вы узнаете, насколько легко это сделать в MODX Revolution.

Создание ресурсов

В ресурсах, которые вы хотите загрузить через вкладки, вам нужно просто создать все свои ресурсы с шаблоном пустой (или минимальным шаблоном, содержащим только то, что вы хотите внутри вкладок). Это гарантирует, что мы не загружаем ничего, кроме нужного материала - вы не захотите загружать верхний и нижний колонтитулы страницы в каждую вкладку!

Выполнение фронтальной загрузки

Теперь мы будем использовать забавную команду jQuery tabs() для создания фронтальной загрузочной системы. Код будет выглядеть примерно так (извлечено из документации jquery UI):

<script type="text/javascript">
$(function() { $("#tabs").tabs(); });
</script>
<div id="tabs">
  <ul>
    <li><a href="[[~92]]">Ресурс с ID 92</a></li>
    <li><a href="[[~546]]">Ресурс с ID 546</a></li>
    <li><a href="[[~123]]">Ресурс с ID 123</a></li>
  </ul>
</div>ы

Великолепно! Это загружает страницы через Ajax.

Подождите, я хочу, чтобы заголовки страниц были заголовками вкладок

Есть несколько способов сделать это: первый, вы можете использовать getResources, Wayfinder, или использовать getField сниппет.

Использование getResources

Для getResources убедитесь, что вы используете свойство 'tpl', в котором вы можете указать созданный чанк с именем 'myRowTpl' (или как вы хотите), который выглядит так:

<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' (или как вы хотите), который выглядит так:

<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">
  <ul>
    [[Wayfinder? &startId=`123` &level=`1` &rowTpl=`myRowTpl`]]
  </ul>
</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 { /* если идентификатор не указан, используйте текущий документ */
  $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, поскольку оно должно выполнять запрос на каждой вкладке.

Использование FastField или pdoTools

pdoTools включает расширенный парсер FastField для предоставления нового тега MODX для извлечения полей с использованием идентификатора "#", поэтому они оба работают одинаково.

<script type="text/javascript">
$(function() { $("#tabs").tabs(); });
</script>
<div id="tabs">
  <ul>
    <li><a href="[[~92]]">[[#92.pagetitle]]</a></li>
    <li><a href="[[~546]]">[[#546.pagetitle]]</a></li>
    <li><a href="[[~123]]">[[#123.pagetitle]]</a></li>
  </ul>
</div>

Заключение

Обратите внимание, что все, что вы делаете, это указываете теги href на фактические идентификаторы документа, как обычная ссылка. Хитрость заключается в том, что вы делаете свой Шаблон для документов пустым (или минимальным), чтобы он загружал только проанализированный контент.

Это успешно загрузит ваши MODX ресурсы на вкладки jQuery.

Support the team building MODX with a monthly donation.

The budget raised through OpenCollective is transparent, including payouts, and any contributor can apply to be paid for their work on MODX.

Backers

  • modmore
  • STERC
  • Jens Wittmann – Gestaltung & Entwicklung
  • Fabian Christen
  • Digital Penguin
  • Dannevang Digital
  • Sepia River Studios
  • CrewMark
  • Chris Fickling
  • deJaya
  • Following Sea
  • Anton Tarasov
  • eydolan
  • Raffy
  • Lefthandmedia
  • Murray Wood
  • Snow Creative
  • Nick Clark
  • Helen
  • JT Skaggs
  • krisznet
  • YJ
  • Yanni
  • Richard

Budget

$366 per month—let's make that $500!

Learn more