jQuery proporciona una variedad de complementos para bootstrap para propósitos distintivos que se pueden integrar fácilmente en una aplicación web, lo que hace que los sitios web y las aplicaciones se vean más atractivos y confiables.
Los complementos se pueden incluir de dos maneras, es decir, individualmente mediante el uso de archivos *.js individuales de Bootstrap, o todos a la vez, utilizando bootstrap.js .
Bootstrap multiselect también es uno de los complementos de jQuery para Bootstrap, que permite al cliente elegir más de una alternativa de una lista desplegable a la vez. Al utilizar los complementos de selección múltiple, las alternativas desplegables actúan como casillas de verificación, de modo que el cliente puede elegir múltiples alternativas, a diferencia del menú desplegable normal donde solo se puede elegir una alternativa. El complemento se basa en el sistema Twitter Bootstrap y viene con numerosas funciones. En tiempo de ejecución, la simple selección de HTML se puede convertir sin esfuerzo en un botón de Bootstrap utilizando el mismo.
Debe agregar los siguientes recursos a su archivo HTML para usar el complemento jQuery de selección múltiple de arranque en su sitio web.
- Hoja de estilo para permitir que las alternativas se abran como un menú desplegable.
<enlace href=”https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css” rel=”hoja de estilo”>
- Incluya archivos Bootstrap y jQuery como scripts.
<script src=”http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js”></script>
<script src=”https://maxcdn.bootstrapcdn.com/bootstrap /3.3.6/js/bootstrap.min.js”></secuencia de comandos>
- Enlaces Bootstrap CDN para habilitar la función de selección múltiple en la lista desplegable.
<script
src=”https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/js/bootstrap-multiselect.js”>
</script>
<enlace
href=”https://cdnjs .cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/css/bootstrap-multiselect.css”
rel=”hoja de estilo” >
- Ahora cree un menú desplegable HTML con una lista de alternativas.
<select id=”checkboxes” multiple=”multiple”>
<option value=”Array”>Array</option>
<option value=”Lista enlazada”>Lista enlazada</option>
<option value=”Strings”>Strings </option>
<option value=”Pila”>Pila</option>
<option value=”Cola”>Cola</option>
<option value=”Gráfico”>Gráfico</option>
<option value=”Árbol” >Árbol</option>
<option value=”Mapas”>Mapas</option>
</select>
- Y no olvide inicializar el complemento llamando a la función multiselect() .
$(‘#casillas’).multiselect();
Después de inicializar el complemento, el componente desplegable seleccionado ($(‘#checkboxes’)) se reemplazará con un botón de arranque que muestra las opciones disponibles con casillas de verificación.
Ejemplo:
HTML
<html>
<head>
<script src=
"http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js">
</script>
<link href=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"
rel="stylesheet" >
<script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js">
</script>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/js/bootstrap-multiselect.js">
</script>
<link href=
"https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/css/bootstrap-multiselect.css"
rel="stylesheet">
<style>
.container
{
margin-top: 30px;
color: green;
font-size: 20px;
}
</style>
</head>
<body>
<br>
<p class="container"><b>GeeksforGeeks</b></p>
<div class="container">
<b>Select your choice:</b>
<select id="checkboxes" multiple="multiple">
<option value="Linked list">Linked list</option>
<option value="Array">Array</option>
<option value="Strings">Strings</option>
<option value="Stack">Stack</option>
<option value="Queue">Queue</option>
<option value="Graph">Graph</option>
<option value="Tree">Tree</option>
<option value="Maps">Maps</option>
</select>
</div>
<script>
$(document).ready(function() {
$('#checkboxes').multiselect();
});
</script>
</body>
</html>
Salida: Ahora, como puede ver en la salida, se crea una lista desplegable de selección múltiple donde el cliente puede elegir múltiples alternativas a la vez, utilizando los complementos de selección múltiple, integrados siguiendo los pasos anteriores.
navegador compatible:
- Google Chrome
- Borde de Microsoft
- Firefox
- Ópera
- Safari
Publicación traducida automáticamente
Artículo escrito por bhawnaatrish y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA