Video: Curso Basico de CSS - 7. Posicionamiento de cajas 2024
La biblioteca jQuery para CSS3 se usa principalmente para realizar este tipo de tareas necesarias pero de bajo nivel. Sin embargo, puede usar jQuery para realizar tareas más sofisticadas mediante la incorporación de CSS. Hay un real. Método css () que puede usar para acceder al CSS asociado con un objeto o para modificar el CSS utilizado por ese objeto.
Siempre ve el cambio realizado en el CSS porque los cambios de jQuery están en línea, en lugar de CSS interno o externo.
Imagine que desea crear una tabla de multiplicación formateada que cambie automáticamente el color de una celda seleccionada para que sea más fácil de ver. El ejemplo usa JavaScript para generar la tabla. Por supuesto, también puede generar manualmente la tabla utilizando código estándar, pero este enfoque es más simple. (Puede encontrar el código completo para este ejemplo en la carpeta del Capítulo 06jQuery del código descargable como NestedLoop. Html.)
// Inicia la tabla. documento. write ("
");} else {document. write (" | " + i + " | ");}} // Finaliza la fila del encabezado. documento. write ("
---|---|
" + i + " | "); for (var j = 1; j <= 10; j ++) {// Agrega cada elemento de datos. documento. write ("" + i * j + " | ");} // Finaliza una fila de datos. documento. write ("
Este código comienza creando un
. Después de que se completa la fila del encabezado, el código comienza a crear las filas de datos.
Cada fila de datos comienza con un encabezado, seguido por los valores multiplicados. El bucle doble crea una tabla cuadrada que muestra los valores multiplicados hasta 10 * 10. Para que este ejemplo sea agradable de ver, querrá usar CSS para diferenciar las filas y las columnas. La celda resaltada usaría un tamaño de letra más grande y un color de fuente diferente. Para hacer este cambio, el ejemplo usa el. Estilo de CSS interno seleccionado que se muestra aquí. . Seleccionado {color: azul; tamaño de letra: 30px; font-weight: bold;} El ejemplo ahora contiene una tabla con valores multiplicados y un estilo especial para la celda seleccionada. Sin embargo, todavía carece de formato para las filas y no hay forma de seleccionar una celda específica para que tenga el formato especial requerido.El siguiente código presenta una forma de lograr estos objetivos. // Realiza algunos formatos básicos. $ ("th: even"). css ("color de fondo", "azul claro"); $ ("th: impar"). css ("color de fondo", "verde claro"); $ ("td: par"). css ("color de fondo", "verde claro"); $ ("td: impar"). css ("color de fondo", "azul claro"); $ ("th, td"). css ("ancho", "50px"); // Agrega un efecto especial. $ ("td"). mouseover (función () {$ (esto). toggleClass ("Seleccionado");}); $ ("td"). mouseout (función () {$ (esto). toggleClass ("Seleccionado");}); El formateo consiste en seleccionar los elementos | y | y luego usar un filtro básico para elegir entre elementos pares e impares. Los elementos impares reciben un color de fondo, y los elementos pares reciben otro. Luego, el código usa un selector múltiple para aplicar el mismo formato de ancho a cada una de las celdas.
Al combinar selectores y filtros de selector, puede crear algunos efectos interesantes con poca programación. Es importante recordar que esta tabla se genera mediante programación, por lo que aplicar el formato podría ser difícil. El efecto especial comienza con los elementos | . Cuando un usuario coloca el puntero del mouse sobre un elemento en particular, el código aplica el. Formato CSS seleccionado para ello. Del mismo modo, cuando el usuario coloca el puntero del mouse en otro lugar, el efecto se alterna al formato original utilizado por el elemento | . Alternar el formateo es una forma rápida de crear un efecto de mouseover.
|
---|