Cómo crear una interfaz seleccionable en CSS3

Por lo que es posible seleccionar de una lista de elementos en CSS 3 reduce la posibilidad de que el usuario introducirá la información incorrecta. Afortunadamente, HTML5 ya viene con una serie de controles de selección, pero es posible que estos controles no llegan a satisfacer sus necesidades a veces.

Video: Diseñando un Formulario de Login responsive- HTML y CSS

En este caso, una técnica de selección personalizada implementado con jQuery UI podría responder a la necesidad. Una secuencia de selección puede consistir en una

y una serie de

etiquetas, como se muestra aquí. (Puede encontrar el código completo para este ejemplo en la carpeta Capítulo 06Interactions de la código descargable como SelectContent.HTML.)

rojo
Verde
Azul
Púrpura

Observe que el

actúa como un recipiente y la

Video: Formulario desplegable con HTML - CSS - jQuery

etiquetas actúan como elementos dentro del contenedor. (El ejemplo incluye estilos CSS para dar formato a cada uno de los selectores, tales como el uso de un fondo rojo para el elemento de Red - un estilo #Selections define la anchura de los selectores, junto con el margen y el relleno utilizado para mostrarlos.)

No importa cómo se implementa su lista personalizada (y no tiene por qué ser la disposición mostrada), que debe tener una disposición de contenedor / artículo como el que se muestra aquí. Cuando se tiene la disposición en su lugar, puede crear una selección y seguimiento del mecanismo como el que se muestra en el siguiente código:

// Crear una matriz para realizar un seguimiento de la Selección selections.var = new Array () -. // Manejar los selecciona y Anula $ (function () {$ ("#Trozos escogidos") .selectable ({seleccionada: function (event, ui) {// Verificar que el artículo no ha sido ya // added.if (Selections.indexOf (ui.selected.id) == - 1) // Añadir el id del elemento seleccionado // a la array.Selections.push (ui.selected.id) -}, no seleccionada: function (event, ui) {// Encuentra la ubicación del elemento no seleccionado // en el array.var Índice = Selections.indexOf (ui.unselected.id) - // Eliminar que item.Selections.splice (Índice, 1) -}}) -}) // Mostrar el ShowResults results.function () {alert ("Usted ha seleccionado: " Selecciones +) -}

La matriz, Selecciones, mantiene un registro de la lista de selección actual. Para hacer el

, Selecciones, seleccionables, que utilizan el método de selección (). Este ejemplo utiliza dos eventos seleccionados y no seleccionados,, para realizar un seguimiento de las selecciones actuales. Cuando el usuario selecciona un elemento nuevo, el controlador de eventos seleccionados verifica que el artículo no aparece ya en las selecciones, y luego empuja el nuevo elemento en Selecciones.

El controlador de eventos no seleccionada debe realizar dos tareas. En primer lugar, debe localizar el elemento no seleccionado utilizando el método indexOf (). En segundo lugar, se debe utilizar de empalme () para eliminar ese elemento de Selecciones.

Este ejemplo no proporciona ninguna salida de fantasía, pero se puede ver por sí mismo lo bien que funciona la metodología de selección. Haga clic en Mostrar consultas para mostrar la lista de elementos seleccionados. El controlador de eventos ShowResults () muestra una lista de las selecciones para usted. En una aplicación de producción, sólo podría procesar la misma facilidad cada uno de los elementos seleccionados.

Una pieza final a esta aplicación particular es la necesidad de definir un estilo especial. Debe proporcionar un medio para que la pantalla para registrar el estado seleccionado de un artículo en particular, lo que significa que proporciona valores para los #Selections estilo .ui seleccionados, como se muestra aquí:

seleccionados por el .ui #Selections {background: negro-color: blanco-}

Cuando un usuario selecciona un elemento, el fondo se vuelve negro con texto en blanco para que el usuario pueda ver un cambio visual. También puede modificar el texto como un segundo medio de ayudar al usuario a ver la selección.