Jquery-UI選項卡：雙重加載默認選項卡

我使用jqueryui-tabs來顯示選項卡式UI。這裏是我的標記的外觀在母版：Jquery-UI選項卡：雙重加載默認選項卡

<div id="channel-tabs" class="ui-tabs"> 
    <ul class="ui-tabs-nav"> 
     <li><%=Html.ActionLink("Blogs", "Index", "Blog", new { query = Model.Query, lang = Model.SelectedLanguage, fromTo = Model.FromTo, filters = Model.FilterId }, new{ title="Blog Results" }) %></li> 
     <li><%=Html.ActionLink("Forums", "Index", "Forums", new { query = Model.Query, lang = Model.SelectedLanguage, fromTo = Model.FromTo, filters = Model.FilterId }, null) %></li> 
     <li><%=Html.ActionLink("Twitter", "Index", "Twitter", new { query = Model.Query, lang = Model.SelectedLanguage, fromTo = Model.FromTo, filters = Model.FilterId }, null) %></li> 
    </ul> 

    <div id="Blog_Results"> 
     <asp:ContentPlaceHolder ID="ResultPlaceHolder" runat="server"> 
     </asp:ContentPlaceHolder> 
    </div>

如果內容是通過AJAX加載，我返回一個局部視圖選項卡的內容。如果內容直接加載，我將加載包含ContentPlaceHolder中內容的頁面。

有點像這樣：

<asp:Content ID="Content2" ContentPlaceHolderID="BlogPlaceHolder" runat="server"> 
    <%=Html.Partial("Partial",Model) %> 
</asp:Content> 

//same goes for the other tabs.

有了這個地方，如果我訪問的URL「/論壇」在首次加載在博客選項卡中的論壇內容，引發博客選項卡中的AJAX負荷和替換內容與博客內容。

我試着爲每個標籤放置一個不同的佔位符，但這並沒有解決所有問題，因爲在加載「/ Forums」時它肯定會加載論壇選項卡，但Blog選項卡將首先顯示。此外，當使用單獨的佔位符時，如果我加載「/博客」url，它將首先靜態加載Blog contentplaceholder中的內容，然後觸發ajax調用以再次加載並替換它。如果我只是將標籤鏈接到標籤，那麼當加載論壇標籤時，我將無法獲得博客內容...

您會如何達到預期的行爲？我覺得我在組織我的觀點時可能會有更深層次的問題。是否將標籤放在masterpage中？也許我應該手動hijax鏈接，而不是依靠jquery-ui選項卡爲我完成這項工作。

我無法加載默認的所有標籤，並使用哈希標籤顯示它們，我需要一個Ajax加載，因爲它是一個可以很長的搜索過程。

所以總結起來：

/論壇應該加載論壇選項卡，並讓上點擊時，其他選項卡將加載一個Ajax調用。

/Twitter應加載Twitter標籤，並讓其他標籤....

同樣的/博客和任何標籤，我會稍後添加。

任何想法，以使其正常工作？

來源

2010-05-07 Stéphane

這裏是在母版使用標籤和裝載在他們每個人的內容佔位符，當我如何解決我的雙重負荷的問題，這樣我就可以得到每個標籤具有不同的URL：

$(function() { 
     var first = true; 
     var $tabs = $("#channel-tabs").tabs(
         { 
          ajaxOptions: { 
           beforeSend: function (xhttp) { 
            if (first) return false; 
           }, 
           error: function (xhr, status, index, anchor) { 
            $(anchor.hash).html("Couldn't load this tab. " + xhr.responseText); 
           } 
         }, 
         select: function (event, ui) { 
           first = false; 
         }, 
         cache: true, 
         }); 
    });

當頁面加載時，如果第一次發生Ajax請求，我將取消它，然後在第一次選擇選項卡時重新啓用它。

它並不像我想的那樣乾淨，但它很好地完成了這項工作。

來源

2010-05-11 13:10:46

Jquery-UI選項卡：雙重加載默認選項卡

回答

相關問題