Flexible jQuery Tags Management Plugin - tagtacular
File Size: | 3.19 MB |
---|---|
Views Total: | 1423 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
jQuery tagtacular is a Flexible and easy-to-use jQuery plugin that makes it easy to add, edit, remove tags with flexible customization options.
Features:
- Textlike tags Management
- Limit to Existing Tags
- Custom Validator and Commit Functions
- Custom Tags
See also:
- jQuery Plugin For Custom Tags Input and Select Box - selectize.js
- jQuery Tags Manager with Twitter Bootstrap - tagmanager
- Tag input & Autocomplete Plugin - TextExt
Basic Usage:
1. Include jQuery library and jQuery UI library on the web page
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" ></script> <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script> <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/redmond/jquery-ui.css" type="text/css" media="all" />
2. Include jQuery tagtacular plugin on the page
<link href="css/tagtacular.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="js/tagtacular.js"></script>
3. Create a container for the Tags Management
<div class="tagtacular_textlike" id="tagtacular_1"></div>
4. The javascript
var tags1 = $('#tagtacular_1').tagtacular({ entityId: 101, entityTags: ['Boston', 'Chicago', 'New York City', 'Atlanta'], systemTags: ['Austin', 'Dallas', 'Raleigh', 'Richmond', 'Augusta', 'Portland', 'Durham', 'Memphis', 'Nashville', 'Seattle', 'Toronto'], configTagSeparator: ', ', configShowAddButton: false, configShowSwitchButton: false, configDeleteLastOnEmptyKeys: [8], configSortTags: false })
5. All available settings.
commitAddTag: doNothing, commitRemoveTag: doNothing, configAddOnSwitch: true, configAddButtonText: 'Add', configAllowedToEdit: true, configAutocomplete: true, configAutocompletePrune: true, configCaseInsensitive: true, configDeleteSymbol: 'X', configDeleteLastOnEmptyKeys: [], configDelimiters: [13,44], configEditTrayFirst: false, configFlashFailureHideAfter: 5, configFlashSuccessHideAfter: 5, configFormatTagNamesOnInit: false, configLimitToExisting: false, configMinimumTagLength: 1, configMaximumTagLength: 32, configPlaceholderText: false, configRenderFlashMessageSpan: true, configSelectBox: false, configShowAddButton: true, configShowSwitchButton: true, configSortTags: true, configSwitchButtonTextInEdit: 'Done', configSwitchButtonTextInView: 'Edit', configTagSeparator: '', entityId: null, entityType: null, entityTags: [], getAddButtonHtml: defaultGetAddButtonHtml, getLayoutHtml: defaultGetLayoutHtml, getSwitchButtonHtml: defaultGetSwitchButtonHtml, getTagHtml: defaultGetTagHtml, flashFailure: defaultFlashFailure, flashSuccess: defaultFlashSuccess, formatTagName: doNothing, messageAddTagSuccess: 'tag added', messageAddTagAlreadyExists: 'tag is already assigned', messageEmptySelectBoxFailure: 'you must select a tag before adding it', messageRemoveTagSuccess: 'tag removed', messageTagNameInvalid: 'invalid tag name: tag names can only include letters, numbers, underscores, hyphens, and spaces', messageTagTooLong: 'tag name too long, maximum length of [configMaximumTagLength]', messageTagTooShort: 'tag name too short, minimum length of [configMinimumTagLength]', mode: 'edit', postDrawEditTray: doNothing, postDrawTagList: doNothing, postSwitchLayout: doNothing, sort: caseInsensitiveSort, systemTags: [], validate: defaultValidate, validationPattern: /^[0-9A-Za-z_\- ]+$/
Change logs:
v1.1.1 (2016-08-23)
- Performance improvements for long lists of system tags.
v1.1.0 (2015-12-07)
- JS update
v1.0.1 (2015-05-13)
- bugfix - the entityTags setting was not being updated correctly on a removeTag event for any settings objects that were returned. Internal data was correct.
v1.0.0 (2014-05-01)
- major update.
v0.8.6 (2013-07-10)
- fixed a bug where the systems tag list wouldn't be correctly deduped if given redundant tags in the entity tags list
v0.8.3 (2013-07-09)
- easy config to reverse order of trays w/o passing a callback and select box options
- New classes to make it easier to style edit and view tags differently and fixed a bug with no preventDefault() on switch mode buttons causing a page jitter
This awesome jQuery plugin is developed by burnsbert. For more Advanced Usages, please check the demo page or visit the official website.