jQuery UI选项卡panelTemplate选项已弃用



所以我将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>"
})

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

jQuery UI 1.8具有addremove方法(以及相关事件),用于动态删除或向小部件添加选项卡。

来自tabs:的遗留1.8文档

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


  • 删除(索引)
    移除标签。


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

面板模板 类型:字符串


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

选项卡模板 类型:字符串


[参见文档]

idPrefix 类型:字符串


[参见文档]

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

所有这些现在都被弃用了——当前动态添加或删除选项卡的方法是在新的refresh方法的帮助下进行的:

刷新()


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


正如升级指南所述,您需要删除脚本中的所有addremove方法调用,将它们替换为直接操作DOM的代码,然后调用refresh()
此外,您需要放弃idPrefixtabTemplatepanelTemplate的任何集合选项。

正如您的代码所建议的,您正在使用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相同。

最后,升级指南还为您提供了一个示例,说明如何使用新的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>

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

因此,为了让事情重新开始,您只需要删除panelTemplate选项
这里有一个JSFiddle演示了ajax加载以及预加载的选项卡:http://jsfiddle.net/losnir/LWmVv/
另请参阅jQuery UI选项卡文档。

最新更新