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

Mad grant в 20:35, 4 июня 2013

2013-06-04T20:35:41Z

Cmac в 08:56, 8 сентября 2011

2011-09-08T08:56:55Z

Gordeev в 13:04, 28 августа 2011

2011-08-28T13:04:44Z

Gordeev в 13:04, 28 августа 2011

2011-08-28T13:04:07Z

Gordeev: Новая страница: «1. Скачиваем архив (Медиа:countdown.zip) с необходимыми для работы таймера файлами. 2. Копируем …»

2011-08-28T12:59:13Z

Новая страница: «1. Скачиваем архив (Медиа:countdown.zip) с необходимыми для работы таймера файлами. 2. Копируем …»

Новая страница

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

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

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

<source lang="css">
#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;
}
</source>
4. Копируем JS-скрипты в папку сайта /js/. Подключаем их в теге head.

<source lang="html4strict">
<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>
</source>

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

<source lang="xml">
<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"/>
</source>

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

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

<source lang="html4strict">

<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>

</source>

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

<source lang="html4strict">
<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>
</source>

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

← Предыдущая		Версия 20:35, 4 июня 2013
Строка 128:		Строка 128:

	После этого таймер должен будет появиться, если его работе не мешают какие-либо уже имеющиеся на сайте элементы (css или js).		После этого таймер должен будет появиться, если его работе не мешают какие-либо уже имеющиеся на сайте элементы (css или js).
−	~~[[Категория:Шаблонизаторы]]~~[[Категория:Верстка в XSLT]]	+	[[Категория:Верстка в XSLT]]

← Предыдущая		Версия 08:56, 8 сентября 2011
Строка 128:		Строка 128:

	После этого таймер должен будет появиться, если его работе не мешают какие-либо уже имеющиеся на сайте элементы (css или js).		После этого таймер должен будет появиться, если его работе не мешают какие-либо уже имеющиеся на сайте элементы (css или js).
		+	[[Категория:Шаблонизаторы]][[Категория:Верстка в XSLT]]

← Предыдущая		Версия 13:04, 28 августа 2011
Строка 1:		Строка 1:
−	Подобные таймеры можно использовать, если необходимо вести отсчет времени, например, до запуска проекта или какого-либо другого события. Рассмотрим пример создания таймера на основе плагина библиотеки JQuery.	+	Подобные таймеры можно использовать, если необходимо вести отсчет времени, например, до запуска проекта или до какого-либо другого события. Рассмотрим пример создания таймера на основе плагина библиотеки JQuery.

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

← Предыдущая		Версия 13:04, 28 августа 2011
Строка 1:		Строка 1:
		+	Подобные таймеры можно использовать, если необходимо вести отсчет времени, например, до запуска проекта или какого-либо другого события. Рассмотрим пример создания таймера на основе плагина библиотеки JQuery.
		+
	1. Скачиваем архив ([[Медиа:countdown.zip]]) с необходимыми для работы таймера файлами.		1. Скачиваем архив ([[Медиа:countdown.zip]]) с необходимыми для работы таймера файлами.