3D Облако тегов — различия между версиями
Mad grant (обсуждение | вклад) |
Mad grant (обсуждение | вклад) |
||
Строка 1: | Строка 1: | ||
+ | '''Актуально для версии 2.9''' | ||
+ | |||
В продолжении статьи [[Простое облако тегов]] можно добавить к реализации один удобный скрипт, довольно быстрый и работающий во всех адекватных браузерах нормально понимающих HTML5. | В продолжении статьи [[Простое облако тегов]] можно добавить к реализации один удобный скрипт, довольно быстрый и работающий во всех адекватных браузерах нормально понимающих HTML5. | ||
Текущая версия на 11:19, 5 июня 2013
Актуально для версии 2.9
В продолжении статьи Простое облако тегов можно добавить к реализации один удобный скрипт, довольно быстрый и работающий во всех адекватных браузерах нормально понимающих HTML5.
Сам скрипт можно скачать отсюда Файл:Tagcanvas.min.zip или с http://www.goat1000.com/tagcanvas.php
Как это организовать? Очень просто. Извлекаем из архива js-файл и помещаем его в системную папку /js/.
Далее, идем в шаблон /xsltTpls/layouts/default.xsl или тот, в котором вы выполняли действия из предыдущей статьи.
Теперь следует в раздел HEAD, основного шаблона, поместить вызов скрипта и настройки:
<!--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>
<!--/ Настройки плагина -->
Находим место, где хотим разместить наше облако. В данном примере это будет левый блок (под категориями).
Размер этой колонки 190px, это важно учитывать при написании canvas.
Создаем область:
<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>
в макросе stat/tagsCloud третий параметр отвечает за максимальный размер текста, приходящий в xml. Установим значение как 9, для того, чтобы указывать это число как остаток для единицы измерения em.
Сам же шаблон отличается от примера из предыдущей статьи использованием атрибута @font-size для более корректного отображения. И неиспользованием обрамляющих тегов.
<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>
Всё, облако тегов в 3D на сайте установлено. Статья актуальная для версии 2.8.5.3 при наличии подключенной библиотеки jQuery.