Таймер обратного отсчета на примере XSLT-шаблонизатора

Подобные таймеры можно использовать, если необходимо вести отсчет времени, например, до запуска проекта или до какого-либо другого события. Рассмотрим пример создания таймера на основе плагина библиотеки JQuery.

1. Скачиваем архив (Медиа:countdown.zip) с необходимыми для работы таймера файлами.

2. Копируем изображение dash.png в папку сайта /images/

3. В основную таблицу стилей добавляем стиль для блока таймера:

#countdown_dashboard {
	height: 110px;
}

.dash {
	width: 110px;
	height: 114px;
	background: transparent url('/images/dash.png') 0 0 no-repeat;
	float: left;
	margin-left: 20px;
	position: relative;
}

.dash .digit {
	font-size: 55pt;
	font-weight: bold;
	float: left;
	width: 55px;
	text-align: center;
	font-family: Times;
	color: #555;
	position: relative;
}

.dash_title {
	position: absolute;
	display: block;
	bottom: 0px;
	right: 6px;
	font-size: 9pt;
	color: #555;
	text-transform: uppercase;
	letter-spacing: 2px;
}

.dev_comment {
	font-size: 14pt;
	color: #777;
	text-align: center;
	font-style: italic;
	margin: 40px 10px;
}

4. Копируем JS-скрипты в папку сайта /js/. Подключаем их в теге head.

	<script language="Javascript" type="text/javascript" src="js/jquery-1.4.1.js"></script>
	<script language="Javascript" type="text/javascript" src="js/jquery.lwtCountdown-0.9.5.js"></script>

При этом если у вас на сайте используется Edit-in-place, то есть в теге head прописаны строки, подключающие его:

	<xsl:value-of select="document('udata://system/includeQuickEditJs')/udata" disable-output-escaping="yes"/>
	<xsl:value-of select="document('udata://system/includeEditInPlaceJs')/udata" disable-output-escaping="yes"/>

- то подключать jquery-1.4.1.js не нужно.

5. Вставляем HTML-код счетчика в xsl-шаблон, в соответствии с тем, на каких страницах или в каком блоке мы хотим его отображать:

	<!-- Начало панели счетчика -->
		<div id="countdown_dashboard">
			<div class="dash weeks_dash">
				<span class="dash_title">недель</span>
				<div class="digit">0</div>
				<div class="digit">0</div>
			</div>

			<div class="dash days_dash">
				<span class="dash_title">дней</span>
				<div class="digit">0</div>
				<div class="digit">0</div>
			</div>

			<div class="dash hours_dash">
				<span class="dash_title">часов</span>
				<div class="digit">0</div>
				<div class="digit">0</div>
			</div>

			<div class="dash minutes_dash">
				<span class="dash_title">минут</span>
				<div class="digit">0</div>
				<div class="digit">0</div>
			</div>

			<div class="dash seconds_dash">
				<span class="dash_title">секунд</span>
				<div class="digit">0</div>
				<div class="digit">0</div>
			</div>

		</div>
		<!-- Завершение панели счетчика -->

6. Далее в этом шаблоне прописываем вызов скрипта, в котором задаем время, когда произойдет событие:

	<script language="javascript" type="text/javascript">
		<xsl:text>
			jQuery(document).ready(function() {
				$('#countdown_dashboard').countDown({
					targetDate: {
						'day': 		21,
						'month': 	12,
						'year': 	2012,
						'hour': 	17,
						'min': 		34,
						'sec': 		15					}
				});
				
			});
		</xsl:text>
	</script>

После этого таймер должен будет появиться, если его работе не мешают какие-либо уже имеющиеся на сайте элементы (css или js).