AJAX загрузка страниц с использованием табов jQuery

Задача

Мы хотим использовать на нашем сайте 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="blog/blog-o-modx-revolution/sozdanie-sovremennogo-web-sajta.html">Resource with ID 92</a></li>
        <li><a href="">Resource with ID 546</a></li>
        <li><a href="blog/blog-o-modx-revolution/besplatnyie-css-shablonyi.html">Resource with ID 123</a></li>
    </ul>
</div>

Отлично! Страницы загружаются с помощью Ajax.

Вставляем Названия страниц в заголовки табов!

Есть несколько способов сделать это; во-первых, вы можете использовать getResourcesWayfinder, или сниппет getField.

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

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

<li id=""><a href="" title=""></a></li>

и на вашей странице с табами:

<script type="text/javascript">
$(function() { $("#tabs").tabs(); });
</script>
 
<div id="tabs">
    <ul>

    </ul>
</div>

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

Для Wayfinder создайте шаблон-чанк rowTpl, который вы можете назвать 'myRowTpl' (или пo-другому), например такой:

<li><a href="" title=""></a></li>

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

<script type="text/javascript">
$(function() { $("#tabs").tabs(); });
</script>
 
<div id="tabs">


    
</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="blog/blog-o-modx-revolution/sozdanie-sovremennogo-web-sajta.html"></a></li>
        <li><a href=""></a></li>
        <li><a href="blog/blog-o-modx-revolution/besplatnyie-css-shablonyi.html"></a></li>
    </ul>
</div>

Однако решение со сниппетом getField не настолько быстрое и элегантное как решение с Wayfinder, так как оно должно делать запрос к каждому табу.

Выводы

Обратите внимание, что всё, что вы реально делаете – это привязка тегов href к реальным ID документов, также как и обычная вставка ссылок. Особенность состоит в том, что вы делаете ваш шаблон для Документов пустым (либо с минимальными элементами) поэтому он загружает лишь пропарсенный контент.