創建新的jQuery UI選項卡並填充Ajax數據

我有一組jQuery ui選項卡，其中一個選項卡以預先用其他頁面的數據預處理的選項卡開始。這工作正常。我想要做的是創建一系列鏈接，點擊後會動態添加一個新選項卡，並在鏈接路徑中加載新選項卡面板中的數據。下面的代碼：創建新的jQuery UI選項卡並填充Ajax數據

$(function(){ 
var $tabs = $('#tabs').tabs({ 
    add: function(event, ui) { 
     $tabs.tabs('select', '#' + ui.panel.id); 
    } 
}); 
$('.add-tab').click(function(e){ 
    e.preventDefault() 
    var tabName=$(this).text(), 
     tabNumber=-1; 
    $tabs.find('ul li a').each(function(i) { 
     if ($(this).text() == tabName) { 
      tabNumber = i; 
     } 
    }); 
    if (tabNumber>=0) 
     $tabs.tabs("select",tabNumber) 
    else 
     $tabs.tabs("add",this.href , tabName) 
    return false 
}) 
}) 

<a href="../views/subscribers.htm" class="add-tab">Subscribers</a> 

<div id="tabs"> 
<ul> 
<li><a href="../views/dashboard.htm">Dashboard</a></li> 
</ul> 
<div id="tabs-1"> 
</div> 
</div>

所以，當你點擊「訂閱」鏈接，就應該從「subscribers.htm」添加新的標籤，標題爲「認購」，並加載數據到標籤面板。一切看起來都很正確，所以我不確定這裏有什麼問題。任何幫助表示讚賞。

來源

2014-09-30 DeanH

jQuery UI選項卡添加方法已棄用：http://jqueryui.com/upgrade-guide/1.9/#deprecated-add-and-remove-methods-and-events-use-refresh-method。

點擊下面的按鈕來查看工作代碼。

$(function() { 
 
    var $tabs = $('#tabs').tabs(); 
 

 
    $('.add-tab').click(function(e) { 
 
    e.preventDefault() 
 
    var tabName = $(this).text(), 
 
     tabNumber = -1, 
 
     tabLink = $(this).attr('href'); 
 
    $tabs.find('ul li a').each(function(i) { 
 
     if ($(this).text() == tabName) { 
 
     tabNumber = i; 
 
     } 
 
    }); 
 
    if (tabNumber >= 0) 
 
     $tabs.tabs("select", tabNumber) 
 
    else { 
 
     $("<li><a href='" + tabLink + "'>" + tabName + "</a></li>") 
 
     .appendTo("#tabs ul"); 
 
     $("#tabs").tabs("refresh"); 
 
    } 
 

 
    return false 
 
    }) 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script> 
 
<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.1/themes/vader/jquery-ui.css"> 
 
<a href="../views/subscribers.htm" class="add-tab">Subscribers</a> 
 

 
<div id="tabs"> 
 
    <ul> 
 
    <li><a href="../views/dashboard.htm">Dashboard</a> 
 
    </li> 
 
    </ul> 
 
    <div id="tabs-1"> 
 
    </div> 
 
</div>

來源

2014-09-30 04:42:00 manishie

那麼，這幾乎可以工作。它爲新標籤添加了正確的標題，但內容未加載到新標籤中。你可以在這裏看到： http://bushidodesigns.net/avst/examples/tabs.html 注意：我稍微改變了你的腳本，所以它的目標是「tab-menu」而不是#tabs ul，因爲它變得混亂了當內容中有列表項時。 – DeanH 2014-09-30 04:56:31

其實你的代碼工作正常。如果您在單擊新訂閱者選項卡時檢查JS控制檯，則會看到404錯誤，因爲頁面'/remote/tab.html'不存在。我將控制檯中的頁面替換爲有效頁面，刷新了jquery選項卡，並且它工作正常。 – manishie 2014-09-30 05:26:06

謝謝，但重新讀了原來的問題。我說過，當你點擊鏈接時，它需要加載你點擊的鏈接中的任何href。我無法在腳本中對鏈接進行硬編碼，因爲我需要在頁面上有多個鏈接。例如： About Contact – DeanH 2014-09-30 06:56:51

感謝manishie用於解決第一塊拼圖。我想出了第二個，所以這裏是完整的答案。您需要捕獲href並將其存儲爲像這樣的var。然後它完美地工作。我很驚訝他們在jQuery UI網站上沒有這樣的例子：

$(function() { 
var $tabs = $('#tabs').tabs(); 
$('.add-tab').click(function(e) { 
e.preventDefault() 
var tabName = $(this).text(), 
tabLink = $(this).attr('href'), 
    tabNumber = -1; 
$tabs.find('.tab-menu li a').each(function(i) { 
    if ($(this).text() == tabName) { 
    tabNumber = i; 
    } 
}); 
if (tabNumber >= 0) 
    $tabs.tabs("select", tabNumber) 
else { 
    $("<li><a href=" + tabLink + ">" + tabName + "</a></li>") 
    .appendTo(".tab-menu"); 
    $("#tabs").tabs("refresh"); 
} 
return false 
}) 
})

來源

2014-09-30 16:22:06 DeanH

創建新的jQuery UI選項卡並填充Ajax數據

回答

相關問題