This time I will share jQuery Plugin and tutorial about Colorful Tag Cloud Plugin For jQuery – prettyTag, hope it will help you in programming stack.
prettyTag is a jQuery plugin mainly designed for creating a colorful tag cloud that dynamically applies random colors to tags.
In addition, this plugin also supports input mode that allows the user to add/remove tags similar to the tagging system.
How to use it:
1. Include the stylesheet prettytag.css
in the <head>
section of your page and the JavaScript file prettytag.js
before the closing </body>
tag.
1 |
< link rel = "stylesheet" href = "css/prertytag.css" > |
3 |
integrity = "sha384-tsQFqpEReu7ZLhBV2VZlAu7zcOV+rXbYlF2cqB8txI/8aZajjp4Bqd+V6D5IgvKT" |
4 |
crossorigin = "anonymous" ></ script > |
5 |
< script src = "js/jquery.prettytag.js" ></ script > |
2. Create a tag cloud from an HTML unordered list as follows:
01 |
< ul class = "cloud-tags" > |
03 |
< a href = "#1" > Tag 1 </ a > |
06 |
< a href = "#2" > Tag 2 </ a > |
09 |
< a href = "#3" > Tag 3 </ a > |
3. Call the function on the HTML list and done.
3 |
$( ".cloud-tags" ).prettyTag(); |
4. Create a tag input where the users are able to input multiple tags separate with the comma.
1 |
< input class = "codehim-input-tags" name = "tags" type = "text" /> |
3 |
< section class = "show-input-tags" > |
5 |
< ul class = "tags cloud-tags" ></ ul > |
5. Enable/disable the tag icon (Requires Font Awesome Iconic Font).
1 |
$( ".cloud-tags" ).prettyTag({ |
6. Decide whether or not to use random colors.
1 |
$( ".cloud-tags" ).prettyTag({ |
7. Set the tag URL for the tags input. URL parameters are supported as well.
1 |
$( ".cloud-tags" ).prettyTag({ |
About Author:
Authod: Asif Mughal
Website: www.codehim.com
This awesome jQuery plugin is developed by CodeHimBlog. For more Advanced Usages, please check the demo page or visit the official website.