2008-11-16 7 views
1

J'essaie de créer une barre latérale pour un site qui permettra à un utilisateur de sélectionner un élément dans un menu déroulant et d'afficher un flux RSS . Le flux changera en fonction de l'élément sélectionné dans la liste. Je ne suis pas sûr de savoir comment accomplir cela, mais ma première pensée a été d'utiliser les couches z-index et show/hide. J'ai une couche et le menu mis en place, mais il ne me permettra pas de changer le flux affiché quand un élément de menu différent est sélectionné. Est-ce que quelqu'un sait comment je peux accomplir cela?Création d'un menu déroulant qui modifie le contenu de la page en utilisant Afficher/Masquer les calques et l'index Z

J'ai un aperçu en direct de ce que j'ai fait jusqu'à présent. Il est situé sur le site, CHUD,

Répondre

0

vous avez deux options:

  1. 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

  2. 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).

1

Ceci utilise le plugin jQuery et jFeed pour remplacer le contenu d'un DIV basé sur une sélection déroulante.

// load first feed on document load 
$(document).ready(
    function() { 
     load_feed($('select#feedSelect')[0], 'feedDiv')); // pick first 
    } 
); 

function load_feed(ctl, contentArea) // load based on select 
{ 
    var content = $('#' + contentArea)[0]; //pick first 

    content.html('Loading feed, please wait...'); 

    var feedUrl = ctl.options[ctl.selectedIndex].value; 

    $.getFeed({ url: feedUrl, 
     function(feed) { 
      content.html(''); 
      content.append('<h1>' + feed.title + '</h1>'); 
      feed.items.each( 
       function(i,item) { 
        content.append('<h2><a href="' 
            + item.link 
            + '">' 
            + feed.title 
            + '</a></h2>'); 
        content.append('<p>' + feed.description + '</p>'); 
       } 
      ); 
     } 
    }); 
} 

HTML

<div> 
    <select id=feedSelect onchange="load_feed(this,'feedDiv');" > 
     <option value='url-to-first-feed' text='First Feed' selected=true /> 
     <option value='url-to-second-feed' text='Second Feed' /> 
     ... 
    </select> 
    <div id='feedDiv'> 
    </div> 
</div> 
0

Ce n'est pas exactement la même chose, mais cela utilise CSS et HTML simples et aucun Javascript requis. Un peu de rétro-ingénierie peut aller loin.

Image_switcher

il est en néerlandais, mais il est simple: déplacez votre souris sur les <a> parties et les commutateurs d'image. Pure CSS + HTML, aucun Javascript

Questions connexes