vous avez deux options:
pré-charge tous les flux rss (je suppose que vos <ul>
« s dans votre page d'exemple sont le HTML sortie de vos flux RSS?), cachez-les tous lorsque votre document se charge, puis révélez-les comme sélectionnés
utilise AJAX pour saisir dynamiquement les informations de fil sélectionnées lorsque votre boîte de sélection change.
est ici un exemple rapide d'une version javascript et jQuery de faire l'ancien:
html:
<select id="showRss">
<option name="feed1">Feed 1</option>
<option name="feed2">Feed 2</option>
</select>
<div id="rssContainer">
<ul id="feed1">
<li>feed item 1</li>
<li>...</li>
</ul>
<ul id="feed2">
<li>feed item 2</li>
<li>...</li>
</ul>
<!-- etc... -->
</div>
javascript:
var rss = document.getElementById('rssContainer'); // main container
var nodes = rss.getElementsByTagName('ul'); // collection of ul nodes
var select = document.getElementById('showRss'); // your select box
function hideAll() { // hide all ul's
for (i = 0; i < nodes.length; ++i) {
nodes[i].style.display = 'none';
}
}
select.onchange = function() { // use the 'name' of each
hideAll(); // option as the id of the ul
var e = this[this.selectedIndex].getAttribute('name');
var show = document.getElementById(e); // to show when selected
show.style.display = 'block';
}
hideAll();
jQuery:
$('#showRss').change(function() {
$('#rssContainer ul').hide('slow'); // added a bit of animation
var e = '#' + $(':selected', $(this)).attr('name');
$(e).show('slow'); // while we change the feed
});
$('#rssContainer ul').hide();
Pour faire l'option 2, votre fonction onchange
gérerait le chargement AJAX. Si vous n'êtes pas familier avec AJAX, et avez quelques flux, l'option 1 est probablement la plus facile. (encore une fois, je suppose que vous avez déjà analysé votre flux RSS en HTML, car c'est un autre sujet tout à fait).