Dynamic AJAX-enabled Tag Cloud Plugin - jquery.tagcloud.js
File Size: | 5.34 KB |
---|---|
Views Total: | 309 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

A lightweight, dynamic, AJAX-enabled jQuery tag cloud plugin that provides a great way to display a list of keywords and topics related to your website.
With this plugin, you can add a tag cloud to any web page easily and quickly by embedding some simple mark-up into the desired location within the HTML code.
How to use it:
1. Create an empty container for the tag cloud.
<div id="tagcloud"> </div>
2. Download the plugin and load the jquery.tagcloud.js
after jQuery.
<script src="/path/to/cdn/jquery.min.js"></script> <script src="/path/to/jquery.tagcloud.js"></script>
3. Define your tag list in an array of objects as follows.
var tags = [ { tag: "jQuery", count: 56 },{ tag: "mobile", count :12 },{ tag: "JavaScript", count :24 },{ tag: "CSS", count :38 },{ tag: "HTML", count :44 },{ tag: "Ruby", count :9 },{ tag: "Python", count :23 },{ tag: "Com", count :12 } ];
4. Initialize the plugin to generate a default tag cloud.
$("#tagcloud").tagCloud(tags,{ // options here });
5. Apply your own CSS styles to the tag links.
.tagcloudlink { /* ... */ }
6. Fetch your tag list via AJAX requests.
$.ajax('/path/to/tag/list/').done(function(response)) { $("#tagcloud").tagCloud(response.tags, { // options here }); });
7. Handle click event.
$("#tagcloud").tagCloud(tags,{ click: function(tag) { // do something }, });
8. Customize the tag sort function.
$("#tagcloud").tagCloud(tags,{ sort: function (a, b) {return a.tag < b.tag ? -1 : (a.tag == b.tag ? 0 : 1)}, });
9. Override the default tag template. Default: false.
$("#tagcloud").tagCloud(tags,{ template: '<a href="{href}" class="tagcloudlink" style="font-size: {size}em">{tag}<\/a>' });
10. Set the max font size (em). Default: 4em.
$("#tagcloud").tagCloud(tags,{ maxFontSize: 2, });
11. Set the min/max count values.
$("#tagcloud").tagCloud(tags,{ min: -1, max: -1, });
This awesome jQuery plugin is developed by timgws. For more Advanced Usages, please check the demo page or visit the official website.