Javascript jqueryui选项卡+；昂洛德

我在页面上有jqueryui选项卡，当单击“选项卡”链接时，会切换页面周围的各种

元素，换句话说，我的所有内容都在一个页面（一个文件）上

我遇到的问题是，如果您愿意，我希望在一个

或其中一个“选项卡”上，确保用户在离开该部分之前填写了所有字段/提交了表单。它是一个由多部分组成的多ajax请求表单。因此，如果用户已经填写了所有内容并提交，就可以了。他可以事后离开

但是，如果用户开始提交表单，但没有完成，并尝试单击另一个选项卡，我希望弹出一个类似于“停留在页面上”，“离开页面”

在dom中，我相信有一个

onunload

钩子可以使用，但我不知道如何在jqueryui选项卡中使用它

我的jqueryui标签代码：

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

<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>

我的html结构：

导航：

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

<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>

内容：

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

<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>

//表1这里有东西
//表1这里有东西
//表1这里有东西

我认为您可以使用类似于此事件的方法来实现这一点

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