Biblioteca JavaScript de etiquetado altamente personalizable-taggle. js

Vista prévia

Descripción

taggle. js es una elegante, personalizable, la biblioteca JavaScript de etiquetado entre navegadores para administrar, agregar, quitar, etiquetas de autocompletar en un contenedor editable.

Más características

• Funciona en cualquier elemento, no solo en los campos de formulario.
• Detección de duplicados.
• Especifique las etiquetas permitidas y no permitidas.
• Permite establecer etiquetas preselecticoseleccionadas.
• Soporte de autocompletar.
• Deliómetro personalizado.
• Función de devolución de llamada.

¿Cómo funciona?

taggle. js es una elegante, personalizable, la biblioteca JavaScript de etiquetado entre navegadores para administrar, agregar, quitar, etiquetas de autocompletar en un contenedor editable.

# NPM
$ npm install taggle --save

# Bower
$ bower install taggle --save

taggle. js es una elegante, personalizable, la biblioteca JavaScript de etiquetado entre navegadores para administrar, agregar, quitar, etiquetas de autocompletar en un contenedor editable.

import Taggle from 'taggle';

O importar el JavaScript compilado & archivos CSS en el archivo HTML.

<link rel="stylesheet" href="css/taggle.css">
<script src="js/taggle.min.js"></script>

O importar el JavaScript compilado & archivos CSS en el archivo HTML.

<div id="example"></div>

O importar el JavaScript compilado & archivos CSS en el archivo HTML.

var example = new Taggle('example')

Personaliza el plugin de etiquetado con las siguientes opciones.

var example = new Taggle('example',{


/**


 * Class names to be added on each tag entered


 * @type {String}


 */


additionalTagClasses: '',



/**


 * Allow duplicate tags to be entered in the field?


 * @type {Boolean}


 */


allowDuplicates: false,



/**


 * Allow the saving of a tag on blur, rather than it being


 * removed.


 *


 * @type {Boolean}


 */


saveOnBlur: false,



/**


 * Clear the input value when blurring.


 *


 * @type {Boolean}


 */


clearOnBlur: true,



/**


 * Class name that will be added onto duplicate existant tag


 * @type {String}


 * @todo


 * @deprecated can be handled by onBeforeTagAdd


 */


duplicateTagClass: '',



/**


 * Class added to the container div when focused


 * @type {String}


 */


containerFocusClass: 'active',



/**


 * Should the input be focused when the container is clicked?


 * @type {Bool}


 */


focusInputOnContainerClick: true,



/**


 * Name added to the hidden inputs within each tag


 * @type {String}


 */


hiddenInputName: 'taggles[]',



/**


 * Tags that should be preloaded in the div on load


 * @type {Array}


 */


tags: [],



/**


 * The default delimeter character to split tags on


 * @type {String}


 * @todo Change this to just "delimiter: ','"


 */


delimeter: ',',


delimiter: '',



/**


 * Add an ID to each of the tags.


 * @type {Boolean}


 * @todo


 * @deprecated make this the default in next version


 */


attachTagId: false,



/**


 * Tags that the user will be restricted to


 * @type {Array}


 */


allowedTags: [],



/**


 * Tags that the user will not be able to add


 * @type {Array}


 */


disallowedTags: [],



/**


 * Limit the number of tags that can be added


 * @type {Number}


 */


maxTags: null,



/**


 * If within a form, you can specify the tab index flow


 * @type {Number}


 */


tabIndex: 1,



/**


 * Placeholder string to be placed in an empty taggle field


 * @type {String}


 */


placeholder: 'Enter tags...',



/**


 * Keycodes that will add a tag


 * @type {Array}


 */


submitKeys: [COMMA, TAB, ENTER],



/**


 * Preserve case of tags being added ie


 * "tag" is different than "Tag"


 * @type {Boolean}


 */


preserveCase: false,



// @todo bind callback hooks to instance



/**


 * Function hook called with the to-be-added input DOM element.


 *


 * @param
{HTMLElement} li The list item to be added


 */


inputFormatter: noop,



/**


 * Function hook called with the to-be-added tag DOM element.


 * Use this function to edit the list item before it is appended


 * to the DOM


 * @param
{HTMLElement} li The list item to be added


 */


tagFormatter: noop,
})

Personaliza el plugin de etiquetado con las siguientes opciones.

var example = new Taggle('example',{


/**


 * Function hook called before a tag is added. Return false


 * to prevent tag from being added


 * @param
{String} tag The tag to be added


 */


onBeforeTagAdd: noop,



/**


 * Function hook called when a tag is added


 * @param
{Event} event Event triggered when tag was added


 * @param
{String} tag The tag added


 */


onTagAdd: noop,



/**


 * Function hook called before a tag is removed. Return false


 * to prevent tag from being removed


 * @param
{String} tag The tag to be removed


 */


onBeforeTagRemove: retTrue,



/**


 * Function hook called when a tag is removed


 * @param
{Event} event Event triggered when tag was removed


 * @param
{String} tag The tag removed


 */


onTagRemove: noop
})

API methods.

// sets new options
example.setOptions(options)

// adds new tags
example.add(tag(s))

// removes a tag
example.remove(tag, remove_all=false)

// removes all tags
example.removeAll()

// gets tags object
example.getTags()

// gets tags array
example.getTagElements()

// gets tag values
example.getTagValues()

// gets text input
example.getInput()

// gets the original textarea container
example.getContainer()

// disable
example.disable()

// enable
example.enable()

// sets arbitrary data
example.setData(Any)

// gets the arbitrary data
example.getData()

// disables all events
example.removeEvents()

// Re-attach instance events.
example.attachEvents()

Registro de cambios

v1.14.0 (10/19/2018)

• Actualice la DocString inputFormatter para la entrada Ref