إنشاء قائمة منسدلة تغير محتوى الصفحة باستخدام إظهار/إخفاء الطبقات ومؤشر Z

Question

أحاول إنشاء شريط جانبي لموقع يسمح للمستخدم بتحديد عنصر من القائمة المنسدلة وإظهار موجز ويب لـ RSS.ستتغير الخلاصة اعتمادًا على العنصر الذي تم تحديده من القائمة.لست متأكدًا من كيفية تحقيق ذلك، لكن فكرتي الأولى كانت استخدام مؤشر z وإظهار/إخفاء الطبقات.لدي طبقة واحدة وتم إعداد القائمة، لكنها لن تسمح لي بتغيير الخلاصة المعروضة عند تحديد عنصر قائمة مختلف.هل يعرف أحد كيف يمكنني تحقيق هذا؟

لدي معاينة مباشرة لما قمت به حتى الآن.وهي موجودة في الموقع , تشود,

Answer 1

لديك خياران:

1. قم بتحميل كافة خلاصات RSS مسبقًا (أفترض أن لديك <ul>'s الموجودة في صفحة المثال الخاصة بك هي مخرجات HTML لخلاصات RSS الخاصة بك؟)، قم بإخفائها جميعًا عند تحميل المستند، ثم اكشفها على النحو المحدد

2. استخدم AJAX للحصول على معلومات الخلاصة المحددة ديناميكيًا مع تغير مربع التحديد الخاص بك.

فيما يلي مثال سريع لإصدار javascript وjQuery للقيام بالأمر السابق:

لغة البرمجة:

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

جافا سكريبت:

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

مسج:

$('#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، لأن هذا موضوع آخر تمامًا).

Answer 2

وهذا يستخدم مسج و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>

Answer 3

وانها ليست بالضبط نفس الشيء، ولكن هذا يستخدم CSS بسيطة وHTML وجافا سكريبت أي حاجة. وهناك القليل من الهندسة العكسية يمكن أن تقطع شوطا طويلا.

Image_switcher

وكان في الهولندية، لكنه بسيط: تحرك مؤشر الفأرة فوق أجزاء <a> ومفاتيح صورة

.

والنقي CSS + HTML، لا جافا سكريبت