npm install tagcloudA dynamic JavaScript tag/keyword cloud plugin for jQuery, designed to use with Ajax:
the cloud is generated from an array.
MIT license.
* Original: Schaffer Krisztián: http://woophoo.com
* Updated: Tim Groeneveld: http://timg.ws
Usage:
------
Call it on a jQuery object created from one element and pass an array of
objects with "tag" and "count" attributes.
var tags = [
{
tag: "computers",
count: 56
}, {
tag: "mobile",
count :12
}, ... ];
$("#tagcloud").tagCloud(tags);
Similar to the Basic Usage, you could perform an AJAX request, and with the
response, then build a tag cloud.
$.ajax('http://example.org/the-tagcloud/').done(function(response)) {
$("#tagcloud").tagCloud(response.tags, {
click: function(tag, e) {
alert("You just clicked on: " + tag);
},
min: response.min,
max: response.max
});
});
In this example, min & max are calculated inside the JSON data.
Configuration:
--------------
You can pass a configuration object to tagCloud as the second parameter.
Allowed settings are:
* sort: Comparator function used for sort the tags before displaying, or false if no sorting needed.
> default: sort by tag text using
function (a, b) {return a.tag < b.tag ? -1 : (a.tag == b.tag ? 0 : 1)
* click: Event handler which receives the tag name as first parameter
and the original click event as second. The preventDefault() is called
on event before passing so don't bother.
> default: does nothing:
function(tag, event) {}
* maxFontSizeEm: Size of the largest tag in the cloud in css 'em'. The smallest
one's size is 1em so this value is the ratio of the smallest and largest
sizes.
> default: 4
* template: The template that is used to generate a link. Allows different variables.
* tag: The tag provided in the tags object
* count: The number of times that the tag appears
* size: The relative size of the tag (in em)
* data: object containing data that should be added to all of the links.
Default link template
---------------------
{tag}
Styling:
--------
By default, the plugin adds the "tagcloudlink" class to the generated tag links.
Note that an " " is generated between the links too. You can change the
style by modifying the template that is used to generate the links.
Originally based on DynaCloud v3 by Johann Burkard