Tutorial de JQuery UI | Selectable

Selectable

Permite realizar selecciones en un grupo de elementos, con la posibilidad de realizar selecciones múltiples manteniendo pulsada la tecla Control mientras hacemos clic con el botón izquierdo.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

  <head>
    <title>InformaticaPC | Seleccionar elementos con JQuery UI</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

    <style type="text/css">
        body { background-color:lightyellow;font-family:Arial;font-size:10pt; }
        #opciones li { width:120px;margin:10px;list-style-type:none;background-color:lightgreen; }

        /* Con las siguientes dos clases CSS definimos la apariencia de los elementos seleccionados
         * (la primera de ella) y de los que estén siendo seleccionados (la segunda). */
        #opciones .ui-selected { background:red;color:yellow; }
        #opciones .ui-selecting { background:yellow;font-weight:bold; }
    </style>

    <!-- Observa que agregamos también la librería JQuery UI -->
    <script type="text/javascript" src="../lib/jquery-1.9.1.min.js"></script>
    <script type="text/javascript" src="../lib/jquery-ui-1.10.1.custom.min.js"></script>

    <!-- Agregamos también el archivo CSS del theme que usemos -->
    <link type="text/css" rel="stylesheet" href="../lib/css/smoothness/jquery-ui-1.10.1.custom.css" />

    <script type="text/javascript">

        $(document).ready(function()
        {
            $("#opciones").selectable();
        });

    </script>
  </head>

  <body>

      <p>Selecciona elementos de la siguiente lista</p>

      <p>Puedes hacer clic y arrastrar dentro de ella para seleccionar elementos consecutivos<br />
      así como usar la tecla Control para seleccionar elementos alternos.</p>


      <ul id="opciones">
          <li>Opción 1</li>
          <li>Opción 2</li>
          <li>Opción 3</li>
          <li>Opción 4</li>
          <li>Opción 5</li>
          <li>Opción 6</li>
      </ul>

  </body>

</html>

Ejemplo

Vea también: [ Selectable ] - [ Selectable (doc) ] - [ selectable() ]