Целевые вкладки внутри вкладок с #hash URL (или иным образом)

Question

Я использую вкладки библиотеки jQuery Tools.Вы можете найти их здесь: http://flowplayer.org/tools/tabs/index.html

Моя базовая разметка выглядит примерно так:

$("#tab-holder ul").tabs("div.tab", { history: true, api: true })
$("#profile-sub-tabs ul.menu").tabs("div");

#profile-sub-tabs - это еще один интерфейс вкладок в основном интерфейсе #tab-holder.Плагин использует параметр под названием history, который в основном позволяет мне ориентироваться на вкладках, используя их имена, например:

http://www.blah.com/tabs.aspx#account

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

http://www.blah.com/tabs.aspx#account#profile

Подводит меня к учетной записи -> вкладка профиля.Достаточно просто.

Теперь я не уверен, возможно ли это сделать через URL, или мне просто нужно каким-то образом обрабатывать запросы через Javascript (каким-то образом) и вручную использовать API для переключения на нужные вкладки,Я просто не уверен, как бы я смог получить эти данные, чтобы перейти на нужную вкладку.

Спасибо!

Answer 1

Официального решения этой проблемы не существует.Мне удалось свернуть один, и это будет работать до тех пор, пока вы можете назначить уникальный идентификатор для каждой вложенной вкладки.

Идея состоит в том, что на самом деле вам не нужно указывать странице, какой верхвкладка, чтобы открыть, потому что он может быть выведен из поиска запрашиваемой вкладки.Таким образом, в вашей ссылке вам нужно будет только сослаться на вложенную вкладку, например, так:

http://www.blah.com/tabs.aspx#profile

Прежде чем я начну, вот живая демонстрация, демонстрирующая это в действии: http://jsfiddle.net/CrAU7/

Допустим, у вас есть html-структура, например, такая:

<div class="wrap">
    <!-- the tabs -->
    <ul class="tabs">
        <li><a href="#big1">Tab 1</a></li>
        <li><a href="#big2">Tab 2</a></li>
        <li><a href="#big3">Tab 3</a></li>
    </ul>
    <!-- tab "panes" -->
    <div class="pane" id="big1">
        <p>#1</p>
        <!-- the tabs -->
        <ul class="tabs">
            <li><a href="#big1small1">Tab 1</a></li>
            <li><a href="#big1small2">Tab 2</a></li>
            <li><a href="#big1small3">Tab 3</a></li>
        </ul>
        <!-- tab "panes" -->
        <div class="pane" id="big1small1">Tab 1 - First tab content.</div>
        <div class="pane" id="big1small2">Tab 1 - Second tab content</div>
        <div class="pane" id="big1small3">Tab 1 - Third tab content</div>
    </div>
    <div class="pane" id="big2">
        <p>#2</p>
        <!-- the tabs -->
        <ul class="tabs">
            <li><a href="#big2small1">Tab 1</a></li>
            <li><a href="#big2small2">Tab 2</a></li>
            <li><a href="#big2small3">Tab 3</a></li>
        </ul>
        <!-- tab "panes" -->
        <div class="pane" id="big2small1">Tab 2 - First tab content.</div>
        <div class="pane" id="big2small2">Tab 2 - Second tab content</div>
        <div class="pane" id="big2small3">Tab 2 - Third tab content</div>
    </div>
    <div class="pane" id="big3">
        <p>#3    </p>
        <!-- the tabs -->
        <ul class="tabs">
            <li><a href="#big3small1">Tab 1</a></li>
            <li><a href="#big3small2">Tab 2</a></li>
            <li><a href="#big3small3">Tab 3</a></li>
        </ul>
        <!-- tab "panes" -->
        <div class="pane" id="big3small1">Tab 3 - First tab content.</div>
        <div class="pane" id="big3small2">Tab 3 - Second tab content</div>
        <div class="pane" id="big3small3">Tab 3 - Third tab content</div>
    </div>
</div>

Важно отметить, что я дал панели вкладок уникальный идентификатор, а href вкладки - это тот же идентификатор, с префиксом хеша,Тогда вам понадобится такая функция:

function TabByHash(hash) {
    var $myTab = $(hash);
    if ($myTab.size() != 0) {
        //alert('hi!');
        var $topTab = $myTab.parent().closest('.pane');
        if ($topTab.size() != 0) {
            $('a[href=#' + $topTab.attr('id') + ']').click();
        }
        $('a[href=#' + $myTab.attr('id') + ']').click();
    }
}

При загрузке страницы вы захотите вызвать функцию с хеш-частью URL: TabByHash(window.location.hash); Затем будет выполнена поиск панели вкладок ссоответствующий идентификатор.Если панель расположена в родительской панели, она сначала активирует эту родительскую панель, а затем активирует запрошенную панель.В противном случае он просто активирует запрошенную панель.Надеюсь, это поможет вам.

ПРИМЕЧАНИЕ. Из-за ограничений на демонстрацию jsFiddle я связал функцию TabByHash с привязкой кликов, но в вашей ситуации вы захотите просто вызвать ее на странице.нагрузка.