Themeable HTML seleccionar caja de reemplazo-Select. js

Tiempo de ejecución: 30 minutos. Empezar

Autor: HubSpot
Views Total: 3,727
Sitio oficial: Ir a la web
Actualizado: January 12, 2016
Licencia: MIT

Vista prévia

Themeable HTML seleccionar caja de reemplazo-Select. js

Descripción

Select. js es una biblioteca de JavaScript para aplicar estilos a los elementos de selección HTML estándar con CSS y JavaScript.

3 built-in themes:

  • Predeterminado
  • Oscuro
  • Elegido

Funcionamiento

Elija e incluya un tema CSS en el encabezado.

<link rel="stylesheet" href="css/select-theme-default.css" />

Cree un cuadro de selección HTML estándar.

<select class="demo">
<option value="">Select a country...</option>
<option value="United States">United States</option>
<option value="United Kingdom">United Kingdom</option>
...
</select>

Incluya los archivos de biblioteca JavaScript necesarios en la parte inferior de la página.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="select.js"></script>

Inicializar el plugin con opciones.

<script>
$('select.demo').each(function(){
new Select({
el: this
});
});
</script>

Opciones.

<script>
$('select.demo').each(function(){
new Select({
el: this,
className: 'select-theme-dark', // or select-theme-chosen
useNative: false, // By default, select fallsback to opening the native browser select on touch devices which are less than or equal to 640px in either height or width.
alignToHighlighted: 'never' // Select has an option called alignToHighlighted which allows you to change whether the drop is positioned like a real select element (with the currently selected option over the element) or like a canonical dropdown menu.
});
});
</script>

Registro de cambios

01/12/2016

  • Bugfix

Te puede interesar: