保留在当前jQuery选项卡跨后发布？

Question

我使用jQuery选项卡和ASP.NET列表视图来显示和编辑一些信息。我的问题是，当用户在一个列表视图项中插入一条新记录时，我的jQuery选项卡会返回到第一个选项卡。有没有一种方法可以跟踪我正在使用哪个标签，或者不让它在邮寄后休息？

Answer 1

在asp.net你可以在一个隐藏字段将其存储，而无需使用Cookie（不需要jQuery的饼干参考）。

使用此：

$(function() { 
    $("#tabs").tabs({ 
     activate: function() { 
      var selectedTab = $('#tabs').tabs('option', 'active'); 
      $("#<%= hdnSelectedTab.ClientID %>").val(selectedTab); 
      }, 
     active: <%= hdnSelectedTab.Value %> 
    }); 
}); 

然后在身体里，声明你的隐藏选项卡字段：

<asp:HiddenField ID="hdnSelectedTab" runat="server" Value="0" /> 

基本上，在标签的选择要存储隐藏在ASP中选择标签值领域。然后显示你正在检索的价值。

Answer 2

jQuery cookie plugin（direct download）有built-in support。你这样使用它：

$("#tabs").tabs({ 
    cookie: { expires: 7 } //1 week 
}); 

这不同于保持跨回发，但它通常提供所需的效果。

Answer 3

你可以通过这样获得当前标签：

var selected = $tabs.tabs('option', 'selected'); 

然后，您可以这样选择选项卡（POST完成时）：

$tabs.tabs('select', selected); 

注意选项卡选择基于0的索引，因此选择2表示选择第三个选项卡。

Answer 4

我不是一个.NET家伙，但你可能会钩住表单的submit（）事件，并使用表单数据将当前活动的选项卡发送到服务器。用这种方式，当你真正生成DOM和JS时，你可以简单地在服务器端选择适当的选项卡。

喜欢的东西...

$("#the_form").submit(function(){ 
    var $form   = $(this); 
     selected_tab_idx = $("#the_tabs").tabs("option", "selected"); 
    $('<input />', {type: hidden, name: 'tab_index', value: selected_tab_idx}).appendTo($form); 
    return true; 
}); 

Answer 5

使用jQuery和jQuery UI的新版本，这将是：

$(function() { 
     $("#tabs").tabs({ 
      activate: function() { 
       var selectedTab = $('#tabs').tabs('option', 'active'); 
       $("#<%= hdnSelectedTab.ClientID %>").val(selectedTab); 
      }, 
      active: document.getElementById('<%= hdnSelectedTab.ClientID %>').value 
     }); 
    }); 

的“选择”选项“活跃”取代...... Ofcourse你仍然需要添加隐藏字段：

<asp:HiddenField ID="hdnSelectedTab" runat="server" Value="0" /> 

Answer 6

该解决方案为我工作：源http://saradesh.com/tajuddin/index.php/keep-the-selected-jquery-tab-active-on-partial-post-back-in-asp-net/

<script type="text/javascript"> 
     var selTab; 
     $(function() { 
      var tabs = $("#tabs").tabs({ 
       show: function() { 
        //get the selected tab index 
        selTab = $('#tabs').tabs('option', 'selected'); 

       } 
      }); 

     }); 

    function pageLoad(sender, args) { 

     if (args.get_isPartialLoad()) { 

      $("#tabs").tabs({show: function() { 
        //get the selected tab index on partial postback 
        selTab = $('#tabs').tabs('option', 'selected'); 

       }, selected: selTab }); 

     } 
    }; 

    </script> 

Answer 7

尝试这样的：

添加到页面：

<asp:HiddenField ID="hdnSelectedTab" runat="server" Value="0" /> 

添加到脚本：

$(function() { 
    var activeIndex = parseInt($get("hdnSelectedTab").value); 
    $("#tabs").tabs({ 
     active: activeIndex, 
     activate: function (event, ui) { 
      $get("hdnSelectedTab").value = ui.newTab.index(); 
     } 
    }); 
});