Бесконечная прокрутка в MODx Evolution

Эффект бесконечной прокрутки позволяет просматривать страницу, на которой много записей (например список постов в блоге) без перезагрузки, на одной странице. Кому-то может это показаться неудобным — контент подгружается постепенно и, в конце концов, получится длинная страница-простыня. Ну а кому-то такой эффект придется по нраву. Итак, чтобы сделать бесконечную прокрутку на MODx Evolution, будем использовать специальный плагин — Infinite Scroll.


Этот плагин работает в паре с Ditto, поэтому придется установить и этот сниппет.
Качаем и устанавливаем Infinite Scroll. Для установки достаточно скопировать файлы jquery.infinitescroll.min.js и ajax-loader.gif в каталог assets/templates/site/infinitescroll.
Создадим новый чанк — Articles — с шаблоном для вывода описания одной статьи (записи, поста и т.п.)

  1. <div class="article">
  2.     <h2><a href="[~[+id+]~]">[+pagetitle+]</a></h2>
  3.     <span class="info">on [+date+]</span>
  4.     <div class="desc">[+introtext+]</div>
  5. </div>

Теперь приведу пример простого шаблона для MODx Evolution, в котором можно протестировать бесконечную прокрутку:

  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4. 	<meta charset="UTF-8">
  5. 	<title>Infinite scroll with Ditto</title>
  6. 	<base href="[(site_url)]" />
  7.     <style type="text/css">
  8.     	#Content{width: 400px;}
  9.     </style>
  10. </head>
  11.  
  12. <body>
  13. 	<div id="Content">
  14. 		<!-- the Ditto call. Will load 10 per page-->
  15. 		[[Ditto? &parents=`2` &depth=`1` &tpl=`Article` &paginate=`1` &display=`10`]]
  16. 		<!-- This is the link read by the javascript plugin. The content of the url is added at the end of the Content element -->
  17. 		[+next+]
  18. 	</div>
  19.  
  20. 	<!-- JavaScript Files-->
  21. 	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
  22. 	<script type="text/javascript" src="assets/templates/site/infinitescroll/jquery.infinitescroll.min.js"></script>
  23.  
  24. 	<!-- Infinite Scroll call on the Content -->
  25. 	<script type="text/javascript">    
  26. 	    $('#Content').infinitescroll({
  27. 			navSelector  : "a.ditto_next_link",            
  28. 			nextSelector : "a.ditto_next_link",    
  29. 			itemSelector : "div.article",          
  30. 			debug        : false,
  31. 			loadingImg   : "assets/templates/site/infinitescroll/ajax-loader.gif"
  32. 		});
  33. 	</script>
  34.  
  35. </body>
  36. </html>

Теперь можно насладиться нескончаемой полосой из постов на своем сайте на MODX. Кстати, для желающих по ссылке на Infinite Scroll есть плагин для WordPress 😉

Запись опубликована в рубрике MODX Revolution с метками , . Добавьте в закладки постоянную ссылку.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre lang="" line="" escaped="" cssfile="">