Виджет on-modx.ru
Как известно, сегодня хороший праздник "День международной солидарности трудящихся", непонятно зачем переименовынный в "Праздник весны и труда" у нас.
Так что, поздравляю всех трудящихся с нашим профессиональным праздником и желаю дальнейших успехов!
Сам, накануне, тоже немного потрудился и сделал простейший виджет для показа каталога on-modx.ru через его api, благо, у проекта как раз юбилей.
Виджет интересен тем, что работает на ajax, но без php и располагается в одном единственном чанке.
<div id="on_modx" style="text-align:center">
<h4 class="header">Сайты на MODX</h4>
<div class="links"><small>
<a href="http://on-modx.ru/">Посмотреть все</a> | <a href="http://on-modx.ru/catalog/add-site">Добавить свой</a>
</small></div>
<a href="" class="image"><img src="" alt="" title=""></a>
<small class="version"></small>
<h5 class="title"></h5>
<a href="javascript:void(0)" onclick="return getSite();" class="refresh">Обновить</a>
</div>
<script type="text/javascript">
$(document).ready(function() {
getSite();
});
function getSite() {
var elem = $('#on_modx');
$('.image img', elem).attr('src', '/inc/img/spinner.gif');
$.get('http://on-modx.ru/api', {'mode': 'json', 'display': 1, 'random': 1, 'w': 250, 'h': 0}, function(data) {
if (typeof(data) == 'string') {
data = $.parseJSON(data);
}
if (data[0]) {
var site = data[0];
$('.title', elem).text(site.name);
$('.version', elem).text(site.ver);
$('.image', elem).attr('href', site.fullinfo);
$('.image img', elem).attr('src', site.src);
}
else {
elem.hide();
}
});
}
</script>То есть, базовая разметка, функция для запроса на удалённый сервис (который разрешает такие запросы) и вставка ответа в разметку.
Функция запускается при загрузке страницы, также можно кликать по ссылке "обновить". Очень-очень просто и гибко, на мой взгляд. Если на сервис не отдаст ответ - весь блок будет просто спрятан.
Кому нравится - прикручивайте себе. Нужно просто скопипастить и положить бегунок загрузки в /inc/img/spinner.gif.
