Potente Single & múltiple seleccionar biblioteca-cola. Seleccione

Vista prévia

Descripción

cola. Select es una versión reescrita de la cola de jQuery. Seleccione plugin que se puede utilizar para embellecer & mejorar el cuadro de selección predeterminado sin dependencia.

Main features:

• Admite la selección única y múltiple.
• Búsqueda en vivo.
• Admite opciones agrupadas.
• Agrega descripciones personalizadas a las opciones.
• Le permite mover las opciones seleccionadas a otro elemento.
• Opciones útiles y API.

¿Cómo funciona?

Instalación.

# NPM
$ npm install tail.select --save

Importa la cola. Select JavaScript y StyleSheet.

<link rel="stylesheet" href="tail.select.css">
<script src="tail.select.js"></script>

Inicialice la cola. Seleccione en un cuadro de selección existente.

<select id="example" class="example" multiple>

<option>Option 1</option>

<option>Option 2</option>

<option>Option 3</option>

...
</select>

tail.select("select")

Config la cola. Select pasando el objeto Options como el segundo parámetro a la función Select .

tail.select("select",{


// width/heigh of the select

width: null,

height: 350,


// CSS classes of the select

classNames: null,


// custom placeholder

placeholder: null,


// allows to deselect options or not

deselect: false,


// sets the 'disabled' attribute of the respective tail.select instance and gets overwritten by the source select element during the initialization

disabled: false,


// enables animations

animate: false,


// determines where to place the select

openAbove: null,


// stays open

stayOpen: false,


// opens the select on init

startOpen: false,


// enables multiple selection

multiple: false,


// maximum number of options allowed to select

multiLimit: Infinity,


// pins selected options on the top of the dropdown list.

multiPinSelected: false,


 // shows a counter

multiShowCount: true,


// shows the number of selectable options next to the counter number

multiShowLimit: false,



 // allows you to move selected options to another element

multiContainer:

 false,


// shows "Select All" / "Unselect All" buttons

multiSelectAll: false,


// shows "All" / "None" buttons on each Optgroup

multiSelectGroup: true,


// enables descriptions for options

descriptions: false,


// additonal options

items: {},


// set / change the localization / language

locale: "en",


linguisticRules: {


"ё": "е"

},


// 'ASC', 'DESC', or custom function

sortItems: false,


// 'ASC', 'DESC', or custom function

sortGroups: false,


// set an event listener to the source select element

sourceBind: false,


// set the display: none styling, to the source select element.

sourceHide: true,


 // enables live search

search: false,


// auto sets the focus

searchFocus: true,


// highlights matched options

searchMarked: true,


// allows to exclude disabled options on the search

searchDisabled: true,


// hide options

hideSelect: true,


// hides selected options

hideSelected: false,


// hides disabled options

hideDisabled: false,


// sets an event listener to the source select element

bindSourceSelect:
 false,


// enables CSV output

csvOutput: false,

csvSeparator: ","


// function(item , group , search <string|false>){}

cbLoopItem: undefined,


// function(label , search <string|false>){}

cbLoopGroup: undefined,


// gets fired every time when the .init() process of the tail.select instance has been finished / reached the end

cbComplete: undefined,


// gets fired every time when the Dropdown List gets rendered with no single option

cbEmpty: undefined


})

API methods.

// sets label
instance.setLabel();

// sets counter
instance.setCounter(count <int>);

// sets container
instance.setContainer(item <object>, state <string>);

// sets CSV input
instance.setCSVInput();

// chooses an option
instance.choose(state <string>, key <string>, group <string>);

// opens the dropdown
instance.open(animate <undefined|false>);

// closes the dropdown
instance.close(animate <undefined|false>);

// toggles the dropdown
instance.animate(<undefined|false>);

// remove
instance.remove();

// reload
instance.reload();

// sets options
instance.config(config <undefined|string>, value <*>);

// event
instance.on(event <string>, callback <callback>, args <undefined|array>);

Events.

instance.on('open', function(){

//...
});

instance.on('close', function(){

//...
});

instance.on('change', function(){

//...
});

Registro de cambios

v0.5.9 (03/26/2019)

• Añadir: las nuevas opciones experimentales de linguisticRules, que permiten las letras regex, que son (usadas) similares.
• Actualización: [ES6] se han cambiado las últimas variables var en Let.

v0.5.8 (03/26/2019)

• Añadir: el nuevo RussianTranslation.
• Agregar: permitir funciones de devolución de llamada como cadenas para permitir una traducción más profunda.
• Add: el nuevo método interno _ e, que maneja las traducciones.

v0.5.7 (03/20/2019)

• Info: ¡ ya no es posible obtener una opción usando el número de opción interno!
• Quitar: el almacenamiento de la matriz interna se ha quitado por completo.
• Corrección de errores: el método. Remove () de las opciones no ha funcionado en el almacenamiento de la matriz interna.
• Corrección de errores: la versión de ECMAScript 6 devuelve una matriz, mientras que la versión predeterminada no.
• Corrección de errores: TypeError: no se puede convertir undefined o null en Object.
• Corrección de errores: Quite las opciones predeterminadas de ordenación.

v0.5.6 (01/31/2019)

• Añadir: la nueva traducción portuguesa brasileña.

v0.5.5 (12/23/2018)

• Añadir: la nueva opción searchDisabled, que permite excluir las opciones desactivadas en la búsqueda.
• Actualización: el método. Finder () depende ahora del método. Find ().
• Corrección de errores: número de versión incorrecto en el objeto principal.
• Corrección de errores: las opciones flotan sobre el campo desplegable.
• Corrección de errores: terrible rendimiento de la búsqueda cuando las descripciones incluidas
• Corrección de errores: la funcionalidad de búsqueda se bloquea exponencialmente cuando la expresión regular coincide con opciones de origen más grandes.

v0.5.4 (12/09/2018)

• Agregar: el nuevo método Modify () en la cadena Storage para cambiar las cadenas globalmente.
• Actualización: el método . Register () comprueba ahora si locale es una cadena y un objeto.
• Actualización: el método . Register () vuelve ahora verdadero en el éxito y falsa en el fracaso!
• Corrección de errores: ES6 el botón "seleccionar todo" no funciona en la búsqueda (todas las opciones se seleccionan).
• Corrección de errores: error de estilo CSS de Z-index (: hover).
• Corrección de errores: barra de desplazamiento innecesaria (durante un cálculo incorrecto del campo desplegable).
• Corrección de errores: el botón "seleccionar todo" selecciona más elementos como se muestra en los resultados de búsqueda.
• Corrección de errores: la funcionalidad de búsqueda se rompe cuando las opciones de selección de origen contienen atributos con guiones.

v0.5.3 (11/29/2018)

• Bugfix
• Se han añadido más opciones y métodos

v0.5.2 (11/18/2018)

• Bugfix

v0.4.2 (10/17/2018)

• Bugfix

v0.4.1 (10/15/2018)

• Bugfix y SCSS

v0.4.0 (10/14/2018)

• Información: primera versión beta
• Agregar: un detector de eventos personalizado que permite más detalles/argumentos.
• Agregar: el nuevo método on () para usar el nuevo detector de eventos personalizado.
• Añadir: el nuevo método config () para obtener y establecer configuraciones después de init.
• Añadir: el nuevo método setCSVInput () para manejar el campo de entrada CSV.
• Add: el nuevo método interno trigger () que maneja los eventos.
• Agregar: los nuevos métodos de devolución de llamada createGroup () y createItem () predeterminados.
• Añadir: las nuevas opciones cbLoopItem y cbLoopGroup, que permite utilizar una función de devolución de llamada personalizada para la creación de opciones y grupos dentro de la lista desplegable.
• Añadir: las nuevas opciones de multiSelectAll y multiSelectGroup, que permite (un) seleccionar todas las opciones o todas las opciones dentro de un grupo!
• Añadir: la nueva función Walker () que sustituye a Walk ().
• Agregar: el nombre de clase adicional en la búsqueda en los resultados de búsqueda.
• Actualización: el jQuery y MooTools enlaces.
• Actualización: el método init () en tailOptions utiliza ahora también set ().
• Update: el método Reload () utiliza la misma instancia en lugar de crear uno nuevo.
• Actualización: el método Open (), Close () y Toggle () acepta ahora un parámetro, que deshabilita | la animación (si está activada).
• Actualizar: el grupo también se mostrará en los resultados de búsqueda.
• Actualización: nuevas cadenas que incluyen una nueva estructura de clave de cadena (+ traducciones actualizadas).
• Actualizar: asigne el método de cadena HTML en lugar de la creación de un solo elemento en init ().
• Actualización: la opción predeterminada para la altura se ha cambiado a 350 (PX) de acuerdo con la nueva configuración basada en maxHeight JS (reemplaza la configuración de CSS).
• Actualización: la devolución de llamada de ordenación en el método Walker () ahora se llama directamente en su lugar como devolución de llamada dentro de la función sort ()!
• Actualización: el diseño CSS ha sido modificado y adaptado a las nuevas características.
• Codacy: esperado '! = = ' y en su lugar vio '! = '. (eqeqeq)
• Codacy: Evite las asignaciones en operandos. (Al menos en si)
• Codacy: ' tailOptions ' se usó antes de que se definiera. (no-use-Before-define)
• El codacy: ' i ' ya está definido. (no-redeclarar)
• Renombrar: la variable internval tailSelect. instances ha sido renombrada en tailSelect. inst.
• Corrección de errores: visualización de la cola. Seleccione fuera de la ventanilla #4. Gracias a tomasKucera
• Corrección de errores: el objeto de opción de elementos no agrega una descripción de opción.
• Corrección de errores: no cierre la lista desplegable cuando se reproduce con el elemento multiContainer.
• Corrección de errores: ¡ los elementos ya seleccionados se pueden seleccionar de nuevo!
• Corrección de errores: Cargue elementos en el campo multiContainer y csvInput en las recargas suaves.
• Obsoleto: la función Walk () se ha marcado como obsoleta y se elimina en el futuro!

v0.3.6 (10/11/2018)

• Hotfix: Regex de búsqueda mal coincidente/defectuoso en diferentes condiciones HTML.

v0.3.5 (10/11/2018)

• Actualizar: cambiar para la expresión de bucle.
• El codacy: ' EV ' ya está definido. (no-redeclarar).
• Codacy: ' EV ' usado fuera del contexto vinculante. (bloque-ámbito-var).
• Corrección de errores: comprobación de instancia de constructor.
• Corrección de errores: número de versión incorrecto.
• Hotfix: al buscar cuando la descripción de los datos se > Char

v0.3.4 (10/06/2018)

• Agregar: las opciones csvOutput y csvSeparator, así como un método de entrada CSV oculto.
• Añadir: soporte como definición de módulo asincrónico, probado con requireJS (soy nuevo con AMD).
• Actualización: ¡ la opción animar ahora está establecida en true por defecto!
• Actualización: uso correcto de las etiquetas/marcadores de posición.
• Bugfix: escape de caracteres RegExp en la cadena de búsqueda.-with-JavaScript-y-CSS3