¿Cómo crear una interfaz seleccionable en css3

Por lo que es posible seleccionar de una lista de artículos en CSS3 reduce la posibilidad de que el usuario introduzca 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 cumplir con sus necesidades a veces.

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

etiquetas, como se muestra aquí. (Usted puede encontrar el código completo para este ejemplo en el Capítulo carpeta 06 Interacciones del código descargable como SelectContent.HTML.)

rojo
Verde
Azul
Morado

Observe que el

etiquetas actúan como elementos dentro del contenedor. (El ejemplo incluye estilos CSS para dar formato a cada uno de los selectores, como el uso de un fondo de color rojo para el elemento rojo - un estilo #Selections define el ancho 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), debe tener un acuerdo 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 un mecanismo de seguimiento 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 () - // Handle los selecciona y Anula la selección $ (function () {$ ("# Selecciones") seleccionable ({seleccionado:.. La función (evento, ui ) {// Verifique que el artículo no haya sido ya // added.if (Selections.indexOf (ui.selected.id) == - 1) // Añadir el id del elemento seleccionado // para los array.Selections. push (ui.selected.id) -}, no seleccionado: function (evento, ui) {// Encuentra la ubicación del elemento no seleccionado // en el array.var Índice = Selections.indexOf (ui.unselected.id) - / / Remove que item.Selections.splice (Índice, 1) -}}) -}) // Mostrar los ShowResults results.function () {alert ("Ha seleccionado:" + Selección) -}

El Array, Selecciones, mantiene un registro de la lista de la selección actual. Hacer el

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

Este ejemplo no ofrece 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 Selecciones para visualizar la lista de los artículos seleccionados. El controlador de eventos ShowResults () muestra una lista de las selecciones para usted. En una aplicación de producción, sólo podí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. Usted 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-seleccionado, como se muestra aquí:

Seleccionado .ui-#Selections {background: negro-color: blanco-}

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