Думаю, многие из вас видели плагин для wordpress. Симпатичный шарик привлек мое внимание и мне захотелось его поковырять...
Разочарованию не было предела ― он оказался на флэше(против флэша ничего не имею). Ладно, флэш так флэш нагуглил исходники, распаковал архивчик, а там… А там море файлов с кодом, файлы для настройки с парой десятков опций, несимпатичный фалик для вывода всего этого, для генерации xml'ки.
С этим я мириться уже никак не хотел и решил написать тоже самое, но на javascript. Привык я работать с jQuery поэтому решил сделать в качестве плагина для него.
Список тэгов у нас представлен вот в таком виде:
Для создания сферы вызываем метод tagSphere у контейнера
Вот и все наслаждаемся.
Есть еще немного опций:
Остальное в своих CSS настраиваем
Плюсы
Минусы
P.S.
Если есть идеи, как побороть минусы пишите, буду рад. За пример такой бить не будут? :)
P.P.S.
Статью писал не я, у автора нет возможности писать на хабр.
Разочарованию не было предела ― он оказался на флэше(против флэша ничего не имею). Ладно, флэш так флэш нагуглил исходники, распаковал архивчик, а там… А там море файлов с кодом, файлы для настройки с парой десятков опций, несимпатичный фалик для вывода всего этого, для генерации 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.
Статью писал не я, у автора нет возможности писать на хабр.