Question

您好我使用jQuery UI标签作为表单。

因此我不能使用Ajax，因为发送表单时必须存在所有选项卡/内容。该表单由9个不同的选项卡组成，每个选项卡都有很多代码。

现在我想将这些标签的内容外包给每个单独的文件（tab1.php，tab2.php，...）。

到目前为止我的解决方案：

我可以在<head>中包含所有文件（tab1.php，...），然后将每个内容作为变量加载。我不喜欢这个，因为代码看起来很乱，因为所有的转义。

我使用iframe。框架仅在单击时加载。

<div id="tab-1">
    <iframe src="..."></iframe>
</div>

有更好的方法吗？也许使用Ajax load-onceAll或类似的东西？...可能会阻止iframe重新加载...我不知道。

Answer 1

您可以将代码外包给单个文件，然后在页面加载时使用Ajax jQuery调用拉入其内容：

var tabs = [
   {
      url: 'tab1.php',
      $ctrl: $('div#tab1')
   },
   {
      url: 'tabN.php',
      $ctrl: $('div#tabN')
   }
];

for(var i = 0; i < tabs.length; ++i)
{
  var data = $.ajax({
    url: tabs[i].url,
    async: false
  }).responseText;
  tabs[i].$ctrl.html(data);
}

然后，您可以在各个选项卡表单的onSubmit函数中使用某些验证，以确保在完成所有选项之前不会回发它们。这只是一种可能的解决方案。

Answer 2

您是否已尝试使用jQuery动态添加标签的内容？我的意思是你使用id为"tab1_div"的div whit，然后使用

添加HTML

$("#tab1_div").html("my html content for the tab-page");

如果可行，您可以使用$.get(...)通过Ajax获取选项卡的HTML。

jQuery UI选项卡：在不使用Ajax或iframe的情况下从单个文件/页面加载选项卡

2 个答案: