|
4 years ago | |
---|---|---|
.gitignore | 4 years ago | |
LICENSE | 4 years ago | |
README.md | 4 years ago | |
tags-ffs.js | 4 years ago | |
tags-ffs.min.js | 4 years ago | |
tests.html | 4 years ago |
README.md
TAGS FFS
Tags For Forks Sake is less than 300 lines of Javascript that create a tag input that is very customizable.
- Its designed to be tiny,
- Easy to use
- Framework independent.
It should be trustworthy to run in a toaster (or equivalent browsers). The minified version is really small... around 4kb, tiny.
Demo
Demo showing Tags-ffs in action.
Usage
<div class="tags-ffs">
<input type="hidden" class="hidden-tags-ffs">
</div>
<script src="path/to/tags-ffs.js"></script>
<script>
window.onload = tags_ffs.init;
</script>
Or with bells and whistles:
<div class="tags-ffs">
<input type="hidden" class="hidden-tags-ffs">
</div>
<script src="path/to/tags-ffs.js"></script>
<script>
/**
* Run tags_ffs
* Values shown are the libraries defaults
**/
window.onload = tags_ffs.init({
// container element class
container_class : 'tags-ffs',
// hidden input class
hidden_class : 'hidden-tags-ffs',
// class of the created input
input_class : 'input-ffs',
// class for the created tag box where tags are put
holder_class : 'holder-ffs',
// individual created tags will have this class
tag_class : 'tag-ffs',
// Create the text input first
create_input_first : false,
// crated input placeholder,
input_placeholder : 'Comma, Separated, Tags',
// Add tags when Enter key is pressed
add_on_enter : true,
// HTML or character to use for tag deletion
delete_icon : 'x',
// Plugin default css
css : '',
// Callbacks
on_add : function(f){ return f; },
on_del : function(f){ return f; },
on_create_input : function(el){ return el; },
on_create_holder : function(el){ return el; },
});
</script>
Methods
-
init : function(settings)
- Called to construct the tag inputs. -
holder_create : function(el)
- Creates a div that holds the tag elements. -
input_create : function(el)
- Creates the text input field to enter and remove tags. -
input_listen : function(holder, input, e)
- Adds listeners to the input and holder. -
del_item : function(item)
- Delete a tag. Item is the tag element. -
add_item : function(item, holder, allow_duplicates)
- Add a tag to holder and hidden inputs.
Options
-
input_placeholder
: string - The placeholder text for the tag input box. -
create_input_first
: boolean - To create the input box first or the tag holder first. -
add_on_enter
: boolean - If set to true, tags can be added by pressing enter as well as by comma. -
delete_icon
: string - The image, or text to be assigned to the "delete tag" icon. -
css
: string - CSS styles more on this in the Styling section.
Callbacks
-
on_add : function(f){ return f; }
- Called at the end of add item. -
on_del : function(f){ return f; }
- Called at the end of delete item. -
on_create_input : function(el){ return el; }
- Called when text input is created. -
on_create_holder : function(el){ return el; }
- Called when the holder is created.
Styling
Default styles on FFS are rudimentary at best. But this is easy to fix given you have some experience with CSS.
To set your own styles you will have to set the the default ones to false
:
// Remove default styles
tags_ffs.init({css : false});
And then you can add your own styles to the header or to the css option, note that if you are changing any of the default class names your CSS should change accordingly.
Here is an example of the default CSS used by tags-ffs:
.tags-ffs {
width: 100%;
clear: both
}
.tags-ffs .input-ffs {
border-color: inherit;
background-color: inherit;
padding: 15px 10px;
color: inherit;
width: 100%;
float: left;
box-sizing: border-box
}
.tags-ffs .holder-ffs {
min-height: 45px
}
.tags-ffs .holder-ffs span {
position: relative;
display: inline-block;
line-height: 30px;
border: 1px solid;
border-radius: 3px;
padding: 2px 15px 2px 0;
margin: 3px;
max-width: 320px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis
}
.tags-ffs .holder-ffs span u {
position: absolute;
top: 2px;
right: 2px;
cursor: pointer;
text-decoration: none;
opacity: .5
}
.tags-ffs .holder-ffs span.pre-delete {
border-color: #c00
}
Bugs
Found a bug? That's a good thing. Please send me an email about it.
To Do
- A "real" inline tag-box would be nice to have in the test page.
- Port to ES6
Changelog
- 0.0.6 - Current version.
- 0.0.5 - Added generate_css() to generate css using custom classes, (override with
tags_ffs.settings.css
) - 0.0.4 - Pasted comma bug fixed (again).
- 0.0.3 - Started using data-tag attribute to store the tags, added "submit_on_enter" option.
- 0.0.2 - Squashed bug related to pasting text containing commas.
- 0.0.1 - Initial release.