2010-07-23 3 views

ответ

0

Кто-то отправил почти именно этот вопрос несколько minutse назад, а затем удалил пост, прежде чем я мог бы представить свой ответ. Это был ты? В любом случае, я пропущу суки и просто отвечу на ваш вопрос.

Здесь идет.

Предполагая, что вы хотите просто обновить видимое содержимое или страницу без загрузки другого (полностью или через AJAX), вы можете выполнить это с помощью простого сценария «вкладки» - просто подумайте о меню левой боковой панели как вкладки папки, с содержимым папки справа.

Мы назовем меню левой боковой панели «панель вкладок» и ваш основной контейнер правой стороны «панель вкладок».

Допустим HTML вкладке консоли выглядит примерно так:

<ul id="tab_console"> 
    <li id="first"><a href="#">My First Page</a></li> 
    <li id="second"><a href="#">My Second Page</a></li> 
    <li id="third"><a href="#">My Third Page</a></li> 
</ul> 

... и lookw вкладке панели как это:

<div id="tab_pane"> 
    <div id="page_first"></div> 
    <div id="page_second"></div> 
    <div id="page_this"></div> 
</div> 

Вы должны были бы скрыть различное содержимое вкладки панели , поэтому они не все показывают сразу. Вы можете сделать это с помощью CSS:

#tab_pane div {display: none;} 

Теперь нам нужен сценарий, чтобы сделать его работу:

$(document).ready(function(){     // fires when browser loads your html 
    $('#tab_console > li').click(function() { // fires when a tab is clicked 
     $('#tab_pane > div').hide();    // hides all tab contents 
     $('#tab_pane > #page_' + $(this).attr('id')).show(); // show the selected tab 
    }); 

    $('#tab_pane > li#page_first').show();  // load your default tab 
}); 

Это основная идея, во всяком случае. Я бы предложил прочитать вводный учебник для jquery, если вы запутались в этом.

РЕДАКТИРОВАТЬ. Я должен добавить, что пример, отправленный на этот раз, использует запросы ajax. Вы можете прочитать jquery documentation и изменить код там, где это применимо. Так же просто, если не больше, загружать контент в свою панель, поскольку он должен показывать статический контент.

jquery UI library предлагает встроенный плагин для вкладок, но он довольно громоздкий и, на мой взгляд, довольно бессмыслен, когда так просто писать собственное решение.

+0

спасибо. вкладки просты в реализации, но jqapi также имеет возможность искать навигацию и создает хорошие URL-адреса, которые вы можете добавить в закладки. Я думаю, что займу их код :) – Alex

Смежные вопросы