Совместное использование элемента между вкладками пользовательского интерфейса jQuery?

Я использую вкладки пользовательского интерфейса jQuery для разделения контента на моей странице. У меня есть «панель ссылок», которую я хотел бы повесить внизу каждой вкладки. (Текст вкладки изменится, но, как правило, пользователь будет перемещаться по вкладкам влево или вправо.)

Размещение div #linkBar внутри первой вкладки заставляет его «выглядеть» правильно, внутри границы Themeroller. Поместив его сразу за пределы div «родительская вкладка», ссылки размещаются под границей темы. Я пытался создать разделитель div, но он просто толкает #linkBar дальше.

Конечно, когда пользователь переключается на другую вкладку, панель ссылок исчезает. Как организовано владение элементами между вкладками? Должен ли я динамически уничтожать div #linkBar на вкладке, с которой осуществляется переход, и перестраивать его на вкладке, на которую осуществляется переход? Или есть лучший способ переместить его между ними или просто управлять видимостью?

Я хотел бы, чтобы панель ссылок следовала за содержимым каждой вкладки в виде нижнего колонтитула, «плавая» на одну или две строки ниже последнего содержимого каждой вкладки (а не в фиксированном положении относительно панели вкладок).


html jquery-ui jquery-ui-tabs
person Ryan    schedule 31.05.2011    source источник
comment
Не могли бы вы опубликовать код или настроить jsFiddle?   -  person Code Maverick    schedule 01.06.2011
comment
вот он - jsfiddle.net/v8DpH   -  person Ryan    schedule 01.06.2011

Ответы (1)


arrow_upward
4
arrow_downward

Хорошо ... Это было просто добавление классов пользовательского интерфейса jQuery в панель ссылок. Посмотрите мою рабочую демонстрацию jsFiddle:

Я переместил блок linkBar из блока tabOne и поместил его внизу блока tabs:

<div id="container">
    <div id="title">
      <h1>title bar</h1>
    </div>
    <div id="tabs">
        <ul>  
            <li><a href="#tabone">one</a></li>  
            <li><a href="#tabtwo">two</a></li>  
            <li><a href="#tabthree">three</a></li>
        </ul>  
        <div id="tabone">
            content goes here
            <br><br><br><br>more stuff<br><br><br>more stuff<br><br>
        </div>    
        <div id="tabtwo">
             content goes here...
        </div>
        <div id="tabthree">
             content goes here...
        </div>
        <div id="linkBar">
            <span id="leftLink"><< left link</span>
            <span id="rightLink">right link >></span>
        </div>
    </div>
</div>

Я немного изменил стиль linkBar, задав ему верхнее и нижнее поля, а также спрятав его по умолчанию:

#linkBar {
    display: none;
    margin: 10px auto;
}

Затем я просто добавил классы пользовательского интерфейса jQuery в файл $linkBar. Я немного изменил jQuery, чтобы сделать его более читабельным:

$("#accordion").accordion({ header: "h3" });

var $tabs = $("#tabs"),
    $linkBar = $("#linkBar");

$linkBar.addClass("ui-tabs-panel ui-widget-content ui-corner-bottom");
$linkBar.show();
$tabs.tabs();

$('#title').click(function() {

    $tabs.tabs('select', 0);
    return false;

});

Примечание. Вы можете просто добавить class="ui-tabs-panel ui-widget-content ui-corner-bottom" к элементу div linkBar и покончить с этим. Но я думаю, что мне нравится лучше управлять в JS.

person Code Maverick    schedule 01.06.2011
comment
Прекрасно работает. Присвоение элемента классу может упростить управление позже на странице. Спасибо! - person Ryan; 01.06.2011
comment
@Ryan - Нет проблем ... да, это полностью твой выбор. - person Code Maverick; 01.06.2011