使用按钮而不是选项卡设置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 });