voici une lecteur de flux rss qui pourrer vous etre utile a vous de voire.

pour faire cela on a besoin de :

• Une classe PHP qui permet de parser un fichier rss "lastRSS 0.9.1" télécharger ici.
• La bibliotheque Javascript "Prototype 1.4.0" Télécharger ici
• La bibliotheque "script.aculo.us 1.5.3" Télécharger ici

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;
  }
  }
  }
?&gt;

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>

Voici la demo

Cet article a été publié le Dimanche 2 avril 2006 à 19:32 et est classé dans Ajax, javascript. Vous pouvez en suivre les commentaires par le biais du flux RSS 2.0. Vous pouvez laisser un commentaire, ou faire un trackback depuis votre propre site.