Question

所以我将jquery ui从1.8升级到1.10。根据这一点，标签似乎已在1.9中重构：http://jqueryui.com/upgrade-guide/1.9

在阅读时 - 出现了这个问题：

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

如上所述，不推荐使用add和remove方法。   因此，idPrefix，tabTemplate和panelTemplate选项具有   也被弃用了。您应该替换idPrefix的所有用法，   tabTemplate和panelTemplate选项以及您想要的标记   使用。

不清楚You should replace all uses... with the markup you would like to use的含义。

HTML

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

JS

jQuery("#main-xxx-tabs").tabs({
  panelTemplate: "<div class='main-xxx-tabs-content'></div>"
})

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

Answer 1

jQuery UI 1.8具有add和remove方法（以及相关事件），用于动态删除或向窗口小部件添加选项卡。

来自tabs的{{3}}：

添加（网址，标签[，索引]）
  添加标签。




删除（索引）
  删除标签。

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

panelTemplate 类型：字符串


默认：“”
  使用add（）方法添加选项卡或在运行中为远程选项卡创建面板时，从中创建新选项卡面板的HTML模板。

tabTemplate 类型：字符串


legacy 1.8 documentation

idPrefix 类型：字符串


[see doc]

正如您所看到的，panelTemplate是使用add方法创建面板的HTML模板。

现在所有这一切都已弃用 - 动态添加或删除标签的当前方法是借助新的refresh方法：

刷新（）


处理在DOM中直接添加或删除的任何选项卡，并重新计算选项卡面板的高度。结果取决于内容和heightStyle选项   此方法不接受任何参数。

如升级指南所述，您需要删除脚本中的所有add和remove方法调用，将其替换为直接操作DOM的代码，然后调用refresh()。
此外，您需要放弃idPrefix，tabTemplate和panelTemplate的任何设置选项。

正如您的代码建议的那样，您正在使用add方法，例如：

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

使用新的tabs API，您应该执行类似的操作（考虑到您当前的panelTemplate值）：

/* 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");

这会创建一个新标签。如果您不需要远程加载（ajax）标签，则可以将href的值替换为aria-controls \ id。

最后，升级指南还为您提供了[see doc]。

的示例

编辑：

如果你只是使用panelTemplate作为主要（第一个）标签的模板，而不是动态创建它们，那么适用相同的规则;你将不得不直接添加适当的HTML。如果升级前的html是：

<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>

为了进一步澄清，panel是您标签的内容div 对于加载了ajax的选项卡，您无需创建面板 - 它将自动为您创建。

如此有效，为了让事情重新开始，你只需要删除panelTemplate选项这是一个JSFiddle，演示了加载ajax以及预加载的选项卡： how to remove a tab with the new API
另请参阅http://jsfiddle.net/losnir/LWmVv/。

不推荐使用jQuery UI选项卡panelTemplate选项

1 个答案:

编辑：