Как стать автором
Обновить

Плагин tagSphere

Время на прочтение 2 мин
Количество просмотров 2.3K
Думаю, многие из вас видели плагин для wordpress. Симпатичный шарик привлек мое внимание и мне захотелось его поковырять...
Разочарованию не было предела ― он оказался на флэше(против флэша ничего не имею). Ладно, флэш так флэш нагуглил исходники, распаковал архивчик, а там… А там море файлов с кодом, файлы для настройки с парой десятков опций, несимпатичный фалик для вывода всего этого, для генерации xml'ки.
С этим я мириться уже никак не хотел и решил написать тоже самое, но на javascript. Привык я работать с jQuery поэтому решил сделать в качестве плагина для него.

Для нетерпеливых:


Для остальных немного об использовании:


Список тэгов у нас представлен вот в таком виде:
<div id="tagShpere"><br> <ul><br>  <li><a href="#">tag0</a></li><br>  <li><a href="#">tag1</a></li><br>     ****<br>  <li><a href="#">tagN</a></li><br> </ul><br></div><br><br>* This source code was highlighted with Source Code Highlighter.


Для создания сферы вызываем метод tagSphere у контейнера
$('#tagSphere').tagSphere();

* This source code was highlighted with Source Code Highlighter.

Вот и все наслаждаемся.

Есть еще немного опций:
{<br>//высота контейнера со сферой<br>    height: 400,<br>//ширина контейнера со сферой<br>    width: 400,<br>//радиус сферы<br>    radius: 150,<br>//скорость вращение<br>    speed: 3,<br>//замедление сферы, когда мышка ушла с контейнера<br>    slower: 0.9,<br>//задержка между обновлениями позиции тэгов<br>    timer: 5,<br>//зависимость размера шрифта от Z<br>    fontMultiplier: 15,<br>//css стили тэгов onMouseOver<br>    tagCSSOver: {<br>      border: 'solid 1px blue',<br>      color: 'blue'<br>    },<br>//css стили тэгов onMouseOut<br>    tagCSSOut: {<br>      border: '',<br>      color: ''<br>    }<br>}<br><br>* This source code was highlighted with Source Code Highlighter.

Остальное в своих CSS настраиваем

Итого:


Плюсы
  • Легкость использования
  • Маленький размер ― 5кб несжатого кода + jQuery
  • Нормальная индексация ссылок

Минусы
  • Неплохо нагружает проц
  • Проблемы с opacity в IE
  • Размер шрифта меняется дискретно

P.S.
Если есть идеи, как побороть минусы пишите, буду рад. За пример такой бить не будут? :)
P.P.S.
Статью писал не я, у автора нет возможности писать на хабр.
Теги:
Хабы:
+38
Комментарии 36
Комментарии Комментарии 36

Публикации

Истории

Ближайшие события

Московский туристический хакатон
Дата 23 марта – 7 апреля
Место
Москва Онлайн
Геймтон «DatsEdenSpace» от DatsTeam
Дата 5 – 6 апреля
Время 17:00 – 20:00
Место
Онлайн
PG Bootcamp 2024
Дата 16 апреля
Время 09:30 – 21:00
Место
Минск Онлайн
EvaConf 2024
Дата 16 апреля
Время 11:00 – 16:00
Место
Москва Онлайн