Colorful Links Tag Cloud Plugin For jQuery - prettyTag

Colorful Links Tag Cloud Plugin For jQuery
Colorful Links Tag Cloud Plugin For jQuery (Images: Plugin JS)

prettyTag is a jQuery plugin primarily designed to create a colorful links tag cloud that dynamically applies random colors to tags. Additionally, this plugin also supports an input mode that allows the user to add/remove tags similar to a 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.

<link rel="stylesheet" href="css/prertytag.css">
<script src="" 
<script src="js/jquery.prettytag.js"></script>

2. Create a tag cloud from an HTML unordered list as follows:

<ul class="cloud-tags">
    <a href="#1"> Tag 1 </a> 
    <a href="#2"> Tag 2 </a> 
    <a href="#3"> Tag 3 </a> 

3. Call the function on the HTML list and done.




4. Create a tag input where the users are able to input multiple tags separate with the comma.

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

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

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


5. Enable/disable the tag icon (Requires Font Awesome Iconic Font).

  tagicon: false

6. Decide whether or not to use random colors.

  randomColor: false

7. Set the tag URL for the tags input. URL parameters are supported as well.

  tagURL: "#"

Live Demo

See the Pen Colorful Links Tag Cloud Plugin For jQuery - prettyTag by Plugin JS (@pluginjs) on CodePen.

File Info

File Name :
Size :
Site Download :
Official Website:
Go to website
Previous Post Next Post