jQuery Auto Colorful Tags with prettyTag Plugin

prettyTag let's you create dynamic colorful cloud tags both in tags input and tags display mode.

Written in: HTML, CSS and JavaScript
Framework: jQuery 3.3.1 - Font Awesome (Optional)

Fork on GiHub Download

Colorful Cloud Tags Example

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

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

    How to Use

    1. 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>
    <!--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>

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


    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>

    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.

        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.