Счётчики обратного отсчёта

demosourse

ClassyCountdown - это jQuery плагин для быстрого создания счётчиков обратного отсчёта. Для отображения циферблата используется HTML5 canvas. В вашем распоряжении 12 различных тем на любой вкус.

Параметры

theme - тема счётчика. Может принимать значения: flat-colors, flat-colors-wide, flat-colors-very-wide, flat-colors-black, black, black-wide, black-very-wide, black-black, white, white-wide, white-very-wide или white-black.

end -

now -

labels - отображать текст days/hours/minutes/seconds или нет.

style - свои стили для счётчика.

labelsOptions - объект, где можно перечислить текст лэйблов для других языков. Например:

labelsOptions: {
	lang: {
		days: 'Дней',
		hours: 'Часов',
		minutes: 'Минут',
		seconds: 'Секунд'
	},
	style: 'font-size:0.5em; text-transform:uppercase;'
}

Методы

onEndCallback() - функция обратного действия, которая запускается после окончания обратного отсчёта.

Настройка

Сперва необходимо подключить jQuery:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

Затем нужно подключить плагин jQuery ClassyPaypal, CSS файл и библиотеки от которых он зависит (jQuery knob и jQuery throttle):

<script src="js/jquery.classycountdown.min.js"></script>
<script src="js/jquery.knob.js"></script>
<script src="js/jquery.throttle.js"></script>
<link rel="stylesheet" type="text/css" href="css/jquery.classycountdown.min.css" />

После этого необходимо создать HTML блок, к которому будем применять плагин.

<div class="countdown"></div>

Последний шаг - инициализация плагина. Применяем его, к только что созданному блоку.

$('.countdown').ClassyCountdown({
    theme: "flat-colors",
    end: $.now() + 10000
});

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: http://www.class.pm/projects/jquery/classycountdown/
Перевел: Станислав Протасевич
Урок создан: 17 Декабря 2014
Просмотров: 21470
Правила перепечатки


5 последних уроков рубрики "jQuery"

^ Наверх ^