Целевые вкладки в пределах вкладок с URL #hash (или иначе)

Question

Я использую вкладки библиотеки инструментов jQuery. Вы можете найти их здесь: 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 интерфейсе. Плагин использует параметр называется историей, которая в основном позволяет мне целевую вкладку, используя их имена, например:

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

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

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

ведет меня к> вкладке профиля счета Оsta.ee-. Достаточно просто.

Теперь я не уверен, возможно ли это сделать через 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 к привязке кликов, но в вашей ситуации вам нужно просто вызвать ее при загрузке страницы.