Телепорт
» » » Как разместить на странице кучу счётчиков со своими значениями времени

Как разместить на странице кучу счётчиков со своими значениями времени

Как разместить на странице кучу счётчиков со своими значениями времени


Работаем с 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


Скачивание доступно только для зарегистрированных
НАШИ НОВОСТИ
Опубликовано 04 апрель 2014
Представляю вашему вниманию шаблон онлайн кинотеатра с глубокой настройкой под свои нужны OST-ARENA.RU Читать далее...
Опубликовано 18 март 2014
Представляю вашему вниманию, адаптивный новостной шаблон Reades News. Адаптивный дизайн подразумевает, что шаблон будет одинаково корректно отображаться во всех устройствах. Шаблон отлично подойдет для медийных новостей и не только. Обязательно посмотрите видеозапись работы Читать далее...
Опубликовано 16 март 2014
Дизайн Zerotheme, адаптирован для DLE 10.1 by Yurets. Шаблон zBoomMusic позиционируется как шаблон для музыкального портала или музыкального блога. Вверху шаблона расположен слайдер, под слайдером Топ новостей, далее последние добавленные новости. Читать далее...