Latest web development tutorials

jQuery UI ejemplo - seleccione (seleccionable)

Usa el ratón para seleccionar un solo elemento o grupo de elementos.

Para más detalles sobre la interacción seleccionable, consulte la documentación de la API puede seleccionar widgets (el seleccionable el widget) .

La función predeterminada

Activación de funciones seleccionables o en un grupo de elementos en un elemento de DOM. Seleccione la entrada arrastrando el ratón. Mantenga pulsada la tecla Ctrl para seleccionar varias entradas no contiguas.

<! DOCTYPE html>
<Html lang = "es">
<Head>
  <Charset Meta = "UTF-8">
  <Título> Selección de jQuery UI (seleccionable) - La función por defecto </ title>
  <Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <Script src = "// code.jquery.com/jquery-1.9.1.js"> </ script>
  <Script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
  <Link rel = "stylesheet" href = "http://jqueryui.com/resources/demos/style.css">
 
  <Style>
  #feedback {font-size: 1.4em;}
  #selectable .ui-seleccionar {background: # FECA40;}
  #selectable seleccionado .ui-{background: # F39814; color: blanco;}
  #selectable {-style-type lista: none; margin: 0; padding: 0; anchura: 60%;}
  #selectable li {margin: 3px; padding: 0.4em; font-size: 1.4em; altura: 18px;}
  </ Style>
  <Script>
  $ (Function () {
    $ ( "#selectable") .selectable ();
  });
  </ Script>
</ Head>
<Cuerpo>
 
<Ol id = "seleccionable">
  <Li class = "ui-Reproductor-content"> Artículo 1 </ li>
  <Li class = "ui-Reproductor-content"> Artículo 2 </ li>
  <Li class = "ui-Reproductor-content"> Artículo 3 </ li>
  <Li class = "ui-Reproductor-content"> Artículo 4 </ li>
  <Li class = "ui-Reproductor-content"> Artículo 5 </ li>
  <Li class = "ui-Reproductor-content"> Artículo 6 </ li>
  <Li class = "ui-Reproductor-content"> Artículo 7 </ li>
</ Ol>
 
 
</ Body>
</ Html>

Se muestra como una cuadrícula

Deje entrada seleccionable se muestra como una rejilla, para que utilicen CSS con las mismas dimensiones y la pantalla flotante.

<! DOCTYPE html>
<Html lang = "es">
<Head>
  <Charset Meta = "UTF-8">
  <Título> Selección de jQuery UI (seleccionable) - mostrar una cuadrícula </ title>
  <Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <Script src = "// code.jquery.com/jquery-1.9.1.js"> </ script>
  <Script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
  <Link rel = "stylesheet" href = "http://jqueryui.com/resources/demos/style.css">
 
  <Style>
  #feedback {font-size: 1.4em;}
  #selectable .ui-seleccionar {background: # FECA40;}
  #selectable seleccionado .ui-{background: # F39814; color: blanco;}
  #selectable {-style-type lista: none; margin: 0; padding: 0; ancho: 450px;}
  li #selectable {margin: 3px; padding: 1px; float: left; ancho: 100px; altura: 80px; font-size: 4em; text-align: center;}
  </ Style>
  <Script>
  $ (Function () {
    $ ( "#selectable") .selectable ();
  });
  </ Script>
</ Head>
<Cuerpo>
 
<Ol id = "seleccionable">
  <Li class = "ui-estado-default"> 1 </ li>
  <Li class = "ui-estado-default"> 2 </ li>
  <Li class = "ui-estado-default"> 3 </ li>
  <Li class = "ui-estado-default"> 4 </ li>
  <Li class = "ui-estado-default"> 5 </ li>
  <Li class = "ui-estado-default"> 6 </ li>
  <Li class = "ui-estado-default"> 7 </ li>
  <Li class = "ui-estado-default"> 8 </ li>
  <Li class = "ui-estado-default"> 9 </ li>
  <Li class = "ui-estado-default"> 10 </ li>
  <Li class = "ui-estado-default"> 11 </ li>
  <Li class = "ui-estado-default"> 12 </ li>
</ Ol>
 
 
</ Body>
</ Html>

serialización

Escribir una función que stop cuando un evento de disparo para recoger el valor del índice de elementos seleccionados. Estos valores se presentan como la retroalimentación, o en la forma de una cadena de transferencia de datos.

<! DOCTYPE html>
<Html lang = "es">
<Head>
  <Charset Meta = "UTF-8">
  <Título> Selección de jQuery UI (seleccionable) - serializado </ title>
  <Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <Script src = "// code.jquery.com/jquery-1.9.1.js"> </ script>
  <Script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
  <Link rel = "stylesheet" href = "http://jqueryui.com/resources/demos/style.css">
 
  <Style>
  #feedback {font-size: 1.4em;}
  #selectable .ui-seleccionar {background: # FECA40;}
  #selectable seleccionado .ui-{background: # F39814; color: blanco;}
  #selectable {-style-type lista: none; margin: 0; padding: 0; anchura: 60%;}
  #selectable li {margin: 3px; padding: 0.4em; font-size: 1.4em; altura: 18px;}
  </ Style>
  <Script>
  $ (Function () {
    $ ( "#selectable") .selectable ({
      detener: function () {
        var result = $ ( "# select-resultado") .empty ();
        $ ( ".ui-Seleccionados", esto) .Cada (function () {
          índice var = $ ( "li #selectable") .index (este);
          result.append ( "#" + (índice + 1));
        });
      }
    });
  });
  </ Script>
</ Head>
<Cuerpo>
 
<P id = "retroalimentación">
<Span> Usted ha seleccionado: </ span> <span id = "select-resultado"> n </ span>.
</ P>
 
<Ol id = "seleccionable">
  <Li class = "ui-Reproductor-content"> Artículo 1 </ li>
  <Li class = "ui-Reproductor-content"> Artículo 2 </ li>
  <Li class = "ui-Reproductor-content"> Artículo 3 </ li>
  <Li class = "ui-Reproductor-content"> Artículo 4 </ li>
  <Li class = "ui-Reproductor-content"> Artículo 5 </ li>
  <Li class = "ui-Reproductor-content"> Artículo 6 </ li>
</ Ol>
 
 
</ Body>
</ Html>