保留在當前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(); 
     } 
    }); 
});