Elemento selectable en jQuery
Jquery cuenta con la posibilidad de dar propiedades de selección a los elementos contenidos dentro de un contenedor. Para poder hacer uso de esta característica necesitaremos incluir las librerías auxiliares de jquery ui.core.js y ui.selectable.js. (ambas se pueden sustituir por la librería global jquery-ui.js).
Para ejecutar el método “selectable” (que hace que los elementos hijos de un contenedor sean seleccionables, podamos dejarlos “marcados”) sobre un elemento lo hacemos de forma habitual en jQuery:
$("#divObjetivo).selectable({options})
Donde las opciones y métodos más comunes son:
- delay:valor = Sirve para retardar el inicio de selección los milisegundos indicados en valor, así podemos evitar selecciones no deseadas.
- tolerance:[fit/touch] = Por defecto esta en el valor touch que indica que se seleccionara el elemento siempre que alguna parte del mismo este seleccionada. Con el valor fit, solo se seleccionara el elemento si la totalidad del mismo lo esta.
En el código de ejemplo que mostramos a continuación tenemos un lista html ( ol /ol ) con varios hijos de tipo ( li /li ). Al pulsar sobre el boton “seleccionados” nos mostrará los que han sido marcados. Recordar que para realizar la selección múltiple se debe de usar la tecla “Mayúsculas” mientras se hace click con el ratón.
html>
<head>
<style type="text/css">
#selectable .ui-selecting {
background: #FECA40;
} /* clase de cuando se esta seleccionando */
#selectable .ui-selected {
background: #F39814; color: white;
} /* clase de cuando esta seleccionado */
#selectable {
list-style-type: none;
margin: 0;
padding: 0;
width: 60%;
}
#selectable li {
margin: 3px;
padding: 0.4em;
font-size: 1.4em;
height: 18px;
}
</style>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="ui.core.js"></script>
<script type="text/javascript" src="ui.selectable.js"></script>
<script type="text/javascript">
$(function() {
//todos los elementos incluidos en el id "selectable"
//son seleccionables
$("#selectable").selectable();
});
function seleccionados()
{
//recogemos los elementos activados (han cambiado su clase)
var activados = $("#selectable .ui-selected");
var mensaje = "Ahora estan seleccionados: ";
for(var i=0; i < activados.length; i++)
mensaje += "["+activados[i].innerHTML+"]";
alert(mensaje);
}
</script>
</head>
<body>
<div class="demo">
<ol id="selectable">
<li class="ui-widget-content">Item 1</li>
<li class="ui-widget-content">Item 2</li>
<li class="ui-widget-content">Item 3</li>
<li class="ui-widget-content">Item 4</li>
<li class="ui-widget-content">Item 5</li>
<li class="ui-widget-content">Item 6</li>
<li class="ui-widget-content">Item 7</li>
<li class="ui-widget-content">Item 8</li>
</ol>
</div>
<br>
<button onClick="seleccionados()">Seleccionados</button>
</body>
</html>
El resultado en el navegador sería:
