Порой необходимо дополнить дизайн сайта какими то маленькими заплатками, которые будут отлично вписываться в дизайн сайта, при этом нести ценную информацию, и не нагромождать дизайн, зачастую дизайнеры пользуются такими приемами, и размещают, к примеру, виджет часов или погоды, но что делать если есть желание разместить и то и другое, но так не хочется захламлять сайт. Отличным примером послужат часы в стиле известным смартфонов htc, которые наглядно нам демонстрируют погоду и временные отрывки в виде больших часов и фазы луны.

В данном уроке мы рассмотрим как создать такие часы для сайта с помощью небольшого плагина. Для того чтобы у нас все получилось нам необходим плагин DigiClock. Дизайн создадим в стиле Hero Clock от HTC. И так, приступим.

Шаг 1. HTML

Чтобы запустить плагин jDigiClock, нужно подключить библиотеку jQuery, файл скрипта jDigiClock и файл стилей jDigiClock в тэге <head> вашего HTML документа:

Далее вызываем сам плагин с помощью следующей команды:

И последним шагом будет сама разметка часов, которая достаточно простая:

Шаг 2. Настройки

В jDigiClock есть список опций, управляющих внешним видом и поведением плагина:

Свойство Тип По умолчанию Описание
clockImagesPath строка «images/clock/» Путь до изображений часов
weatherImagesPath строка «images/weather/» Путь до изображений погоды
am_pm логический ложь Включение AM/PM опции
weatherLocationCode строка «EUR|BG|BU002|BOURGAS» Код локации погоды (смотрите:WeatherLocationDatabase.txt).
weatherMetric строка «C» Измерение градусов: C или F.
weatherUpdate число 0 Обновление погоды в минутах
proxyType строка «php» Тип прокси: php или asp

Вот и все. Готово!

Материал взят из зарубежного источника. И представлен исключительно в ознакомительных целях.