informaticaPC

Tutorial de JQuery

Seleccionar elementos mediante 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

Más información

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

Primera página Página anterior Siguiente Última página
Usamos cookies para ofrecerte una experiencia mejorada, el continuar navegando supone que aceptas su uso