evolutionInlineTagEditor jQuery Plugin

jQuery.fn.evolutionInlineTagEditor

This plugin supports rendering a tag editor supporing editing and selecting of tags.

Usage

$('SELECTOR').evolutionTagEditor(options)

where 'SELECTOR' is an a, span, or div tag.

Options

allTags: (array of strings) List of all tags available in this context
- default ['']
currentTags: (array of strings) List of tags associated to the current content
- default ['']
editorCssClass: (string) CSS class applied to the editor pop-up
- default 'tags-editor'
editButtonText: (string) Label for the element identified by the selector, to open the editor pop-up
- default 'Edit'
selectTagsText: (boolean) Label to open the tag selector within the editor pop-up
- default 'Select Tags'
saveTagsText: Label for the save button on the editor pop-up
- default 'Save'
cancelText: Label for the cancel button on the editor pop-up
- default 'Cancel'
onSave: (function) callback function when tags are saved. The function is passed an array of strings (the list of tags) and a callback function to be called when saving is complete.

Example

Given the following span to contain a inline tag editor control:

<a id="inlineTagEditorControl"></a>

The following will initialize an inline tag editor control, using defaults for most options

var inlineTagEditorControl = $('#inlineTagEditorControl');
inlineTagEditorControl.evolutionInlineTagEditor({
    allTags: ['tag1', 'tag2', 'tag3'],
    currentTags: ['tag2']
    onSave: function(tags, callback) {
        alert('Saving tags: ' + tags.join(', '));

        // ...perform AJAX-based saving of tags here...

        // After a successful save, callback to notify the inline tag editor plugin
        callback();
    }
});

Recommended