Получение целевого URL из вкладок jQuery-UI - PullRequest
Новая
       14

Получение целевого URL из вкладок jQuery-UI

4 голосов
/ 01 сентября 2009

Я работаю над проектом, который интенсивно использует вкладки jQuery и Ajax. Загрузка данных на вкладки сама по себе проста, но данные на вкладках должны быть отфильтрованы с помощью поля выбора, которое находится вне div вкладок.

Вот тут и начинается моя проблема. Допустим, моя вкладка делает Ajax-вызов URL «tab1.html». jQuery tabs изменяет эту цель на хеш-значение, например, "# ui-tabs-10", но исходный URL-адрес можно получить с помощью следующего кода: 

    $("#tabs").tabs({
        select: function(event,ui) {
            var url = $.data(ui.tab, 'load.tabs');
            ...do stuff with url
        }
    });

Но я не могу получить доступ к объекту ui.tab вне этого вызова события. Таким образом, мое событие изменения окна выбора выглядит так: 

var urls = {
    0 : "tab1.html",
    1 : "tab2.html",
    2 : "tab3.html"
}

$('#selectBox').change(function(){
    var tabs = $("#tabs").tabs();
    var id = $('#selectBox').attr("selectedIndex");
    var selectedTab = tabs("option", "selected");
    var newUrl = urls[selectedTab] + "?id=" + id;
    tabs("url", selectedTab, newUrl);
    tabs("load", selectedTab);
});

Моя проблема в том, что хэш-карта. Мне это не нужно, и оно дублирует информацию, которую я уже закодировал в самом элементе tabs. 

<div id="tabs">
    <ul>
        <li><a href="tab1.html">tab1</a></li>
        <li><a href="tab2.html">tab2</a></li>
        <li><a href="tab3.html">tab3</a></li>
    </ul>
</div>

Я исчерпал и документы, и дерево DOM в Firebug, но безрезультатно. Любые идеи о том, как я могу получить href извне события табуляции?

Я использую jQuery UI версии 1.7.2. Muchos Gracias заранее. Вы, ребята, лучшие.

Ответы [ 3 ]

8 голосов
/ 01 сентября 2009

Следующая команда выведет href на консоль.

Демонстрация, которая предупреждает вкладку ajax здесь href 

$('#tabs a').each(function() {
   var href = $.data(this, 'href.tabs');
   console.log(href);
})
5 голосов
/ 26 мая 2010 
var links = $("#thetabs > ul").find("li a");
var url = $.data(links[tabnum], 'href.tabs');

tabnum - это нулевой индекс вкладки, с которой вы хотите получить URL-адрес

1 голос
/ 29 октября 2009

Вы также можете установить свойство title в закладках ссылок. 

<div id="tabs">
    <ul>
        <li><a href="tab1.html" title="First tab contents">tab1</a></li>
        <li><a href="tab2.html" title="Second tab contents">tab2</a></li>
        <li><a href="tab3.html" title="Third tab contents">tab3</a></li>
    </ul>
</div>

При этом JQueryUI создаст div с идентификатором, основанным на заголовке, с пробелами, замененными подчеркиванием, поэтому вы должны иметь доступ к div, используя что-то вроде 

$("#First_tab_contents")

Ура!

...