En la documentación de jQuery4PHP nos ofrecen otra manera de escribir el código de eventos que ellos llaman método estático.
En el presente artículo vamos a trabajar todavía con ejemplos bien sencillos, pero nos introduciremos un poco más en las interesantes posibilidades que nos ofrece jQuery. Veremos cómo desde PHP podemos hacer cosas tan interesantes como alterar las propiedades CSS de los elementos de la página.
Además, repasaremos un método alternativo que nos ofrecen en la documentación para definir eventos en elementos de la página, que se llama método estático.
Método estático de definir eventos con jQuery4PHP
El método estático se llama así porque se utiliza un método estático para definir el evento que deseemos. Por tanto, existe un método estático para cada manejador de evento.Por ejemplo, si deseamos definir un evento click, utilizaremos el método estático click(), de esta manera:
YsJQuery::click()
A continuación tendremos que definir sobre qué elemento se asocia el evento y la función a ejecutar cuando se produzca.
YsJQuery::newInstance();
A partir de aquí, sobre la instancia generada, utilizábamos métodos normales para definir eventos o ejecutar código. Pero en realidad es todo muy parecido.
Para ilustrar cómo definir eventos con método estático vamos a realizar un ejemplo sencillo, que sirve para alterar el color de fondo de un elemento cuando pasamos el ratón por encima.
Podemos comenzar por ver ejemplo en marcha.
Durante este ejemplo aprenderemos también a invocar uno de los métodos de jQuery, css() que sirve para alterar el valor de los atributos CSS de los elementos de la página.
echo
YsJQuery::mouseover()
->in('#micapa')
->handler(
YsJQuery::css()
->inVar("this")
->propertyName("background-color")
->value("#f99")
)
->execute();
Como se puede ver, todo comienza con un echo, igual que antes. Luego se llama al método estático mouseover(), para definir un evento onMouseOver.
Luego se define que el evento se debe asociar al elemento con identificador "micapa". Más tarde definimos la función a ejecutar cuando se produzca el evento, con el método handler().
El paso de cambiar un atributo CSS del elemento es especialmente interesante. Para ello utilizamos el método estático css(). Sobre ese método tenemos que definir cosas como el elemento que queremos actualizar, la propiedad CSS a cambiar y el nuevo valor a colocar.
Con el método estático de definición de eventos debemos acabar invocando al método execute().
Ahora podemos ver también el código del evento onMouseOut.
echo
YsJQuery::mouseout()
->in('#micapa')
->handler(
YsJQuery::css()
->inVar("this")
->propertyName("background-color")
->value("#99f")
)
->execute()
Es exactamente igual, sólo que estamos alterando la propiedad background-color a otro valor.
Podemos ver el código completo del ejemplo
Ahora veamos el código completo de este ejemplo de jQuery4PHP.
<?php
include_once('../lib/YepSua/Labs/RIA/jQuery4PHP/YsJQueryAutoloader.php');
YsJQueryAutoloader::register();
?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd"
>
<html lang="es">
<head>
<title>Probando jQuery 4 PHP</title>
<script type="text/javascript" src="js/jquery.min.js"></script>
<style type="text/css" media="all">
#micapa{
width: 200px;
padding: 10px;
border: 1px solid #ccc;
background-color: #99f;
}
</style>
</head>
<body>
<h1>Probando el jQuery para PHP</h1>
<div id="micapa">Pasa el ratón por encima</div>
<?php
echo
YsJQuery::mouseover()
->in('#micapa')
->handler(
YsJQuery::css()
->inVar("this")
->propertyName("background-color")
->value("#f99")
)
->execute();
echo
YsJQuery::mouseout()
->in('#micapa')
->handler(
YsJQuery::css()
->inVar("this")
->propertyName("background-color")
->value("#99f")
)
->execute()
?>
</body>
</html>
Si lo deseas, puedes ver ejemplo en marcha.
Hay que reconocer que este segundo ejemplo todavía no ha sido muy espectacular, más aun si sabemos que este efecto se podría haber realizado sólo con Hojas de Estilo en Cascada, con los pseudoElementos hover.
Pero bueno, al menos hemos conocido uno de los métodos más importantes de jQuery que es el método CSS, con el que podremos cambiar las propiedades CSS de cualquier elemento de la página.
En el próximo artículo vamos a tratar cosas un poco más interesantes, puesto que empezaremos a ver la realización de efectos dinámicos sencillos con jQuery4PHP.
Miguel Angel Alvarez
Fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Com...