Biblioteca de mejora de cuadro de selección personalizable ligera-Selectr

Vista prévia

Descripción

Selectr es una librería JavaScript ligera y personalizable que convierte el cuadro de selección normal en un selector desplegable habilitado para AJAX con estilo y eventos personalizados. Útil para la entrada de etiquetas, selección múltiple y mucho más.

Funcionamiento

Para empezar, debe cargar los archivos JS y CSS de Selectr en la Página Web.

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

O instalar con NPM.

npm install mobius1-selectr

Llame al Selectr en su casilla de selección existente y listo.

var mySelectr = new Selectr(document.getElementById('mySelectBox'));

Personalice el cuadro de selección con las siguientes opciones.

var mySelectr = new Selectr(document.getElementById('mySelectBox'),{



/**


 * Emulates browser behaviour by selecting the first option by default


 * @type {Boolean}


 */


defaultSelected: true,



/**


 * Sets the width of the container


 * @type {String}


 */


width: "auto",



/**


 * Enables/ disables the container


 * @type {Boolean}


 */


disabled: false,



/**


 * Enables / disables the search function


 * @type {Boolean}


 */


searchable: true,



/**


 * Enable disable the clear button


 * @type {Boolean}


 */


clearable: false,



/**


 * Sort the tags / multiselect options


 * @type {Boolean}


 */


sortSelected: false,



/**


 * Allow deselecting of select-one options


 * @type {Boolean}


 */


allowDeselect: false,



/**


 * Close the dropdown when scrolling (@AlexanderReiswich, #11)


 * @type {Boolean}


 */


closeOnScroll: false,



/**


 * Allow the use of the native dropdown (@jonnyscholes, #14)


 * @type {Boolean}


 */


nativeDropdown: false,



/**


 * Allow the use of native typing behavior for toggling, searching, selecting


 * @type {boolean}


 */


nativeKeyboard: false,



/**


 * Set the main placeholder


 * @type {String}


 */


placeholder: "Select an option...",



/**


 * Allow the tagging feature


 * @type {Boolean}


 */


taggable: false,



/**


 * Set the tag input placeholder (@labikmartin, #21, #22)


 * @type {String}


 */


tagPlaceholder: "Enter a tag..."

});

API methods.

// Gets the current value of the select box
mySelectr.getValue()

// Sets the value of the current select box.
 // The method accepts both a single value for both single and multi-selects or an array of values with multi-selects only.
mySelectr.setValue('value-2')

// Searches the available options for a string.
mySelectr.search(query, anchor)

// Adds a new option.
mySelectr.add(data, duplicateCheck)

// Removes an option
mySelectr.remove(data)

// Removes all options
mySelectr.removeAll()

// Returns a serialized object of all options
mySelectr.serialize(toJson)

// Opens the dropdown
mySelectr.open()

// Closes the dropdown
mySelectr.close()

// Toggles the dropdown
mySelectr.toggle()

// Clears all options
mySelectr.clear()

// Resets options
mySelectr.reset()

// Disables the dropdown
mySelectr.disable()

// Enables the dropdown
mySelectr.enable()

Events available

mySelectr.on('selectr.init', function(e) {

// ...
});

mySelectr.on('selectr.open', function(e) {

// ...
});

mySelectr.on('selectr.close', function(e) {

// ...
});

mySelectr.on('selectr.select', function(option) {

// ...
});

mySelectr.on('selectr.deselect', function(option) {

// ...
});

mySelectr.on('selectr.change', function(option) {

// ...
});

mySelectr.on('selectr.clear', function(e) {

// ...
});

mySelectr.on('selectr.reset', function(e) {

// ...
});

mySelectr.on('selectr.paginate', function(data) {

// ...
});

Registro de cambios

11/24/2018

• v2.4.8: fix config bleeding into multiple instances

10/27/2018

• v2.4.5: Fixed Option group isn’t created when using nested data set

10/06/2018

• v2.4.4

09/24/2018

• v2.4.3: fire native “change” event

09/15/2018

• v2.4.2: Added more options, methods, and events.