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>