📜 ⬆️ ⬇️

TagSphere plugin

I think many of you have seen the wordpress plugin . A cute ball caught my attention and I wanted to pick it up ...
There was no limit to disappointment - he was on a flash (I have nothing against a flash). Okay, flash so flash naggulil source, unpacked archiver, and there ... And there are a lot of files with code, configuration files with a couple dozen options, an unpleasant falik for outputting all this, for generating xml's.
I didn’t want to put up with this anymore and decided to write the same thing, but in javascript. I got used to working with jQuery so I decided to make it as a plugin for it.

For impatient:


For the rest, a little about using:


The list of tags is presented here in this form:
< 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 .


To create a sphere, call the tagSphere method on the container.
$( '#tagSphere' ).tagSphere();

* This source code was highlighted with Source Code Highlighter .

That's all enjoy.

There are some more options:
{<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 .

The rest is customizable in our CSS
')

Total:


pros

Minuses

PS
If you have an idea how to overcome the cons write, I will be glad. For an example of such a beat will not? :)
Pps
I did not write the article, the author has no opportunity to write on Habr.

Source: https://habr.com/ru/post/47337/


All Articles