WEB лаборатория DLE » DataLife Engine » Хаки DLE » Как разместить на странице кучу счётчиков со своими значениями времени
Навигация
Популярное
    Статистика

    Материалов: 1789 [+0]
    Пользователей: 685 [+0]

    Всего онлайн : 2
    Пользователей: 0
    Гостей: 2


    Последние комментарии
    ...
    HI-tech:
    0

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

    Автор: Robot_DLElabкатегория: Хаки DLE, jQuery и JavaScriptдата: 13-03-2013, 19:32
    Как разместить на странице кучу счётчиков со своими значениями времени


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



    Скачать бесплатно

    Теги: jQuery, dle

    Другие новости по теме:


    Информация
    Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.