Dynamic Colorful jQuery Tag Cloud Plugin – jquery.prettytag

prettyTag let’s you create dynamic colorful cloud tags both in tags input and tags display mode.In addition, this plugin also supports input mode that allows the user to add/remove tags similar to the tagging system.

Features:

• Lightweight File Size.
• Can be Handle a Large Number of Tags to Set Automatically Color.
• Attractive Collection of Colors.
• Option to Randomly Color Each Tag.
• Provide way to add new tags, input tags append and store in a array with its link.
• Easy to use and implement.

Libraries

Load the jQuery JavaScript library, prettyTag JS & CSS file into HTML document.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js">script>
 

<script src="js/jquery.prettytag.js">script>
 

<link rel="stylesheet" href="css/prertytag.css" />

HTML

Create an unordered list of tags with their links in HTML, with the following mentioned class.

JS

And finally call the prettyTag() with class name cloud-tags in document ready function.

$(document).ready(function(){
 
$(".cloud-tags").prettyTag();
 
});

Input Tags

To turn off random color and font awesome tag icon update these value.

$(document).ready(function(){
 
$(".cloud-tags").prettyTag({
    randomColor: false, 
    tagicon: false,
 });
 
});

There are three options available to customize the working of this plugin.

randomColor: true, //false to off random color 
   tagicon: true, //false to turn off tags icon
   tagURL: "#", //url that will be assigned to new tags when user enter a tag name

See live demo and download source code.

This awesome plugin is developed by CodeHimBlog. Visit their official github repository for more information and follow for future updates.

Related