1

ユーザーがドロップダウン メニューからアイテムを選択して RSS フィードを表示できるサイトのサイドバーを作成しようとしています。フィードは、リストから選択されたアイテムに応じて変化します。これを達成する方法はわかりませんが、最初に考えたのは、z-index とレイヤーの表示/非表示を使用することでした。1 つのレイヤーとメニューをセットアップしましたが、別のメニュー項目を選択したときに表示されるフィードを変更できません。これを達成する方法を知っている人はいますか？

これまでに行ったことのライブ プレビュー アップがあります。サイトCHUDにあります。

4

3 に答える 3

1

まったく同じではありませんが、これは単純な CSS と HTML を使用しており、Javascript は必要ありません。ちょっとしたリバース エンジニアリングは大いに役立ちます。

イメージスイッチャー

オランダ語ですが、簡単です<a>。パーツの上にマウスを移動すると、画像が切り替わります。

純粋な CSS+HTML、Javascript なし

于 2008-11-16T23:04:19.170 に答える
1

これは、jQuery と jFeed プラグインを使用して、ドロップダウンの選択に基づいて DIV の内容を置き換えます。

// 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>
于 2008-11-16T21:36:09.393 に答える
0

次の 2 つのオプションがあります。

  1. すべての RSS フィードを事前に読み込み (<ul>例のページの は RSS フィードの HTML 出力だと思いますか?)、ドキュメントが読み込まれるときにそれらをすべて非表示にし、選択したとおりに表示します。

  2. AJAX を使用して、選択ボックスの変更に応じて選択されたフィード情報を動的に取得します。

前者を実行する JavaScript と jQuery のバージョンの簡単な例を次に示します。

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();

オプション 2 を実行するには、onchange関数が AJAX の読み込みを処理します。AJAX にあまり詳しくなく、フィードがいくつかある場合は、オプション 1 がおそらく最も簡単です。(繰り返しますが、RSS を HTML として解析済みであると仮定しています。これはまったく別のトピックです)。

于 2008-11-16T22:59:07.730 に答える