Облако тегов на HTML5 при помощи TagCanvas
21 мая 2012 в 22:27 в категории Статьи о JavaScript 2 комментарияДобрый вечер всем, давно не писал статьи в свой блог в связи с отсутствием интересных задач и их неординарных решений.
Но сегодня решил отписать по поводу облака тегов, ибо предоставленный пример в предыдущей статье на данное время уже не актуален.
Итак, приступим!
Для начала мы скачиваем последнюю версию скрипта — 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>
Вот вроде бы и все! Удачного коддинга!
Оригинал статьи, опции и другая документация по скрипту — тут