📜 ⬆️ ⬇️

Tree Tag Cloud

For a long time I loved and love native javascript without any lotions and frames. However, frameworks are a useful thing!
On duty, I fell in love with jQuery , and let all opponents gasp, and holivary would rub their hands with envy, but for me it wasn’t love at first sight — now $ () is in my heart.
And, not to be an egoist, I share my first public plugin with everyone - hcloud

hcloud - Tree tag cloud.
Here is a combination of incompatible components and the definition of "tree" is purely semantic , and not visual .

Plugin target

How to get


For example, the "cloud" of your favorite dog breeds:
< ul id ="cloud" >
< li value ="11" >

< ul >
< li value ="30" > </ li >
< li value ="3" > </ li >
</ ul >
</ li >
< li value ="18" >

< ul >
< li value ="20" > </ li >
< li value ="50" >

< ul >
< li value ="4" > </ li >
< li value ="1" > </ li >
</ ul >
</ li >
</ ul >
</ li >
</ ul >
... the use of the plug-in (I think that many have already guessed how)
$( "#cloud" ).hcloud();
See a simple demo with literary genres, but there is a very scary extreme example . On weak computers, it is possible to freeze when generating a random tree (20k-100k elements).
In the same place, in an example, it is possible to look at js-code and CSS .

Hcloud has four parameters:
var options = {
fontSizeRange: [8, 25], //
colorRange: [ "000000" , "cccccc" ], //
itemsSelector: "> li" , // 1-
childrenSelector: "> ul > li" // N-
};
In general, I laid the first brick in our relationship with jQuery. If someone wants to make a love triangle or a square, a cube, a parallelepiped, then I will definitely get a project to google code under the MIT license, but for now AS IS ...

')

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


All Articles