0

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

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

但是，如果用户开始提交表单，但没有完成，并尝试单击另一个选项卡，我希望有一个弹出窗口，如"Stay on Page、"Leave Page"。

在 dom 中，我相信有一个onunload可以使用的钩子，但我不知道如何在jqueryui tabs中执行此操作。任何想法我可以在插件中使用什么钩子？

我的 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>
4

1 回答 1

0

我认为你可以使用类似这个事件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
                }
            }
        }
    });
});
于 2013-06-22T16:23:46.710 回答