Cómo definir el diseño básico de páginas en css3

los jQuery UI diseño Plug-in para CSS3 hace que sea muy fácil crear diversos tipos de diseños para su sitio sin tener que gastar un montón de tiempo. Los diseños pueden incorporar todo tipo de características interesantes, como la posibilidad de cambiar el tamaño de las particiones de forma dinámica. Está bien; el usuario puede elegir cómo hacer que cada sección de una página con el fin de centrarse en el contenido de interés.

Los ejemplos en el sitio pueden ser complejos, pero vale la pena revisar en jQuery UI diseño Plug-in. Este plug-in puede ayudar a crear sitios increíblemente funcionales con muy poca programación. Por supuesto, un ejemplo más simple es siempre bienvenido.

Este ejemplo demuestra el diseño más simple que puede crear usando este plug-in. El punto de partida es añadir una referencia a la biblioteca plug-in. Este es un caso en el que no tiene que descargar nada. (Puede encontrar el código completo para este ejemplo en la carpeta Capítulo 06Layout de la código descargable como layout.html.)

Con el fin de crear los paneles utilizados para este ejemplo, se define

etiquetas para Norte, Sur, Este, Oeste y Centro de paneles. De todos los paneles, el panel central es el único que se requiere.

Centrar
norte
Sur
Este
Oeste

Observe que cada panel tiene un valor de clase específica asociada a ella. Con el fin de crear un panel en un lugar determinado, debe utilizar la clase predefinida asociada. De lo contrario, el diseño plug-in no reconocerá la

como un panel. El objeto dentro de cada
Define el contenido de ese panel.

El ejemplo también requiere el uso de una secuencia de comandos para asociar los paneles con el plug-in. La siguiente secuencia de comandos es todo lo que necesita para hacer de este ejemplo de aplicación.

Los argumentos que usted provee a la función de la disposición () determinan la aparición de los cristales. El argumento applyDemoStyles proporciona el método de diseño más simple.

Se pueden realizar dos tareas con el ejemplo. Note la zona oscura en el medio de cada línea de separación de los paneles. Al hacer clic en esta zona oscura se cerrará ese panel. Al hacer clic de nuevo volverá a abrir el panel. Cuando se pasa el cursor del ratón sobre una de las líneas, se convierte en una flecha de dos puntas. Esta flecha permite cambiar el tamaño del panel, según sea necesario.

Artículos Relacionados