jQuery Auto Colorful Tags with prettyTag Plugin

Colorful Cloud Tags Example

The Following example illustrates prettyTag auto colored tags (display mode) to show colorful tags to visitors.

• Web Design
• CSS Tutorial
• jQueryScript.net
• Codehim.com
• jQuery
• Cloud Tags
• Easy Learning
• CSS3
• Tagging
• jQuery Plugin
• HTML5
• CSS3

Tags Input Mode

The Following example illustrates prettyTag auto colored tags (input mode) when user creates new tags.

Enter tag name and separate with comma.

prettyTag Main 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.

How to Use

1. 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" />

2. 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"> jQueryScript.net</a> </li>
      <li> <a href="#tag_link"> Codehim.com </a> </li>
</ul>

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

$(document).ready(function(){

$(".cloud-tags").prettyTag();

});

prettyTag Input Tags

To build input tags mode, create a input element in HTML document with the following mentioned classes and other necessary elements.

<input class="codehim-input-tags" name="tags" type="text" />

<section class="show-input-tags">

<ul class="tags cloud-tags"></ul>

</section>

prettyTag Plugin Options

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

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

$(document).ready(function(){

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

});

The third option is only for tags input mode. When new tags added, this option will assign a url parameter to tag name.

Tip: You can use ?tag= or your custom url parameter in this option.

The value of each new Tag Name and it's generated URL stored in a array named tagsManager. You can further use this array to submit tags etc.