JS Tutorial
Download
Demo
- Overview
- Documents
User Rating: 0/5 ( 0 votes)
Your Rating:
taggingJS is a jQuery plugin to create an high customizable front-end tag system. It is like 5 kb and support major browsers in the world!
Source: github.com
1. INCLUDE CSS AND JS FILES
<link href="tag-basic-style.css" rel="stylesheet"> <script src="//code.jquery.com/jquery-latest.min.js"></script> <script src="example/tagging.js"></script>
2. HTML
<div data-tags-input-name="tag" id="tagBox">preexisting-tag</div>
3. JAVASCRIPT
$("#tagBox").tagging();
4. OPTIONS
Below there are the available options to customize taggingJS with type, a little description and the default value:
| Option | Type | Default | Description |
|---|---|---|---|
| case-sensitive | Boolean | false | If false, all text is treated like lowercase. |
| close-char | String | "×" | Single Tag close character. |
| close-class | String | "tag-i" | Single Tag close class. |
| edit-on-delete | Boolean | true | true to edit tag that has just been removed from tag box. |
| forbidden-chars | Array | ["," , ".", "_", "?"] | Array of forbidden characters. |
| forbidden-chars-callback | Function | window.alert | Function to call when is detected a forbidden character. |
| forbidden-chars-text | String | "Forbidden character:" | Basic text passed to forbidden-chars-callback. |
| forbidden-words | Array | [] | Array of forbidden words. |
| forbidden-words-callback | Function | window.alert | Function to call when is detected a forbidden words. |
| forbidden-words-text | String | "Forbidden word:" | Basic text passed to forbidden-words-callback. |
| no-backspace | Boolean | false | Backspace key remove last tag by default, true to avoid that. |
| no-comma | Boolean | false | Comma "," key add a new tag by default, true to avoid that. |
| no-del | Boolean | false | Del key remove last tag by default, true to avoid that. |
| no-duplicate | Boolean | true | If true, there will be no duplicate tag's name in the tag box. |
| no-duplicate-callback | Function | window.alert | Function to call when is detected a duplicate tag. |
| no-duplicate-text | String | "Duplicate tag:" | Basic text passed to no-duplicate-callback. |
| no-enter | Boolean | false | Enter key add a new tag by default, true to avoid that. |
| no-spacebar | Boolean | false | Spacebar key add a new tag by default. true to avoid that. |
| pre-tags-separator | String | ", " | This is used to split the initial text and addpreexistint-tag. By default, you must put new tags using a comma and a space (", "). |
| tag-box-class | String | "tagging" | Class of the tag box. |
| tag-char | String | "#" | Single Tag char. |
| tag-class | String | "tag" | Single Tag class. |
| tags-input-name | String | "tag" | Name to use as name="" in single tags' input. By default, all tags being passed as array like tag[]. |
| type-zone-class | String | "type-zone" | Class of the type-zone. |
5. METHODS
Below there are the available methods of taggingJS with a little description, the argument that it can take and the return type:
| Method | Description | Argument | Return |
|---|---|---|---|
| add( text or[text] ) | Add a new tag. | A String (or an Array ofString) to add as tag, if nullwe get the content of tag boxtype_zone. | Boolean or Funtion |
| addSpecialKeys( [ "type", obj ] ) | Add a special keys to add or remove a tag. | Array - Where "type" is"add" or "remove", obj is like{ key_name: key_code } (it can be also an Array of obj). | A String for error orObject Actually"type"_key(add_key orremove_key). |
| destroy() | Removetype_zone, all tags and other things. | void | Boolean |
| emptyInput() | Empty tag box'stype_zone. | void | $_obj - The jQuerified type_zoneitself. |
| focusInput() | Trigger focus on tag box'stype_zone. | void | $_obj - The jQuerified type_zoneitself. |
| getDataOptions() | Get Data attributes custom options. | void | Object - tag box data attributes custom options. |
| getSpecialKeys() | Return all special keys inside an object (without distinction) | void | Object - All tags as member of strings. |
| getSpecialKeysD() | Return all special keys inside an object (with distinction) | void | An Object with anadd and removeproperties. |
| getTagsObj() | Return all tags as object | void | Array - All tags as member of objects. |
| init() | Init method to bootstrap all things | void | $_obj - The jQuerify tag box. |
| refresh( text ) | Remove and insert all tag | A String with all tags separated by pre-tags-separator option value (if null, we call getTagsmethod) | Boolean |
| remove( text or$_obj ) | Remove last tag or the specified ones in tag box'stype_zone. | A String or $_obj (or anArray of them) of the tag to remove. | A String with error message or $_objof the removed tag. |
| removeAll() | Alias of reset | void | Array - All removed tags. |
| removeSpecialKeys([ "type", obj ] ) | Remove a special key . | Array - Where "type" is"add" or "remove", obj is like{ key_name: key_code } (it can be also an Array of obj). | Object - Actually"type"_key(add_key orremove_key). |
| reset() | Remove all tags from tag box'stype_zone | void | Array - All removed tags. |
| valInput( text ) | Get or set the tag boxtype_zone's value | A String to put as tag boxtype_zone's value. | The value String or$_obj of tag box'stype_zone. |
6. Manipulate tags with methods
Here there are some common pattern to Manipulate tags inside the tag box:
N.B.: $tag_box is the tag box object. To get it:
var t, $tag_box; // We call taggingJS init on all "#tag" divs t = $( "#tag" ).tagging(); // This is the $tag_box object of the first captured div $tag_box = t[0];
// To get all tags inside tag box as an array of String $tag_box.tagging( "getTags" ); >>> ["preexisting-tag", "another-tag"] // To get all tags inside tag box as an array of jQuery Object $tag_box.tagging( "getTagsObj" ); >>> [x.fn.x.init[1], x.fn.x.init[1]]
// To add a tag with "A new tag added via JS" as text $tag_box.tagging( "add", "A new tag added via JS" ); >>> true // To add two tag, one with "tag 1" and the other with "tag 2" as text $tag_box.tagging( "add", ["tag 1", "tag 2"] ); >>> ["tag 1", "tag 2"]
// To remove a tag with text "A new tag added via JS" as text $tag_box.tagging( "remove", "A new tag added via JS" ); >>> $_obj // To remove two tag, one with "tag 1" and the other with "tag 2" as text $tag_box.tagging( "remove", ["tag 1", "tag 2"] ); >>> [$_obj] // Suppose that $tag is the jQuerify object of a tag inside the tag box, you can also do $tag_box.tagging( "remove", $tag] ); >>> $_obj
// To remove all tags $tag_box.tagging( "removeAll" ); // or $tag_box.tagging( "reset" );
// To get special Keys without distinctions
$tag_box.tagging( "getSpecialKeys" );
>>> Object {comma: 188, enter: 13, spacebar: 32, del: 46, backspace: 8}
// To get special Keys with distinctions
$tag_box.tagging( "getSpecialKeysD" );
>>> Object {add: Object, remove: Object}
// To add the "left arrow" as a special key to add a new tag
$tag_box.tagging( "addSpecialKeys", [ "add", { left_arrow: 37 } ] );
// To add the "right arrow" as a special key to remove a tag
$tag_box.tagging( "addSpecialKeys", [ "remove", { right_arrow: 39 } ] );
// To remove the "right arrow" as a special key
$tag_box.tagging( "removeSpecialKeys", 39 );
// To disable taggingJS $tag_box.tagging( "destroy" );
// To disable taggingJS $tag_box.tagging( "emptyInput" );
Get or Set the value of type_zone
// To set "value" as value of the input $tag_box.tagging( "valInput", "value" ); // To get the value of the input $tag_box.tagging( "valInput" );
Trigger Focus event the type_zone
// To Trigger Focus event the input $tag_box.tagging( "focusInput" );
