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选项卡：双重加载默认选项卡

回答

相关问题