JQuery es una liviana librería de JavaScript, pensada para interactuar con los elementos de una Web por medio del DOM. Lo que la hace tan especial es su sencillez y su reducido tamaño.
Para que vean cuan sencillo es JQuery, aquí les va este pequeño webtip. Tomando como base el tutorial de scx7:
Código :
<?php
[color=olive]//aqui va la URI del blog gestionado por WordPress
$filename = "http://www.cristalab.com/rss.php";
header("Content-type:text/xml");
readfile ($filename);
?>
Código :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"lang="es" xml:lang="es"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Lector RSS con AJAX</title> <script language="JavaScript" type="text/javascript" src="js/jquery.js"></script> <script language="JavaScript" type="text/javascript" src="js/lector_rss.js"></script> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <div id="rss"> <load>Cargando...</load> </div> </body> </html>
Código :
$(document).ready(function (){[color=olive]//cuando el documento este listo
var url="blog.php";[color=olive]//inicio la url de donde estará la dirección del rss
cargar_pagina(url, "#rss");[color=olive]//función que carga el rss (el#, es para indicar que es un id)
});
function cargar_pagina(url,id_contenedor){
var xml = $.ajax({//comienzo el AJAX y le asigno sus propiedades
url: url,// la url
success: function(xml){// cuando tenga éxito
$(id_contenedor).html("");//borro el mensaje cargando...
cargar_rss(xml, id_contenedor);//llamo la función que me mostrara las entradas
}
});
}
function cargar_rss(xml, id_contenedor){
var limit = xml.getElementsByTagName('item').length;//obtengo la cantidad de entradas
var rss = "";//comienzo el string
for (var l=1; l<=limit; l++){// un for desde 1 hasta la cantidad de entradas
//obtengo titulo vinculo fecha de publicación y descripción
var title = xml.getElementsByTagName('title').item(l+1).firstChild.data;
var url = xml.getElementsByTagName('link').item(l+1).firstChild.data;
var pubDate = xml.getElementsByTagName('pubDate').item(l-1).firstChild.data;
var description = xml.getElementsByTagName('description').item(l+1).firstChild.data;
var date = pubDate.split(" +");//no se para que pero estaba en el tutorial
rss = "<fecha>"+date[0]+"<fecha><br/><titulo><a href=\""+url+"\">"+title+"</a></titulo><br/><descripcion>"+description+"</descripcion><hr />";//relleno el string con la información
$(id_contenedor).append(rss);//lo agrego en el contenedor
}
}
Código :
#rss{
font-size:10px;
font-family:Verdana, Arial, Helvetica, sans-serif;
width:800px;
height:auto;
padding-left:15px;
padding-top:40px;
padding-right:10px;
border:1px solid #0033FF;
margin:0 auto;
}
titulo{
font-weight:bold;
color:#FF0000;
}
descripcion{
color:#000000;
}
fecha{
color:#999999;
}
enlace a{
color:#003399;
margin-left:180px;
}
next a{
color:#006699;
margin-left:180px;
text-decoration:none;
}
load{
color:#003366;
}
gcm :
