jQuery UI选项卡：如果表单在活动选项卡中输入内容，请不要让用户切换选项卡 [英] jQuery UI Tabs: Don't let user switch tabs if form input in active tab has content

问题描述

我使用jQuery UI选项卡，并且这些选项卡位于表单内。每个选项卡都包含一些可以填充的表单域。它看起来像这样：

 < form> 
< tab1 href = tabcontent1> < tab2 href = tabcontent2> < tab3 href = tabcontent3> 
 
< div tabcontent1> 
<输入栏> 
<输入栏> 
< / div> 
 
< div tabcontent2> 
<输入栏> 
<输入栏> 
< / div> 
 
< div tabcontent3> 
<输入栏> 
<输入栏> 
< / div> 
 
<提交按钮> 
< / form> 
  

问题是，如果用户例如已经开始填充tab1的字段，我不想要用户可以填写tab2或tab3的字段。

所以，我正在寻找一种方法来检查用户是否已经开始填充输入字段如果是这样，隐藏其他标签/禁用切换到其他标签。

如果用户删除了他写的东西，他应该再次能够切换标签。

感谢您的帮助，非常感谢！ 。 您可以使用 beforeActivate 功能的jQuery选项卡来执行此操作。由于你的代码不完整，因此不清楚，我只是从jQuery选项卡文档中获取示例示例：

JS：

  $（function（）{
 $（＃tabs）。tabs（{
 beforeActivate：function（event，ui）{
 var content = ui.oldPanel; //获取当前内容
 var input = $（content）.find（'input.i'）; //获取输入
 if（input.val（） ）{//检查输入是否有任何值或任何你想要的条件
 alert（'not allowed'）; 
 return false; //如果条件满足，停止加载新标签
 } 
} 
}）; 
}）; 
  

演示： http://jsfiddle.net/lotusgodkk/GCu2D/416/

I'm using jQuery UI Tabs, and these tabs are inside a form. Every tab contains a number of form fields, which can be filled. It looks something like this:

<form>
<tab1 href=tabcontent1> <tab2 href=tabcontent2> <tab3 href=tabcontent3>

<div tabcontent1>
<input field>
<input field>
</div>

<div tabcontent2>
<input field>
<input field>
</div>

<div tabcontent3>
<input field>
<input field>
</div>

<submit button>
</form>

Problem is, If the user for example have started filling the fields of tab1, I don't want the user to be able to fill the fields of tab2 or tab3.

So, I'm looking for a way to check if the user have started to fill the input fields of a tab, and if this is the case, hide the other tabs / disable switching to the other tabs.

If the user removes the stuff he has written, he should once again be able to switch tabs.

Thanks for your help, it's greatly appreciated!

// Jens.

解决方案

You could have used beforeActivate function of jQuery tab to do this. Since your code is not complete and hence not clear, I will just take the sample example from jQuery tabs documentation:

JS:

$(function () {
    $("#tabs").tabs({
        beforeActivate: function (event, ui) {
            var content = ui.oldPanel; // Get current content
            var input = $(content).find('input.i'); //Get input
            if (input.val()) { // Check if input has any value or whatever condition you want.
                alert('not allowed');
                return false; //Stop loading new tab if condition is satisfied.
            }
        }
    });
});

Demo: http://jsfiddle.net/lotusgodkk/GCu2D/416/

这篇关于jQuery UI选项卡：如果表单在活动选项卡中输入内容，请不要让用户切换选项卡的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！