Как открыть ссылку из вкладок пользовательского интерфейса jQuery ВНУТРИ указанной вкладки - PullRequest
Новая
       8

Как открыть ссылку из вкладок пользовательского интерфейса jQuery ВНУТРИ указанной вкладки

3 голосов
/ 06 мая 2011

Для начала я просмотрел этот вопрос , и это не та проблема.

В конечном итоге я пытаюсь разрешить ссылку с открытой вкладкойпосле щелчка выбирает соответствующий URL-адрес и отображает этот URL-адрес в содержимом исходного пространства вкладок (но оставляя исходные вкладки в фоновом режиме) .

Например:

У меня есть 3 вкладки:

  1. Администратор (admin.php)
  2. Участники (members.php)
  3. Статистика (stats.php)

Когда я открываю вкладку Участники, появляются две дополнительные ссылки:

  1. Добавить участника (add.php)
  2. Удалить участника (delete.php)

Независимо от того, выбираю я один или другой, содержимое add.php или delete.php отображается в том же пространстве с вкладками, что и его родительский элемент (members.php)

Я натолкнулся на документацию по jquery, но, похоже, не получаю правильный доступ.

В настоящее время мой код jquery: 

<script type="text/javascript">
$(function() {  
    $( "#tabs" ).tabs({
        spinner: '<img src="../images/loader.gif" />',
        select: function(event, ui) {
            var tabID = "#ui-tabs-" + (ui.index + 1);
            $(tabID).html("<b>Fetching Data.... Please wait....</b>");
        },
        cache:false,
        load: function(event, ui) {
                $('a', ui.panel).click(function() {
                    $(ui.panel).load(this.href);
                    return false;
                });
        },
        ajaxOptions: {
            error: function( xhr, status, index, anchor ) {
                $( anchor.hash ).html(
                    "Error: Could not retrieve information." );
            }
        }
    });
</script>

EDIT

Я добавил jsbin-файл, чтобы показать формат с вкладками.

http://jsbin.com/apidi6/edit

Я хочу, чтобы по сути я мог щелкнуть ссылку ebay.com на первой вкладке и получитьполноценная загрузка html-страницы ВНУТРИ содержимого вкладки «Общая информация» (без перенаправления страницы)

1 Ответ

2 голосов
/ 06 мая 2011

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

$('a.tabLink').click(function(e) {
    e.preventDefault();
    var href = $(this).attr('href');
    var page = '<iframe src="'+href+'" width="100%" height="100%"></iframe>';
    var id = $(this).closest("div").attr("id");
    $('#'+id).html(page);
});

Вам необходимо убедиться, что к любой ссылке на вкладке добавлен класс: 

<a href="http://www.ebay.com" class="tabLink">

Теперь, что происходит, вы нажимаете ссылку с классом tabLink, jQuery не позволяет браузеру перейти по ссылке. Захватывает адрес ссылки. Он строит iframe для размещения страницы. Он получает ID из div, в котором находится ссылка, затем заменяет содержимое div на iframe.

Посмотрите, как это работает здесь

Причиной использования iframe является то, что javascript не позволяет вам загружать данные из другого домена, сказав, что, глядя на размещенный вами код, если ваши ссылки находятся в одном домене с вашим запросом ajax Если сможет загрузить страницу, код, который я разместил, позволит вам загружать внешние страницы.

Какую ошибку вы получаете, когда запускаете код?

...