jQuery UI选项卡panelTemplate选项已弃用

所以我将jQueryUI从1.8升级到1.10。 选项卡似乎已经在1.9中根据以下内容进行了重构：

在通读过程中，出现了以下情况：

不推荐的idPrefix、tabTemplate和panelTemplate选项；使用 刷新方法

如上所述，add和remove方法已被弃用。 因此，idPrefix、tabTemplate和panelTemplate选项具有 也有人反对。您应该更换idPrefix的所有用途， tabTemplate和panelTemplate选项以及所需的标记 使用

不太清楚什么

您应该替换所有使用。。。使用您想要使用的标记

means

HTML

JS

jQuery（“#主xxx选项卡”）.tabs({
面板模板：“
})

---

如果有人能提供如何正确升级的示例，我们将不胜感激。

jQuery UI 1.8提供了

add

和

remove

方法（以及相关事件），用于动态删除或添加小部件的选项卡

从

选项卡的
：


添加（url、标签[、索引]）

添加一个选项卡


删除（索引）

移除一个标签




这两种方法使用了以下选项：



面板模板类型：字符串


默认值：“

使用add（）方法添加选项卡或动态创建远程选项卡的面板时，从中创建新选项卡面板的HTML模板

选项卡模板类型：字符串



idPrefix类型：字符串



如您所见，
panelTemplate
是使用
add
方法创建面板的HTML模板

所有这些现在都已弃用-当前动态添加或删除选项卡的方法是借助新的
刷新
方法：

刷新（）


处理直接在DOM中添加或删除的任何选项卡，并重新计算选项卡面板的高度。结果取决于内容和高度样式选项。

此方法不接受任何参数



正如《升级指南》所述，您需要删除脚本中的所有
add
和
remove
方法调用，将它们替换为直接操作DOM的代码，然后调用
refresh（）


此外，您需要放弃
idPrefix
、
tabTemplate
和
panelTemplate
的任何设置选项

正如您的代码所示，您正在使用
add
方法，例如：

$("#main-xxx-tabs").tabs("add", "/remote/tab.html", "New Tab");

使用新的
选项卡
API，您应该执行类似的操作（考虑到您当前的
面板模板
值）：

然后你应该按照以下思路做一些事情：

<div id="main-xxx-tabs">
   <ul>
      <li><a href="#tabs-1">Preloaded</a></li>
      <li><a href="link1.php">link1</a></li>
      <li><a href="link2.php">link2</a></li>
   </ul>
   <!-- vv Constructed from your original panelTemplate vv -->
   <div id="tabs-1" class="main-xxx-tabs-content">
      <p>Your preloaded content here.</p>
   </div>
</div>







您的预加载内容在这里


为了进一步澄清，一个
面板是选项卡的内容div。

对于ajax加载的选项卡，您不需要创建面板-它将自动为您创建

因此，为了有效地恢复工作，您只需删除
panelTemplate
选项。

下面是一个JSFIDLE，演示了ajax加载以及预加载的选项卡：


另请参见。
我不确定是否遵循-我不希望添加更多选项卡，只是以某种方式为所有选项卡设置模板。这些选项卡的内容是通过ajax加载的。您应该阅读jQueryUITabs文档，这些都是为您准备的。然而，我扩展了我的答案，以包括更多的例子，并进一步解释差异。
$("#main-xxx-tabs").tabs("add", "/remote/tab.html", "New Tab");

/* Add tab */
$("#main-xxx-tabs .ui-tabs-nav")
   .append("<li aria-controls='newTabID1'><a href='/remote/tab.html'>New Tab</a></li>")

/* Add respective tab panel (content) and refresh widget */
$("#main-xxx-tabs")
   .append("<div id="newTabID1" class='main-xxx-tabs-content'>New Tab Content</div>");
   .tabs("refresh");

<div id="main-xxx-tabs">
<ul>
<li><a href="link1.php">link1</a></li>
<li><a href="link2.php">link2</a></li>
</ul>
</div>

<div id="main-xxx-tabs">
   <ul>
      <li><a href="#tabs-1">Preloaded</a></li>
      <li><a href="link1.php">link1</a></li>
      <li><a href="link2.php">link2</a></li>
   </ul>
   <!-- vv Constructed from your original panelTemplate vv -->
   <div id="tabs-1" class="main-xxx-tabs-content">
      <p>Your preloaded content here.</p>
   </div>
</div>