voici une lecteur de flux rss qui pourrer vous etre utile a vous de voire.
pour faire cela on a besoin de :
en comment tout d'abord par récupérer les informations a afficher (titre et lien de chaque articles disponible dans le fichier rss) sous cet format :
<a href="lien">titre</a>|<a href="lien">titre</a>|<a href="lien">titre</a>...
Fichier getrss.php
<?php
get($_GET['url'])) {
$i = 0;
foreach($rs['items'] as $item) {
$i++;
echo "<a href="\">".$item['title']."</a>|";
if($i == '15'){
break;
}
}
}
?>
maintenant que le contenu est récupérer on l'affiche :
on fait appel aux deux bibliothèque javascript
<script src="/js/prototype.js" type="text/javascript"><!--mce:0--></script>
<script src="/js/script.aculo.us/scriptaculous.js" type="text/javascript"><!--mce:1--></script>
Ensuite on créer les DIVs qui vont contenir le contenu
document.write('<div id="title">Ajax Rss Reader</div>');
document.write('<div id="viewer">');
document.write('<div id="content">loading...</div>');
document.write('</div>');
et la fonction se chargera de l'affichage
function ajaxTicker(url){
$('content').innerHTML = 'Loading feeds ...';
var ajax = new Ajax.Request('getrss.php',
{
method:'get',
parameters:'url='+url,
onComplete:showResponse
});
function showResponse(request){
var liste = request.responseText.split('|');
showContent(0,liste.length);
function showContent(index,end){
new Effect.Fade('content',{
duration:0.5,
afterFinishInternal:function(){
$('content').innerHTML = liste[index];
new Effect.Appear('content',{duration:0.5});
}
});
setTimeout(
function(){
if(index == (end-1)){
index = 0;
showContent(index,end);
}else{
showContent(index+1,end);
}
},5000);
}
}
}
à la fin il ne reste plus qu'a faire appel a la fonction avec le chemin du flux comme paramètre:
ajaxTicker('http://www.mutationevent.com/rss2.php');
et mettre un petit peu de style et le tour est joué
<style>
#title{
float:left;
color:#333;
background-color:#FC0;
padding:5px;
font-family:Arial, Helvetica, sans-serif;
font-size:11px;
font-weight:bold;
}
#viewer{
clear:left;
float:left;
width:400px;
color:#fff;
background-color:#333;
padding:5px;
font-family:Arial, Helvetica, sans-serif;
font-size:11px;
}
#viewer a{
color:#fff;
text-decoration:none;
}
#viewer a:hover{
color:#FC0;
text-decoration:underline;
}
#content{
float:left;
}
</style>
Télécharger la demo ici : ajax rss reader (105)
