https://wiki.umisoft.ru/index.php?title=%D0%A2%D0%B0%D0%B9%D0%BC%D0%B5%D1%80_%D0%BE%D0%B1%D1%80%D0%B0%D1%82%D0%BD%D0%BE%D0%B3%D0%BE_%D0%BE%D1%82%D1%81%D1%87%D0%B5%D1%82%D0%B0_%D0%BD%D0%B0_%D0%BF%D1%80%D0%B8%D0%BC%D0%B5%D1%80%D0%B5_XSLT-%D1%88%D0%B0%D0%B1%D0%BB%D0%BE%D0%BD%D0%B8%D0%B7%D0%B0%D1%82%D0%BE%D1%80%D0%B0&feed=atom&action=history
Таймер обратного отсчета на примере XSLT-шаблонизатора - История изменений
2024-03-29T12:31:27Z
История изменений этой страницы в вики
MediaWiki 1.31.0
https://wiki.umisoft.ru/index.php?title=%D0%A2%D0%B0%D0%B9%D0%BC%D0%B5%D1%80_%D0%BE%D0%B1%D1%80%D0%B0%D1%82%D0%BD%D0%BE%D0%B3%D0%BE_%D0%BE%D1%82%D1%81%D1%87%D0%B5%D1%82%D0%B0_%D0%BD%D0%B0_%D0%BF%D1%80%D0%B8%D0%BC%D0%B5%D1%80%D0%B5_XSLT-%D1%88%D0%B0%D0%B1%D0%BB%D0%BE%D0%BD%D0%B8%D0%B7%D0%B0%D1%82%D0%BE%D1%80%D0%B0&diff=5072&oldid=prev
Mad grant в 20:35, 4 июня 2013
2013-06-04T20:35:41Z
<p></p>
<table class="diff diff-contentalign-left" data-mw="interface">
<col class="diff-marker" />
<col class="diff-content" />
<col class="diff-marker" />
<col class="diff-content" />
<tr class="diff-title" lang="ru">
<td colspan="2" style="background-color: #fff; color: #222; text-align: center;">← Предыдущая</td>
<td colspan="2" style="background-color: #fff; color: #222; text-align: center;">Версия 20:35, 4 июня 2013</td>
</tr><tr><td colspan="2" class="diff-lineno" id="mw-diff-left-l128" >Строка 128:</td>
<td colspan="2" class="diff-lineno">Строка 128:</td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #222; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #222; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #222; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>После этого таймер должен будет появиться, если его работе не мешают какие-либо уже имеющиеся на сайте элементы (css или js).</div></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #222; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>После этого таймер должен будет появиться, если его работе не мешают какие-либо уже имеющиеся на сайте элементы (css или js).</div></td></tr>
<tr><td class='diff-marker'>−</td><td style="color: #222; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div><del class="diffchange diffchange-inline">[[Категория:Шаблонизаторы]]</del>[[Категория:Верстка в XSLT]]</div></td><td class='diff-marker'>+</td><td style="color: #222; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div>[[Категория:Верстка в XSLT]]</div></td></tr>
</table>
Mad grant
https://wiki.umisoft.ru/index.php?title=%D0%A2%D0%B0%D0%B9%D0%BC%D0%B5%D1%80_%D0%BE%D0%B1%D1%80%D0%B0%D1%82%D0%BD%D0%BE%D0%B3%D0%BE_%D0%BE%D1%82%D1%81%D1%87%D0%B5%D1%82%D0%B0_%D0%BD%D0%B0_%D0%BF%D1%80%D0%B8%D0%BC%D0%B5%D1%80%D0%B5_XSLT-%D1%88%D0%B0%D0%B1%D0%BB%D0%BE%D0%BD%D0%B8%D0%B7%D0%B0%D1%82%D0%BE%D1%80%D0%B0&diff=2918&oldid=prev
Cmac в 08:56, 8 сентября 2011
2011-09-08T08:56:55Z
<p></p>
<table class="diff diff-contentalign-left" data-mw="interface">
<col class="diff-marker" />
<col class="diff-content" />
<col class="diff-marker" />
<col class="diff-content" />
<tr class="diff-title" lang="ru">
<td colspan="2" style="background-color: #fff; color: #222; text-align: center;">← Предыдущая</td>
<td colspan="2" style="background-color: #fff; color: #222; text-align: center;">Версия 08:56, 8 сентября 2011</td>
</tr><tr><td colspan="2" class="diff-lineno" id="mw-diff-left-l128" >Строка 128:</td>
<td colspan="2" class="diff-lineno">Строка 128:</td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #222; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #222; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #222; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>После этого таймер должен будет появиться, если его работе не мешают какие-либо уже имеющиеся на сайте элементы (css или js).</div></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #222; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>После этого таймер должен будет появиться, если его работе не мешают какие-либо уже имеющиеся на сайте элементы (css или js).</div></td></tr>
<tr><td colspan="2"> </td><td class='diff-marker'>+</td><td style="color: #222; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><ins style="font-weight: bold; text-decoration: none;">[[Категория:Шаблонизаторы]][[Категория:Верстка в XSLT]]</ins></div></td></tr>
</table>
Cmac
https://wiki.umisoft.ru/index.php?title=%D0%A2%D0%B0%D0%B9%D0%BC%D0%B5%D1%80_%D0%BE%D0%B1%D1%80%D0%B0%D1%82%D0%BD%D0%BE%D0%B3%D0%BE_%D0%BE%D1%82%D1%81%D1%87%D0%B5%D1%82%D0%B0_%D0%BD%D0%B0_%D0%BF%D1%80%D0%B8%D0%BC%D0%B5%D1%80%D0%B5_XSLT-%D1%88%D0%B0%D0%B1%D0%BB%D0%BE%D0%BD%D0%B8%D0%B7%D0%B0%D1%82%D0%BE%D1%80%D0%B0&diff=2789&oldid=prev
Gordeev в 13:04, 28 августа 2011
2011-08-28T13:04:44Z
<p></p>
<table class="diff diff-contentalign-left" data-mw="interface">
<col class="diff-marker" />
<col class="diff-content" />
<col class="diff-marker" />
<col class="diff-content" />
<tr class="diff-title" lang="ru">
<td colspan="2" style="background-color: #fff; color: #222; text-align: center;">← Предыдущая</td>
<td colspan="2" style="background-color: #fff; color: #222; text-align: center;">Версия 13:04, 28 августа 2011</td>
</tr><tr><td colspan="2" class="diff-lineno" id="mw-diff-left-l1" >Строка 1:</td>
<td colspan="2" class="diff-lineno">Строка 1:</td></tr>
<tr><td class='diff-marker'>−</td><td style="color: #222; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div>Подобные таймеры можно использовать, если необходимо вести отсчет времени, например, до запуска проекта или какого-либо другого события. Рассмотрим пример создания таймера на основе плагина библиотеки JQuery.</div></td><td class='diff-marker'>+</td><td style="color: #222; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div>Подобные таймеры можно использовать, если необходимо вести отсчет времени, например, до запуска проекта или <ins class="diffchange diffchange-inline">до </ins>какого-либо другого события. Рассмотрим пример создания таймера на основе плагина библиотеки JQuery.</div></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #222; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #222; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #222; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>1. Скачиваем архив ([[Медиа:countdown.zip]]) с необходимыми для работы таймера файлами.</div></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #222; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>1. Скачиваем архив ([[Медиа:countdown.zip]]) с необходимыми для работы таймера файлами.</div></td></tr>
</table>
Gordeev
https://wiki.umisoft.ru/index.php?title=%D0%A2%D0%B0%D0%B9%D0%BC%D0%B5%D1%80_%D0%BE%D0%B1%D1%80%D0%B0%D1%82%D0%BD%D0%BE%D0%B3%D0%BE_%D0%BE%D1%82%D1%81%D1%87%D0%B5%D1%82%D0%B0_%D0%BD%D0%B0_%D0%BF%D1%80%D0%B8%D0%BC%D0%B5%D1%80%D0%B5_XSLT-%D1%88%D0%B0%D0%B1%D0%BB%D0%BE%D0%BD%D0%B8%D0%B7%D0%B0%D1%82%D0%BE%D1%80%D0%B0&diff=2788&oldid=prev
Gordeev в 13:04, 28 августа 2011
2011-08-28T13:04:07Z
<p></p>
<table class="diff diff-contentalign-left" data-mw="interface">
<col class="diff-marker" />
<col class="diff-content" />
<col class="diff-marker" />
<col class="diff-content" />
<tr class="diff-title" lang="ru">
<td colspan="2" style="background-color: #fff; color: #222; text-align: center;">← Предыдущая</td>
<td colspan="2" style="background-color: #fff; color: #222; text-align: center;">Версия 13:04, 28 августа 2011</td>
</tr><tr><td colspan="2" class="diff-lineno" id="mw-diff-left-l1" >Строка 1:</td>
<td colspan="2" class="diff-lineno">Строка 1:</td></tr>
<tr><td colspan="2"> </td><td class='diff-marker'>+</td><td style="color: #222; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><ins style="font-weight: bold; text-decoration: none;">Подобные таймеры можно использовать, если необходимо вести отсчет времени, например, до запуска проекта или какого-либо другого события. Рассмотрим пример создания таймера на основе плагина библиотеки JQuery.</ins></div></td></tr>
<tr><td colspan="2"> </td><td class='diff-marker'>+</td><td style="color: #222; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><ins style="font-weight: bold; text-decoration: none;"></ins></div></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #222; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>1. Скачиваем архив ([[Медиа:countdown.zip]]) с необходимыми для работы таймера файлами.</div></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #222; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>1. Скачиваем архив ([[Медиа:countdown.zip]]) с необходимыми для работы таймера файлами.</div></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #222; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #222; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td></tr>
</table>
Gordeev
https://wiki.umisoft.ru/index.php?title=%D0%A2%D0%B0%D0%B9%D0%BC%D0%B5%D1%80_%D0%BE%D0%B1%D1%80%D0%B0%D1%82%D0%BD%D0%BE%D0%B3%D0%BE_%D0%BE%D1%82%D1%81%D1%87%D0%B5%D1%82%D0%B0_%D0%BD%D0%B0_%D0%BF%D1%80%D0%B8%D0%BC%D0%B5%D1%80%D0%B5_XSLT-%D1%88%D0%B0%D0%B1%D0%BB%D0%BE%D0%BD%D0%B8%D0%B7%D0%B0%D1%82%D0%BE%D1%80%D0%B0&diff=2787&oldid=prev
Gordeev: Новая страница: «1. Скачиваем архив (Медиа:countdown.zip) с необходимыми для работы таймера файлами. 2. Копируем …»
2011-08-28T12:59:13Z
<p>Новая страница: «1. Скачиваем архив (<a href="/images/a/a2/Countdown.zip" class="internal" title="Countdown.zip">Медиа:countdown.zip</a>) с необходимыми для работы таймера файлами. 2. Копируем …»</p>
<p><b>Новая страница</b></p><div>1. Скачиваем архив ([[Медиа:countdown.zip]]) с необходимыми для работы таймера файлами.<br />
<br />
2. Копируем изображение dash.png в папку сайта /images/<br />
<br />
3. В основную таблицу стилей добавляем стиль для блока таймера:<br />
<br />
<source lang="css"><br />
#countdown_dashboard {<br />
height: 110px;<br />
}<br />
<br />
.dash {<br />
width: 110px;<br />
height: 114px;<br />
background: transparent url('/images/dash.png') 0 0 no-repeat;<br />
float: left;<br />
margin-left: 20px;<br />
position: relative;<br />
}<br />
<br />
.dash .digit {<br />
font-size: 55pt;<br />
font-weight: bold;<br />
float: left;<br />
width: 55px;<br />
text-align: center;<br />
font-family: Times;<br />
color: #555;<br />
position: relative;<br />
}<br />
<br />
.dash_title {<br />
position: absolute;<br />
display: block;<br />
bottom: 0px;<br />
right: 6px;<br />
font-size: 9pt;<br />
color: #555;<br />
text-transform: uppercase;<br />
letter-spacing: 2px;<br />
}<br />
<br />
.dev_comment {<br />
font-size: 14pt;<br />
color: #777;<br />
text-align: center;<br />
font-style: italic;<br />
margin: 40px 10px;<br />
}<br />
</source><br />
4. Копируем JS-скрипты в папку сайта /js/. Подключаем их в теге head. <br />
<br />
<source lang="html4strict"><br />
<script language="Javascript" type="text/javascript" src="js/jquery-1.4.1.js"></script><br />
<script language="Javascript" type="text/javascript" src="js/jquery.lwtCountdown-0.9.5.js"></script><br />
</source><br />
<br />
При этом если у вас на сайте используется Edit-in-place, то есть в теге head прописаны строки, подключающие его:<br />
<br />
<source lang="xml"><br />
<xsl:value-of select="document('udata://system/includeQuickEditJs')/udata" disable-output-escaping="yes"/><br />
<xsl:value-of select="document('udata://system/includeEditInPlaceJs')/udata" disable-output-escaping="yes"/><br />
</source><br />
<br />
- то подключать jquery-1.4.1.js не нужно.<br />
<br />
5. Вставляем HTML-код счетчика в xsl-шаблон, в соответствии с тем, на каких страницах или в каком блоке мы хотим его отображать:<br />
<br />
<source lang="html4strict"><br />
<!-- Начало панели счетчика --><br />
<div id="countdown_dashboard"><br />
<div class="dash weeks_dash"><br />
<span class="dash_title">недель</span><br />
<div class="digit">0</div><br />
<div class="digit">0</div><br />
</div><br />
<br />
<div class="dash days_dash"><br />
<span class="dash_title">дней</span><br />
<div class="digit">0</div><br />
<div class="digit">0</div><br />
</div><br />
<br />
<div class="dash hours_dash"><br />
<span class="dash_title">часов</span><br />
<div class="digit">0</div><br />
<div class="digit">0</div><br />
</div><br />
<br />
<div class="dash minutes_dash"><br />
<span class="dash_title">минут</span><br />
<div class="digit">0</div><br />
<div class="digit">0</div><br />
</div><br />
<br />
<div class="dash seconds_dash"><br />
<span class="dash_title">секунд</span><br />
<div class="digit">0</div><br />
<div class="digit">0</div><br />
</div><br />
<br />
</div><br />
<!-- Завершение панели счетчика --><br />
</source><br />
<br />
6. Далее в этом шаблоне прописываем вызов скрипта, в котором задаем время, когда произойдет событие:<br />
<br />
<source lang="html4strict"><br />
<script language="javascript" type="text/javascript"><br />
<xsl:text><br />
jQuery(document).ready(function() {<br />
$('#countdown_dashboard').countDown({<br />
targetDate: {<br />
'day': 21,<br />
'month': 12,<br />
'year': 2012,<br />
'hour': 17,<br />
'min': 34,<br />
'sec': 15 }<br />
});<br />
<br />
});<br />
</xsl:text><br />
</script><br />
</source><br />
<br />
После этого таймер должен будет появиться, если его работе не мешают какие-либо уже имеющиеся на сайте элементы (css или js).</div>
Gordeev