Vamos a realizar un ejemplo con algunos efectos sencillos que se pueden hacer en jQuery, pero programados enteramente sobre PHP.
Veremos a continuación cómo realizar efectos sencillos para animación de elementos de la página. Decimos que son sencillos porque se pueden hacer con llamadas a simples métodos de jQuery, pero si tenemos una ligera idea sobre Javascript, podremos saber que estos efectos no tendrían nada de sencillos si no estuviéramos utilizando un framework como jQuery.
Todos los efectos los vamos a realizar sobre una capa.
<div id="micapa">Esta capa se mueve</div>
Ahora veremos el código PHP para animarla. Comenzaremos por ver un código que se ejecutará cuando el usuario cargue la página, sin que se tenga que pulsar ningún botón.
echo
YsJQuery::newInstance()
->execute(
YsJQuery::animate()
->in("#micapa")
->properties(array(
"left"=>"400px",
"top"=>"40px"
))
->duration(YsJQueryConstant::SLOW)
);
Como vemos el método ejecute() nos sirve para ejecutar código directamente.
Dentro del execute() hacemos una llamada al método animate(), que será el encargado de generar esa animación. Básicamente lo que le indicamos es que la animación se realiza sobre la capa con id="micapa" y que se deben animar las propiedades left y top de CSS (con lo que se producirá un movimiento de la capa por la página).
Ahora vamos a ver cómo se realizaría una animación similar, pero como respuesta a la pulsación de un botón. Para ello definimos un evento y ejecutamos el código sólo cuando se produzca ese evento.
echo
YsJQuery::newInstance()
->onClick()
->in("#miboton")
->execute(
YsJQuery::animate()
->in("#micapa")
->properties(array(
'fontSize'=>'28px',
'width'=>'300px'
))
->duration(YsJQueryConstant::SLOW)
);
Ahora podemos ver un par de efectos todavía más simples, pero también bastante visuales. Se ejecutarán como respuesta al evento click sobre otros botones de la página. En este primer caso hacemos un efecto de fundido, de opaco a transparente, con lo que haremos que desaparezca la capa "micapa".
echo
YsJQuery::newInstance()
->onClick()
->in("#ocultar")
->execute(
YsJQuery::fadeOut()
->in("#micapa")
->duration(YsJQueryConstant::SLOW)
);
Con este otro código haremos un efecto de fundido de transparente a opaco, con lo que conseguiremos que la capa se vuelva a mostrar.
echo
YsJQuery::newInstance()
->onClick()
->in("#mostrar")
->execute(
YsJQuery::fadeIn()
->in("#micapa")
->duration(YsJQueryConstant::SLOW)
);
Para acabar, ponemos el código completo de esta práctica con 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: #336;
color: #fff;
position: absolute;
top: 200px;
left: 0;
font-size: 10px;
font-family: verdana;
}
</style>
</head>
<body>
<h1>Probando el jQuery para PHP</h1>
<button id="miboton">Anima de otra manera!</button>
<button id="ocultar">Ocultar</button>
<button id="mostrar">Mostrar</button>
<div id="micapa">Esta capa se mueve</div>
<?php
echo
YsJQuery::newInstance()
->execute(
YsJQuery::animate()
->in("#micapa")
->properties(array(
"left"=>"400px",
"top"=>"40px"
))
->duration(YsJQueryConstant::SLOW)
);
echo
YsJQuery::newInstance()
->onClick()
->in("#miboton")
->execute(
YsJQuery::animate()
->in("#micapa")
->properties(array(
'fontSize'=>'28px',
'width'=>'300px'
))
->duration(YsJQueryConstant::SLOW)
);
echo
YsJQuery::newInstance()
->onClick()
->in("#ocultar")
->execute(
YsJQuery::fadeOut()
->in("#micapa")
->duration(YsJQueryConstant::SLOW)
);
echo
YsJQuery::newInstance()
->onClick()
->in("#mostrar")
->execute(
YsJQuery::fadeIn()
->in("#micapa")
->duration(YsJQueryConstant::SLOW)
);
?>
</body>
</html>
Puedes ver el ejemplo en marcha en una página aparte.
En el siguiente artículo vamos a hacer otra práctica interesante con jQuery4PHP, en la que veremos cómo realizar un Ajax con PHP.
Miguel Angel Alvarez
Fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Com...