• Автор:

    Flesha
  • Добавлено:

    мар 12, 2013
  • Комментариев:

    0
  • Просмотров:

    1449

Хак Размещение счетчиков на страницах

Хак Размещение счетчиков на страницах

Работаем с jQuery Countdown или как разместить на странице кучу счётчиков со своими значениями времени.
Простой способ реализации множественных таймеров на странице на основе jQuery Countdown и html5.

Что потребуется?
Для реализации множества таймеров на одной странице без привязки к id блока и прочим элементам нам понадобится следующее:

1) Собственно скрипт jQuery Countdown
2) Прямые руки.

Что будем с этим делать?
Самый простой и очевидный способ передачи данных о времени истечения таймера в скрипт - воспользоваться html5-атрибутом data-* им и воспользуемся:
    <li data-timer="2013, 5, 18,0,0,0"></li>


Главное чтобы формат даты в атрибуте data-timer должен быть таким:
Год, Месяц, День, Час, Минута, Секунда
В итоге получим вот такую проверочную конструкцию:
    <ul class="counters">
<li title="Этот таймер кончился" data-timer="2013,2,17,0,0,15"></li>
<li title="Тут указаны не все цифры" data-timer="2013,3,12"></li>
<li title="У этого ещё полно времени" data-timer="2015,4,17,0,0,0"></li>
<li data-timer="2013, 5, 18,0,0,0"></li>
</ul>


Далее подключим к странице необходимые скрипты и библиотеки и напишем небольшой скрипт для обработки данных о счётчиках.
В скрипте всё прокомментировано, так что думаю в пояснениях нет необходимости:

    jQuery(document).ready(function($) {

// для всех элементов, которые имеют атрибут data-timer, выполняем следующее действие
$("[data-timer]").each(function () {

// текущий элемент, обернутый в jquery
var $this = $(this);

// Получаем описание таймера
var timerDescription = $this.prop('title');
// Если у элемента есть title - прибавляем к нему двоеточие и пробел
if (timerDescription != false) {
timerDescription = timerDescription+': ';
};

// получили строку, разбили ее по ","
var dateArr = $this.data("timer").split(",");

// элементы массива - строки, а для new Date нужны числа
dateArr = $.map(dateArr, function (elem) {
return parseInt(elem);
});

// в html пишем "человеческие" месяцы, здесь преобразуем к js-месяцам
dateArr[1]--;


// конструируем даты
var date = new Date(dateArr[0], dateArr[1], dateArr[2], dateArr[3], dateArr[4], dateArr[5]);

// инициализируем таймер
$this.countdown({
// Берём дату из заранее заготовленной
until: date,

// Определяем шаблон вывода
layout:'{desc}<span>{d<}{dn} {dl} и {d>}'+
'{hn} {hl}, {mn} {ml}, {sn} {sl}</span>',

// Определяем описание
description: timerDescription

// Ну и про язык не забываем
}, $.countdown.regional['ru']);

});
});


И что дальше?
Дальше качаем архив с примером:
У вас нет доступа к скачиванию файлов с нашего сервера

Изучаем как оно работает и внедряем себе
Самый простой вариант внедрить это решение в DLE - записывать значения таймеров в дополнительные поля и выводить примерно вот так:
    <li data-timer="[xfvalue_timer]"></li>


Спасибо за внимание, надеюсь вы почерпнули немного знаний)

Автор: ПафНутий
Источник: dle-faq
Вернуться
Информация
Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.