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.
Вставляем Названия страниц в заголовки табов!
Есть несколько способов сделать это; во-первых, вы можете использовать getResources, Wayfinder, или сниппет 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 документов, также как и обычная вставка ссылок. Особенность состоит в том, что вы делаете ваш шаблон для Документов пустым (либо с минимальными элементами) поэтому он загружает лишь пропарсенный контент.
02-11-2011 приёмы MODx Revolution Wayfinder getResources сниппеты AJAX jquery Виктор Матушевский
Аргнист
08.01.2012 07:35Wayfinder? &startId=`123` &level=`1` &rowTpl=`myRowTpl`
Wayfinder сам выводит ul по умолчанию, здесь лишние.
Viktorminator
08.01.2012 11:47Согласен. Поправил.
Алексей
17.03.2012 06:39В принципе получилось. Есть одно но... Почему то возникает задержка для перехода на другой таб или ссылку после перехода по табам. Как решить? Пока другим решением пользуюсь, несколько не удобно, но быстро и без задержек http://ndfo.ru/index.php?id=44
Андрей
24.10.2012 09:36А если юзер по ссылке или другим способом попадет на такой документ с пустым шаблоном?
Максим
15.12.2012 21:21привет. сделал на Ajax, не очень понял зачем нужно использовать getResources, Wayfinder, или сниппет getField...
вопрос- как сделать ссылки в меню, чтобы сразу открывалась определённая вкладка?