MCTekK // DesarrolladoresMC // WebmastersMC // PHP5, AJAX, CSS, RUBY, WEB2.0

SimpleJS, una libreria mas de efectos visuales y AJAX

Lunes 01 De Enero Del 2007 @ 06:11 PM | Linnk

De apenas 14 Kb, esta libreria esta orientada para implementar la técnica AJAX y algunos efectos visuales, de la manera más simple posible simple posible.

Los efectos que dispone no son muchos ni tampoco espectaculares, pero son suficientes para darle un buen visto a nuestra aplicación. Vamos a hacer un ejemplo:

Primero tenemos que ir a la pagina oficial de SimpleJS y descargar los ficheros que vamos a incluir en nuestro proyecto web.

Una vez que lo hayamos hecho, incluimos la libreria en las cabeceras de nuestra pagina, de la siguiente manera:

Code:

Luego generamos nuestra funcion, tambien en JavaScript que sera la que haga las llamadas a la libreria. He tomado el ejemplo de SimpleJS:

Code:

                 
<script type="javascript">
  	function Actualizar() 
  	{
    divId = 'contenido';    // ID of Div which will recover the result.
    url = 'texto.php';    	// 'HTML file to be called' ext *.php, *.inc, ... 
    loader = '<p>loading</p>';  	// 'html for loading' or false 
    effect = 'appear';    	// 'appear' , 'blind' , 'highlight' or false 
    ecache = false;    	//cache for html file true or false 
  
    $ajaxload(divId, url, loader, effect, ecache);
  	}
  </script>

Donde tenemos ademas de los atributos comunes, uno llamado effect. Esto es para darle un efecto sutil a nuestro AJAX. Tenemos 3 tipos de efectos a nuestra disposicio:appear, blind y highlight. O en caso de que no queramos efectos, podemos dejar esa variable en false.

Y nuestra pagina quedaría así:

Code:

                 
<html xmlns="http://www.w3.org/1999/xhtml">
  	<head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  
    <title>Ejemplo de SimpleJS para MCTekk</title>
  
    <script type="text/javascript" src="simple.js"></script>
    <script type="text/javascript">
    	function Actualizar()
    	{
      var divId = 'contenido';    // ID of Div which will recover the result.
      var url = 'texto.html';    // 'HTML file to be called' ext *.php, *.inc, ... 
      var loader = '<p>loading</p>';  	// 'html for loading' or false 
      var effect = 'appear';    	// 'appear' , 'blind' , 'highlight' or false 
      var ecache = false;    	// cache for html file true or false 
  
      $ajaxload(divId, url, loader, effect, ecache);
    	}
    </script>  
  	</head>
  	
  	<body>
    
    <p>Para cargar la info con <em>AJAX</em>, da <a href="javascript:Actualizar()">click aquí</a>.</p>
    
    <div id="contenido">
    	
    </div>
    
  	</body>
  </html>

El efecto es muy chulo. Ademas disponemos tambien de otras funciones que no necesariamente son para hacer cargas mediante AJAX, sino simples efectos para las transiciones que necesitemos:

Code:

$textColor(id, startcol, endcol, time)

$textColor, es una funcion para cambiarle el color a nuestro texto y funciona de la misma forma como hice la carga con AJAX. Creas una funcion en JavaScript que actua como disparador y controlador del efecto.

Es muy sencillo y quizas no nos dara un resultado tan asombroso como otras librerias mas especializadas (como moofx). Pero nos dara un terminado elegante, para nuestra pagina web. Al menos yo, lo recomiendo totalmente.

Enlace | SimpleJS

MC | #permalink 2 comentario