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.

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.