Облако тегов на HTML5 при помощи TagCanvas

Добрый вечер всем, давно не писал статьи в свой блог в связи с отсутствием интересных задач и их неординарных решений.

Но сегодня решил отписать по поводу облака тегов, ибо предоставленный пример в предыдущей статье на данное время уже не актуален.

Итак, приступим!

Для начала мы скачиваем последнюю версию скрипта — tagcanvas version 1.17 для Internet Explorer качаем — excanvas

Добавляем в свою страницу код:

<!--[if lt IE 9]><script type="text/javascript" src="excanvas.js"></script><![endif]-->
<script type="text/javascript" src="tagcanvas.js"></script>

Или (если используете jQuery):

<!--[if lt IE 9]><script type="text/javascript" src="excanvas.js"></script><![endif]-->
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="jquery.tagcanvas.min.js"></script>

Добавляете на свою страницу елемент canvas:

<canvas width="300" height="300" id="myCanvas">
  <p>Все браузеры, которые поддерживают элемент canvas проигнорируют текст внутри этого абзаца</p>
 </canvas>

Если вам не обязательна поддержкаcanvas

<canvas width="300" height="300" id="myCanvas">
  <p>Anything in here will be replaced on browsers that support the canvas element</p>
  <ul>
   <li><a href="http://www.google.com" target="_blank">Google</a></li>
   <li><a href="/fish">Fish</a></li>
   <li><a href="/chips">Chips</a></li>
   <li><a href="/salt">Salt</a></li>
   <li><a href="/vinegar">Vinegar</a></li>
  </ul>
 </canvas>

Если вы все-таки хотите чтобы ваше облако правильно отображалось и в Internet Explorer’e ниже 9, то поместите свои ссылки ВНЕ блока canvas:

<canvas width="300" height="300" id="myCanvas">
  <p>In Internet Explorer versions up to 8, things inside the canvas are inaccessible!</p>
 </canvas>

 <div id="tags">
  <ul>
   <li><a href="http://www.google.com" target="_blank">Google</a></li>
   <li><a href="/fish">Fish</a></li>
   <li><a href="/chips">Chips</a></li>
   <li><a href="/salt">Salt</a></li>
   <li><a href="/vinegar">Vinegar</a></li>
  </ul>
 </div>

Инициализируйте класс TagCanvas следующим образом подключив его в свою страницу:

<script type="text/javascript">
  window.onload = function() {
    try {
      TagCanvas.Start('myCanvas');
    } catch(e) {
      // something went wrong, hide the canvas container
      document.getElementById('myCanvasContainer').style.display = 'none';
    }
  };
 </script>

Если ваши ссылки не в элементе canvas, то инициализируйте его при помощи следующего выражения:

...
      TagCanvas.Start('myCanvas','tagList');
      ...

Если вы используете jQuery плагин, то инициализируйте его таким образом:

 <script type="text/javascript">
 $(document).ready(function() {
   if( ! $('#myCanvas').tagcanvas({
     textColour : '#ffffff',
     outlineThickness : 1,
     maxSpeed : 0.03,
     depth : 0.75
   })) {
     // TagCanvas failed to load
     $('#myCanvasContainer').hide();
   }
   // your other jQuery stuff here...
 });
 </script>

Вот вроде бы и все! Удачного коддинга!
Оригинал статьи, опции и другая документация по скрипту — тут

Есть вопрос? Что-то не понятно в статье? Хочешь отблагодарить? Пиши комментарий!
Если тебе понравилась статья, а тем более если еще и помогла - поставь +1 и нажми "Мне нравится"!

(699 оценок, среднее: 5,00 из 5)

Tweet