Simple Tag Cloud In JavaScript - jQuery Tagcloud.js
File Size: | 3.91 KB |
---|---|
Views Total: | 5566 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
Tagcloud.js is a small and simple JavaScript library for jQuery that generates a customizable tag cloud (word cloud, phrase cloud) from a group of text with different priorities, gradient colors and font sizes.
How to use it:
1. Insert your tag (word, phrase) links to the tagcloud container and specify the priority using the rel
attribute as these:
<div id="tagcloud"> <a href="#" rel='4'><span>C++<sup>4</sup></span></a> <a href="#" rel='2'><span>Java<sup>2</sup></span></a> <a href="#" rel='5'><span>Python<sup>5</sup></span></a> <a href="#" rel='5'><span>javascript<sup>5</sup></span></a> <a href="#" rel='4'><span>react<sup>4</sup></span></a> ... </div>
3. Generate a default tag cloud on the webpage.
$(function () { $('#tagcloud a').tagcloud(); });
4. Change the default min/max font sizes.
$(function () { $('#tagcloud a').tagcloud({ size: { start: 20, end: 30, unit: "px" }, }); });
5. Change the default range of position-dependent colors for the color gradient.
$(function () { $('#tagcloud a').tagcloud({ color: { start: '#1c5866', end: '#661c49' } }); });
This awesome jQuery plugin is developed by ericcluo. For more Advanced Usages, please check the demo page or visit the official website.