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.
