Vídeo de jQuery: offset y otros métodos CSS

  • Por
En el presente videotutorial veremos el método offset y otros de la clasificación CSS que sirven para conocer tamaño y dimensiones de elementos de la página.
Una vez más con vosotros en una nueva entrega del curso de jQuery en vídeo de DesarrolloWeb.com, en la que seguiremos explorando los métodos de la clasificación CSS de jQuery, que nos sirven para conocer y alterar las propiedades de estilos CSS de los elementos de la página. En este vídeo veremos algunos métodos que nos sirven para conocer el tamaño y dimensiones que tienen los componentes de nuestra página web.

Estos métodos nos abrirán muchas posibilidades a la hora de controlar los elementos y permitirán ajustar al milímetro la colocación y el tamaño de unos componentes en función de otros. Todo esto será imprescindible para hacer una gama de efectos especiales con capas.

Nota: Como decimos, todos los métodos nuevos que veremos en este vídeo forman parte de los métodos CSS, de los cuales ya comenzamos a hablar en el vídeo anterior: método css().

Comenzaremos en este vídeo mostrando el método offset() que sirve para obtener la posición de cualquiera de los elementos de la página. Este es el método más importante de los que veremos en el vídeo, por lo que empezaremos por verlo en funcionamiento a través de un sencillo ejemplo y luego realizaremos una práctica un poco mas avanzada.

Nuestra clase continúa con un ejemplo en el que hacemos un campo de texto en el que, haciendo clic, se abre una capa aparte con varios enlaces. Luego, pulsando uno de esos enlaces, su texto se escribirá en el campo de texto. Todo esto es bastante fácil, pero requiere una labor que incluye varios detalles importantes, entre ellos el uso de varios métodos vistos anteriormente en otros videotutoriales de jQuery. Pero la parte novedosa es en la que explicamos a los estudiantes la manera de posicionar la capa donde están los enlaces de manera que se coloque al lado del campo INPUT.

En el vídeo veremos que, aunque movamos la posición del campo de texto, al colocar los enlaces dinámicamente en una posición cercana al campo INPUT, gracias a jQuery y el método offset(), su posición siempre será inmediatamente al lado del campo de texto.

Por último aprenderemos como, a partir de métodos como innerWidth(), podemos obtener las dimensiones de un elemento, en este caso la anchura. Veremos como hacer para que la capa de los enlaces tenga la misma anchura del campo de texto o como, con innerHeight(), podemos averiguar la altura de un elemento para posicionar los enlaces justo debajo.

Con todo ello conseguiremos que nuestra práctica de un componente de rellenado del contenido del campo de texto por medio de las opciones de una capa personalizada, donde aparecen varios enlaces con las varias posibilidades de relleno. En definitiva, lo que habremos construido es una especie de campo SELECT personalizado y mejorado gracias a algunos efectos jQuery y la aplicación dinámica de unas clases para simbolizar si el campo select está abierto o cerrado.

Estoy seguro que este videotutorial interesará mucho a los estudiantes de jQuery, porque aparte de aprender nuevos métodos importantes en el trabajo del día a día con el framework, construiremos un ejemplo completo de interfaz de usuario personalizada. Sin más preámbulos, os dejamos con este vídeo que dura unos 42 minutos, pero que estoy seguro que se os hará bastante corto y útil.

Autor

Miguel Angel Alvarez

Miguel es fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Comenzó en el mundo del desarrollo web en el año 1997, transformando su hobby en su trabajo.

Compartir

Comentarios

cenr670928

20/12/2010
Problemas con ver videos
me parece un sitio muy interesante sin embargo al parecer no tengo acceso a los videos imagino que se debe a algo de permisos por el perfil de la cuenta, me gustaria saber como cambiarlo o tener acceso a ellos sobre todo los de jquery

Gracias

midesweb

04/2/2011
¿permisos? todos los usuarios pueden ver los vídeos
Hola,
No hace falta permiso alguno para ver los vídeos. Cualquier persona puede verlos perfectamente, sin ningún requisito. Están subidos a Youtube, por lo que son públicos para cualquier persona.
No me imagino qué problema puedas tener, pero intenta acceder con otro navegador, a ver si el problema es por ello.
Saludos!

FNdWQGSlbtDRh

17/12/2011
bdldgVMp
This aritlce went ahead and made my day.