jqueryui Tabs + 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
                }
            }
        }
    });
});