使用按鈕而不是選項卡設置jquery選項卡的Cookie

Question

我正在使用jQuery選項卡的頁面上工作。該示例顯示瞭如何在選擇選項卡時設置cookie。但是，我想要做的是使用按鈕來要求用戶做出有意識的決定，選擇一個特定的選項卡作爲他/她的默認選項卡。

我已經爲每個選項卡的內容添加了一個按鈕，其值等於選項卡定位值。目前，點擊只顯示一條警告消息。

有人可以幫助我將按鈕點擊與將cookie設置爲選項卡值相關聯。 我已經設置了一個jsfiddle來展示我正在嘗試完成的事情。任何幫助將不勝感激！！

http://jsfiddle.net/lbriquet/eLx2d/15/

$(function() { 
    $("#tabs").tabs({ 
     select: function(event, ui) {     
      window.location.replace(ui.tab.hash); 
     }, 
     cookie: { 
      // store cookie for a day, without, it would be a session cookie 
      expires: 1 
     }       
    }); 
    $(".my_button").click(function() { 
     alert($(this).attr("value")); 
    }); 
}); 

Answer 1

您可以使用$.cookie直接提供您的自定義行爲。簡而言之，創建選項卡控件（在創建事件中）檢查是否有cookie值。如果是，則根據該值設置選定的選項卡。並將其存儲在按鈕的點擊：

$(function() { 
    $("#tabs").tabs({ 
     select: function(event, ui) {     
      window.location.replace(ui.tab.hash); 
     }, 
     create: function(e, ui) { 
      var tabs = $(e.target); 
      // Get the value from the cookie 
      var value = $.cookie('selected-tab'); 

      if(value) { 
       console.log('Setting value %s', value); 
       // Set which tab should be selected. Older jQuery UI API 
       tabs.tabs('select',value);     
      } 
     },     
    }); 
    $(".my_button").click(function() { 
     var value = $(this).attr("value"); 
     console.log('Storing tab %s', value); 
     // Store value with key "selected-tab" and set it to expire 
     // in one day. 
     $.cookie('selected-tab', value, {expires: 1}); 
    }); 
}); 

在jQuery用戶界面（上1.9+驗證）的新版本，你需要使用活動選項與選項卡索引，選擇選項卡。

例子：

//store as value in above example or dynamically find index based on the id 
    var selectedIndex = 1; 

    $('#tabs').tabs('option', 'active', selectedIndex); 

    // Or even better pass the active index when creating the tabs control 
    $('#tabs').tabs({ active: selectedIndex });