jqueryui Tabs + onunload

Question

我在页面上有jqueryui选项卡，当单击" tabs“链接时，会切换页面周围的各种<section>元素，换句话说，我的所有内容都在一个页面(一个文件)上。

我遇到的问题是，如果您愿意的话，在一个<section>或一个"Tabs“上，我想确保用户在离开该部分之前已经填写了所有字段/提交了一个表单。它是一个多部分、多部分、多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来实现这一点。

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