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 来实现这一目标。

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