¿Cómo crear una interfaz que pueden arrastrarse en css3
A veces, un usuario tiene que cambiar la posición de elementos de la pantalla para que sean más fáciles de ver o trabajar. En CSS3, creando un ambiente en el cual el usuario puede mover elementos en torno no tiene por qué implicar a escribir páginas y páginas de código. De hecho, todo lo que realmente necesita es un solo método llamado arrastrable ().
El siguiente código muestra el método utilizado para crear un párrafo arrastrarse en este ejemplo. (Usted puede encontrar el código completo para este ejemplo en el Capítulo carpeta 06 Interacciones del código descargable como DragContent.HTML.)
$ (function () {$ ("# moveme") que pueden arrastrarse () -.}) -Este código es interesante porque en realidad crea una función anónima jQuery que se extiende el entorno jQuery en lugar de trabajar con cualquier característica de página en particular.
El objetivo de esta convocatoria es un párrafo (
etiqueta) con un id de moveme. Todo lo que necesitas hacer es acceder a ese miembro y llame arrastrable () para hacer que se mueva alrededor. Pruebe el ejemplo descargable y usted encontrará que usted puede mover el punto en cualquier lugar que desee en la página.
Para crear un cuadro móvil, este ejemplo se basa en un estilo personalizado. El estilo crea una frontera, permite un montón de espacio para el texto, y luego se centra el texto, tanto horizontal como verticalmente. Este es el estilo utilizado para este ejemplo:
#MoveMe {Border: sólido-width: 200px; altura: 5em text-align: center-line-height: 5em-}Muchos experimentan problemas desarrolladores centrado verticalmente texto dentro de un
etiqueta. Usted puede encontrar un número de maneras de realizar esta tarea. Sin embargo, una de las maneras más fáciles de hacer el trabajo de una manera plataforma y navegador coherente es usar el estilo de línea de altura, como se muestra en el ejemplo.
El truco es sin embargo para establecer los estilos de altura y la línea de altura en el mismo valor - el texto aparecerá siempre en el centro.
-
CS6 Dreamweaver: añadiendo sombras de texto con css3 -
Cómo usar ajax para crear una función de inicialización para HTML5 y CSS3 programación -
Cómo utilizar el objeto ajax jquery para HTML5 y CSS3 programación -
Cómo cambiar los elementos HTML con jQuery -
Cómo agregar un tema css3 a su proyecto -
Cómo crear un borde alrededor de una imagen en css3
¿Cómo crear una interfaz lanzables en css3 A veces, un usuario tiene que arrastrar un elemento a un recipiente y colóquelo en el recipiente. Hay muchos casos de este proceso CSS3 en las aplicaciones actuales.Por ejemplo, el concepto de arrastrar un elemento a un bote de basura y soltándolo…
¿Cómo crear una interfaz de tamaño variable en css3 La gran variedad y tipos de pantallas que se utilizan para mostrar la información hacen que sea necesario que sus comandos CSS3 permiten al usuario cambiar el tamaño de los elementos según sea necesario. En la mayoría de casos, basta con que el…
¿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…
¿Cómo crear una interfaz sortable en css3 Ciertos tipos de clasificación son fáciles para los equipos que se pueden hacer, y usted quiere que su codificación CSS3 para crear esa situación. Por ejemplo, una computadora puede poner artículos en orden alfabético mucho más rápido que un…
Cómo crear estilos externos en css3 La mayoría de los desarrolladores utilizan estilos externos en CSS3 para reducir la cantidad de trabajo necesario para mantener un sitio. Un solo archivo .CSS contiene todos los estilos para el sitio, lo que significa que el cambio de un estilo de…
Cómo detectar el tipo de navegador del usuario en css3 En la mayoría de los casos, los desarrolladores no pueden elegir el navegador del usuario. Para determinar si un determinado usuario puede trabajar con su aplicación CSS3, a continuación, es necesario primero para detectar el navegador del…
Cómo seleccionar elementos con jQuery en css3 Puede usar jQuery para realizar una amplia gama de selecciones de objetos en su aplicación CSS3, pero en su mayor parte, a utilizar los selectores básicos. Puedes leer más sobre ellos en jQuery. Aquí hay una lista de selectores básicos que…
Cómo utilizar jQuery para crear una interfaz con pestañas en css3 Para algunos sitios web de una interfaz con pestañas es el mejor método para mostrar la información. CSS3 tiene código para utilizar el método de jQuery para crear una interfaz con pestañas.$ (function () {// Crear las variables para mantener…
Cómo utilizar varios estilos junto con css3 La comprensión de las reglas de la herencia en CSS3 le ayuda a crear sitios interesantes que requieren un mínimo de mantenimiento. Siguiendo estas reglas, cuando se requiere mantenimiento, normalmente tiene que hacer un solo cambio, en lugar de…
Cómo trabajar con los selectores de sucesos css3 La mayoría de los cambios CSS3 son estáticos - usted pide el navegador para buscar etiquetas específicas, atributos o patrones. Sin embargo, selectores de sucesos eligen objetos en función de un evento en particular, como un ratón por…
¿Cómo trabajar con datepicker en css3 Hay situaciones en las que actualmente HTML5 ofrece una solución para una necesidad particular en CSS3, pero algunos vendedores han implementado todavía. Este es el caso con la fecha y el tiempo de soporte para HTML. Sólo Opera y Chrome…
¿Cómo trabajar con diálogos en css3 Tanto HTML5 y javascript permiten mostrar los cuadros de diálogo en CSS3. Por ejemplo, se puede ver una combinación de un cuadro de diálogo HTML5 / CSS3 que no requiere el uso de javascript en el proyecto de código.Adición de…