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