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.
jquery-tag-cloud
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.

<!--jQuery-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
 
<!--prettyTag JS-->
<script src="js/jquery.prettytag.js"></script>
 
<!--prettyTag CSS-->
<link rel="stylesheet" href="css/prertytag.css" />

HTML

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

<ul class="cloud-tags">
      <li> <a href="#tag_link"> Tag name </a> </li>
      <li> <a href="#tag_link"> Tag name two </a> </li>
      <li> <a href="#tag_link"> iamrohit.in</a> </li>
      <li> <a href="#tag_link"> Codehim.com </a> </li>
</ul>

JS

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

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




Input Tags

<input class="codehim-input-tags" name="tags" type="text" />
 
<section class="show-input-tags">
 
<ul class="tags cloud-tags"></ul>
 
</section>

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.

DEMO | DOWNLOAD

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


Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.