What is Z-Tags?

Z-Tags is a javascript plugin that lets you create tags areas very easily. By using it, you will be able to have tags sections on your webpage, and the possibility to let users add tags in that sections.

You won't need any javascript library, it is totally written in vanillaJs.

Demo

Here you can see a default tags section. There are 3 tags predefined, you can add and delete tags in it (by clicking the area). There is also a method to get the data in it (the button just bellow the area).

HowTo

Include the css and js files in your html file. ("download" button)
Create a div with an id or class you will be able to find with javascipt.
```
<div id="demo1"></div>
```

In your javascript scripts, create an instance of the ZTAGS class for each div that will be transformed in a tags section, add it some arguments if necessary.

var demo1 = document.getElementById('demo1');
var tagsdemo1 = new ZTAGS({
   element: demo1, 
   options: {readonly: false, pattern: false, color: "#6677CC"}
});

Arguments

2 arguments are available, they have to be given on the instanciation of an object with those names :

element : [Dom object] The element (div) that will be transformed in a tags section.
options : [Object] The list of options:

predefined : [Array (optional)] The array of predefined tags.
readonly : [boolean (optional)] Whether user can add, delete tags or not.
pattern : [Array (optional)] The array of granted words for the tags.
color : [String (optional)] the color the tags will appear (like in CSS)

Methods

Some javascript methods have been created:

ZTAGS.add(newTag) : can be used to add a tag on a ZTAGS instance. (newTag must be a string)
ZTAGS.delete(tagToDelete) : can be used to delete a specific tag. (tagToDelete must be a string / will delete all tags with same label)
ZTAGS.get() : returns the array of tags.

Z-Tags

What is Z-Tags?

Demo

HowTo

Arguments

Methods

Examples:

Read-only

Pattern limited

External function calls

Colored tags