1

所以我将 jquery ui 从 1.8 升级到 1.10。选项卡似乎已经根据以下内容在 1.9 中进行了重构：http: //jqueryui.com/upgrade-guide/1.9

通读时 - 出现了：

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

如上所述，添加和删除方法已被弃用。因此，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>"
})

如果有人可以提供如何正确升级的示例 - 将不胜感激。

4

1 回答 1

0

jQuery UI 1.8 有addandremove方法（和相关事件），用于动态删除或添加标签到你的小部件。

来自旧版 1.8tabs文档：

  • add( url, label [, index ] )
    添加一个标签。

  • remove( index )
    删除一个标签。


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

面板模板 类型：字符串

默认值：""
HTML 模板，在使用 add() 方法添加选项卡或动态为远程选项卡创建面板时，从中创建新选项卡面板。

tabTemplate 类型：字符串

[见文档]

idPrefix 类型：字符串

[见文档]

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

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

刷新（）

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


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

正如您的代码所建议的那样，您正在使用该add方法的某个地方，例如：

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

使用新tabsAPI，您应该执行类似的操作（考虑到您的当前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-controlsid

最后，升级指南还提供了一个示例，说明如何使用新 API 删除选项卡。

编辑：

如果您只是用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>

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

如此有效，要让事情重新开始，您只需删除该panelTemplate选项即可。
这是一个演示 ajax 加载以及预加载选项卡的 JSFiddle：http: //jsfiddle.net/losnir/LWmVv/
另请参阅jQuery UI 选项卡文档。

于 2013-08-15T21:36:25.533 回答