colortag.js JavaScript Library Examples

Download Back To CSSScript.Com

Implement macOS Finder-style color tagging with colortag.js. Lightweight, customizable, with event hooks.

Default Initialization (Using Class Selector)

These items are automatically initialized by the default class taggable-item:

Default taggable item 1

Default taggable item 2

Custom Selector Initialization

These items are initialized using a custom selector #custom-selector .my-item:

Custom selector item 1 (without pre-existing tag container)

Custom selector item 2 (with pre-existing tag container)

ID-Based Initialization

This item is initialized using a specific ID selector #specific-item:

This is a uniquely targeted item

Initial Tags via Data Attributes

These items have pre-defined tags specified using the data-initial-tags attribute:

Item with initial tags by color name: data-initial-tags="Red, Blue, Green"

Item with initial tags by color value: data-initial-tags="#ec8383, #84cdef"

Item with initial tags by mixed methods: data-initial-tags="Yellow, #ca99de"

Item with custom selector AND initial tags: data-initial-tags="Orange, Gray"

Usage Documentation

HTML Markup

Add the data-initial-tags attribute with a comma-separated list of values:

<div class="taggable-item" data-initial-tags="Red, Blue, Green">
    <p>Content here</p>
    <div class="item-tags"></div>
</div>

You can use either color names or hex values:

<div class="taggable-item" data-initial-tags="#ec8383, #84cdef, Green">
    <p>Mix of hex values and names</p>
    <div class="item-tags"></div>
</div>

Event Log

Events will appear here when you add or remove tags.