Cкрипт "Лента активности" для системы uCoz. Все нужные информеры обрамляются в элемент #feed, затем попадают в массив, после чего распознается дата того или иного действия, и идет сортировка элементов массива. В итоге действия идут по порядку.
Установка: 1. Создаем необходимые информеры. Шаблон информера может быть любой, самое главное - весь шаблон должен обрамлять тег с классом "feed-item", а дата и время должны быть обрамлены с тег с классом "feed-date". Пример:
Код
<div class="feed-item">
<span class="feed-date">$DATE$ в $TIME$</span>
<a href="$PROFILE_URL$">$USERNAME$</a> добавил новость "<a href="$ENTRY_URL$">$TITLE$</a>"
"$TITLE$"
</div>
В нужное место вставляем ленту:
Код
<div id="feed">
$MYINF_1$
$MYINF_2$
$MYINF_3$
$MYINF_4$
</div>
<script type="text/javascript">
function parseDate(input) {
var parts = input.match(/(\d+)/g);
return new Date(parts[2],parts[1]-1,parts[0],parts[3]-1,parts[4]-1,Math.random()).toUTCString();
}
$(document).ready(function() {
var elems = $.makeArray($('#feed .feed-item'));
elems.sort(function(a, b) {
if (parseDate($(a).find('.feed-date').text()) > parseDate($(b).find('.feed-date').text())) return -1;
if (parseDate($(a).find('.feed-date').text()) < parseDate($(b).find('.feed-date').text())) return 1;
return 0;
});
$('#feed').html(elems);
});
</script>
Для обратного порядка в 8 и 9 строке
скрипта (не всего кода) меняем местами
-1 и
1.
3. Стили настраиваем по вкусу. Мой вариант:
Код
.feed-item {background:#f7f7f7;font:12px Arial,sans-serif;color:#409dcd;margin:5px 0;padding:10px;}
.feed-date {float:right;}
.feed-item a {color:#409dcd;text-decoration:none;font-weight:700;}
.feed-item:hover {background:#409dcd;color:#fff;padding-left:20px;}
.feed-item:hover a {color:#fff;}
Установка завершена! Приятного использования!
Войдите на сайт или Зарегистрируйтесь