Просмотр исходного текста страницы 3D Облако тегов

'''Актуально для версии 2.9'''

В продолжении статьи [[Простое облако тегов]] можно добавить к реализации один удобный скрипт, довольно быстрый и работающий во всех адекватных браузерах нормально понимающих HTML5.

Сам скрипт можно скачать отсюда [[Файл:Tagcanvas.min.zip‎]] или с http://www.goat1000.com/tagcanvas.php <br />
Как это организовать? Очень просто. Извлекаем из архива js-файл и помещаем его в системную папку /js/. <br />
Далее, идем в шаблон /xsltTpls/layouts/default.xsl или тот, в котором вы выполняли действия из предыдущей статьи.<br />
Теперь следует в раздел HEAD, основного шаблона, поместить вызов скрипта и настройки: 
<source lang="javascript">
<!--CLOUD-->
<script charset="utf-8" type="text/javascript" src="/js/tagcanvas.js" />
<!-- Настройки плагина -->
	 <script type="text/javascript">
	 $(document).ready(function() {
	   if( ! $('#myCanvas').tagcanvas({
	     textColour : 'orange', //Цвет ссылки
	     outlineColour: 'black', //Цвет контура
	     weight: true, //Учитывать вес
	     outlineThickness : 1, //Толщина контура
	     zoom: 1.2, //Приближение текста
	     maxSpeed : 0.02, //Скорость вращения
	     depth : 0.40, //Глубина (mouse rollover)
	     textHeight: 16 //Базовый размер текста
	   }, 'tagcloud')); });
	 </script>
<!--/ Настройки плагина -->
</source>

Находим место, где хотим разместить наше облако. В данном примере это будет левый блок (под категориями).<br />
Размер этой колонки 190px, это важно учитывать при написании canvas.<br />
Создаем область:
<source lang="html4strict">
<canvas width="190" height="190" id="myCanvas">
	<div id="tagcloud">
		<xsl:apply-templates select="document('udata://stat/tagsCloud//10/9')/udata/lines" mode="tags" />
	</div>
</canvas>
</source>
в макросе stat/tagsCloud третий параметр отвечает за максимальный размер текста, приходящий в xml. Установим значение как 9, для того, чтобы указывать это число как остаток для единицы измерения em.

Сам же шаблон отличается от примера из предыдущей статьи использованием атрибута @font-size для более корректного отображения. И неиспользованием обрамляющих тегов.
<source lang="xml">
<xsl:template match="item" mode="tags">
	<a style="font: 1.{@font-size}em sans-serif;" href="/content/pagesByDomainTags/{.}">
		<xsl:value-of select="." />
	</a>
</xsl:template>
</source>

Всё, облако тегов в 3D на сайте установлено.
Статья актуальная для версии 2.8.5.3 при наличии подключенной библиотеки jQuery.
[[Категория:Вопросы и уроки разработки сайтов на UMI.CMS]][[Категория:Сторонние сервисы и программы]][[Категория:Модуль Статистика]]