Has que tu etiqueta <select> lusca increible!
Clever es una clase creada con JavaScript para permitir la customización de las etiquetas <select> creando un equivalente con otras etiquetas html.
https://https://github.com/lamchang/clever
Empezar
Archivos necesarios:
- clever.min.css (opcional)
- clever.min.js
Para empezar con el uso de clever siguie los siguientes pasos:
##### Incluir clever
(Opcional) Si deseas tener la aparencia por defecto de clever puedes agregar el archivo clever.min.css dentro de la etiqueta <head>:
...
...
<link href="css/clever.min.css" rel="stylesheet" type="text/css">
</head>Para utilizar clever es necesario colocar el archivo clever.min.js antes del cierre de la etiqueta </body> como se muestra a continuación:
...
...
<!-- Se agrega clever.min.js al documento -->
<script src="js/clever.min.js"></script>
<!-- El código crea una instacia de la clase Clever debe ir después de que esta sea declarada -->
</body>Primero asegurate de que tu <select> tenga la siguiente estructura:
<select id="SelectVehicle">
<option value="DeLorean">DeLorean</option>
<option value="MillenniumFalcon">Millennium Falcon</option>
<option value="Enterprise">Enterprise</option>
</select>Se instancia clever tal como se muestra a continuación:
// Se crea una instacia de la clase Clever
var selectVehicle = new Clever( document.getElementById('selectVehicle') );y es posible modificar sus opciones desde el html agregando el atributo data-clever de la siguiente forma:
<select id="SelectVehicle" data-clever="{class: 'my-class', appenTo: document.body}">
...
</select>o desde JavaScript como se muestra abajo:
// Se crea una instacia de la clase Clever y se modifican sus opciones
var selectVehicle = new Clever( document.getElementById('selectVehicle'), {
class: 'my-select',
appenTo: document.body
}
);Para ejecutar scripts existen 3 métodos que serán de utilidad onInit, onClick y onChange.
onInit. Se invoca después de que la estructura HTML de Clever sea construida.
// Uso de método "onInit"
var selectVehicle = new Clever( document.getElementById('selectVehicle'), {
onInit: function(){
// Se invoca el método "toggleDropdown" para desplegar dropdown después construirse la estructura
this.toggleDropdown();
}
}
);onClick. Éste método es invocado al hacer click en el objeto select o cuando es invocado el método toggleDropdown, por lo que se ejecutara sin importar si el dropdown esta deplegado o no.
// Uso de método "onInit"
var selectVehicle = new Clever( document.getElementById('selectVehicle'), {
onClick: function(){
// Si el valor de "selectVehicle" es igual a "true"...
if(this.focus == true) {
// ... Se imprime en la consola
console.log('El dropdown esta desplegado');
}
// ...en otro caso...
else {
// ... Se imprime en la consola
console.log('El dropdown no esta desplegado');
}
}
}
);
// Se imprimirá en consola
Si es igual a true: El dropdown esta desplegado
Si es igual a false: El dropdown no esta desplegadoonChange. Es invocado cuando el valor del objeto select cambia.
// Uso de método "onInit"
var selectVehicle = new Clever( document.getElementById('selectVehicle'), {
onChange: function(){
// ... Se imprime en la consola
console.log('Cambiaste la opción por ' + this.value);
}
}
);
// Se imprimirá en consola
Cambiaste la opción por MillenniumFalcon| Option | Type | Default | Descripción |
|---|---|---|---|
| class | string | '' | Permite agregar una clase al objet Clever. |
| getData | string | 'value' | Especifica de que atributo tomara clever el valor, ejemplo: <option value="DeLorean" car="DeLorean">DeLorean</option> para esta estructura modificamos la opción para que tome el atributo car de la siguiente manera var selectVehicle = new Clever( document.getElementById('SelectVehicle', {data: 'car'}) );. |
| linked | boolean | true | Liga la estructura HTML de clever con el <select>. |
| dropPositionAuto | boolean | true | Cambia automáticamente la posición del dropdown dependiendo de la posición del scroll. |
| appendTo | DOM object | null | Define el objeto del DOM dónde se creará el dropdown. |
| Method | Argument | Descripción |
|---|---|---|
onInit |
function | Es invocado después de la contrucción de la estructura HTML de Clever, se puede utilizar this para acceder a la clase. |
onClick |
function | Es invocado al desplegar las opciones del select, se puede utilizar this para acceder a la clase. |
onChange |
function | Es invocado cuando se elige una opción diferente a la ya seleccionada, se puede utilizar this para acceder a la clase. |
toggleDropdown |
Muestra u oculta el dropdown. | |
destroy |
Destruye Clever. |
| Data | Argument | Descripción |
|---|---|---|
id |
classInstance.id | Regresa el valor del id generado automáticamente por Clever. |
value |
classInstance.value | Regresa el valor del objeto select. |
focus |
classInstance.focus | Regresa true si el dropdown esta desplegado o regresa false si el dropdown no esta desplegado. |
index |
classInstance.index | Regresa el index de la instancia Clever. |
DOM |
classInstance.DOM | Regresa los objetos creados en el DOM por Clever. |
options |
classInstance.options | Regresa las opciones de Clever. |