jqueryui选项卡+ onunload

Question

我有一个页面上的jqueryui选项卡，当点击“选项卡”链接时，我的页面切换了各种各样的<section>元素，换句话说，我的所有内容都在一个页面上（一个文件）。

我遇到的问题是，如果你愿意的话，在一个<section>或其中一个“标签”上，我想确保用户在离开该部分之前填写了所有字段/提交了表单。它是一个多部分多Ajax请求表单。因此，如果用户填写了所有内容并提交，那没关系。他可以事后离开。

然而，如果用户开始表单提交，但不完整的，并且试图单击另一个选项卡上，我想有一个弹出像“留在页面，‘离开此页面’。

在DOM中，有我相信onunload挂钩，我可以用，但我不知道如何在jQueryUI的标签做到这一点。任何想法钩我可以用插件的使用？

我的jqueryui标签代码：

$(function() { 
    $("#tabs").tabs(); 
}); 

我的HTML结构：

导航：

<ul> 
    <li><a href="#tabs-1">First</a></li> 
    <li><a href="#tabs-2">Second</a></li> 
    <li><a href="#tabs-3">Third</a></li> 
</ul> 

内容：

<div id="tabs" class="container"> 
    <section id="tabs-1"> 
    // Tabs 1 stuff goes here 
    </secion> 
    <section id="tabs-2"> 
    // Tabs 1 stuff goes here 
    </secion> 
    <section id="tabs-3"> 
    // Tabs 1 stuff goes here 
    </secion> 
</div> 

Answer 1

我认为你可以使用这样的事件http://api.jqueryui.com/tabs/#event-beforeActivate到AC请说。

$(function() { 
    $("#tabs").tabs({ 
     beforeActivate: function(e, ui){ 
      if (ui.oldTab.attr('id') == 'tabs-1') { 
       if (confirm('Sure you want to leave?')) { 
        return false 
       } 
      } 
     } 
    }); 
});