Перейдите по ссылкам вкладки во вкладке JQuery UI - PullRequest
Новая
       4

Перейдите по ссылкам вкладки во вкладке JQuery UI

1 голос
/ 15 июня 2010

У меня есть вкладки jquery, такие как 

<ul id="tabsList">
    <li><a href="#tab-1">Name 1</a></li>
    <li><a href="#tab-2">Name 2</a></li>
    <li><a href="http://www.google.com/">Name 3</a></li>
</ul>

<div id="tab-1">content 1</div>
<div id="tab-2">content 2</div>

первые две вкладки загружают соответствующие div. Но третий должен перейти на google.com, вместо этого он ничего не делает. Он просто добавляет http://example.com/index.html#ui-tabs-[object Объект] на URL.

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

Обновление:

Я не хочу загружать google.com внутри страницы. Он должен открывать веб-страницу в новой вкладке / окне, как это делают обычные ссылки.

Ответы [ 4 ]

2 голосов
/ 22 июля 2010

У меня просто была такая же проблема.Я решил это, предоставив вкладке привязки, которая должна быть загружена извне, класс с именем "followtablink".Затем я изменил свой вызов tabs () следующим образом: 

$('.tabs').tabs({
select: function(event, ui) {
    var url = $.data(ui.tab, 'load.tabs');
    var className = ui.tab.className;

    if( className == "followtablink" ) {
        location.href = url;
        return false;
    }
    return true;
}});

Каждый раз, когда вкладка выбирается, она переходит по ссылке, когда встречает данный класс.

Примечание: В JQuery> 1.9.0 используйте , активируйте вместо выбора

2 голосов
/ 15 июня 2010

Я не уверен, что вы хотите, чтобы он делал, но если он откроет ссылку в качестве новой страницы / замены для текущей страницы, документация объясняет:

[Как ...] ... следовать URL-адресу вкладки вместо загрузка контента через ajax

Обратите внимание, что открытие вкладки в новом окно является неожиданным, например, противоречивое поведение разоблачения проблема юзабилити (http://www.useit.com/alertbox/tabs.html).

$('#example').tabs({
    select: function(event, ui) {
        var url = $.data(ui.tab, 'load.tabs');
        if( url ) {
            location.href = url;
            return false;
        }
        return true;
    } });

См. http://jqueryui.com/demos/tabs/#...follow_a_tab.27s_URL_instead_of_loading_its_content_via_ajax

Примечание: В JQuery> 1.9.0 используйте , активируйте вместо выбора

1 голос
/ 16 июня 2010

Когда я увидел сгенерированный исходный код, 

<li><a href="http://www.google.com/">Name 3</a></li>

было изменено на 

<li><a href="#ui-tabs-[object Object]">Name 3</a></li>

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

Так что я попробовал эту опцию. Я удалил атрибут "href" и добавил класс с именем "theLink", например 

<li><a class="theLink" target="_blank">Name 3</a></li>

и затем я добавил следующий jquery 

$('.theLink).attr('href', 'http://www.google.com');

после этого он работал как я исключал. Третья вкладка при нажатии загружает google.com в новую вкладку

0 голосов
/ 15 июня 2010

Вы не можете, так как запрос контента с google.com будет междоменным вызовом, и вызов xhr завершится неудачей.

Почему бы не поместить iframe в третий div содержимого с атрибутом src, указывающим на google?

Демо здесь 

<ul id="tabsList">
    <li><a href="#tab-1">Name 1</a></li>
    <li><a href="#tab-2">Name 2</a></li>
    <li><a href="#tab-3">Google Tab</a></li>
</ul>

<div id="tab-1">content 1</div>
<div id="tab-2">content 2</div>
<div id="tab-3">
    <iframe src="http://www.google.com"></iframe>
</div>
...