Создание выпадающего меню, которое изменяет содержимое страницы, используя Показать / Скрыть слои и Z-индекс
Я пытаюсь создать боковую панель для сайта, которая позволит пользователю выбрать элемент из выпадающего меню и показать RSS-канал. Фид будет меняться в зависимости от того, какой элемент выбран из списка. Я не уверен, как это сделать, но моей первой мыслью было использовать z-index и показать / скрыть слои. У меня есть один слой и настроенное меню, но оно не позволяет мне изменять канал, отображаемый при выборе другого пункта меню. Кто-нибудь знает, как я могу это сделать?
У меня есть предварительный просмотр того, что я уже сделал. Находится на сайте, ЧУД,
3 ответа
У вас есть два варианта:
предварительно загрузить все RSS-каналы (я предполагаю, что ваш
<ul>
На странице вашего примера есть HTML-вывод ваших RSS-каналов?), скрыть их все при загрузке документа, а затем показать их как выбранныеиспользуйте 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, так как это вообще другая тема).
Это не совсем то же самое, но здесь используются простые CSS и HTML, а Javascript не требуется. Немного обратного инжиниринга может иметь большое значение.
это по-голландски, но это просто: наведите курсор мыши на <a>
части и переключатели изображения.
Чистый CSS+HTML, нет Javascript
При этом используются плагины 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>